Improving social media links

38 views
4 hours watched
4 completions

Ugly forms won't do! Let's make adding social media links much nicer.

  • Space Play/pause
  • /
  • Shift + + Increase speed
  • /
  • Shift + - Decrease speed
  • /
  • F Toggle fullscreen

Get full access

You need to subscribe to get full access to the video and lesson content.

Join 3.5K+ learners from companies like Shopify, Microsoft, Tiktok, AppSumo and Instacart.

Lifetime

Lifetime access to all Playbooks courses.

Only 171 spots left!

$197 one-time

We've made significant progress on our link creation feature. Let's review the completed items:

  • Social media links have been improved and made more user-friendly
  • Inline editing for social media links has been implemented
  • Icons for each social network have been added
  • The UI for adding and editing social media links has been streamlined

Using Wispr Flow

I'm now using Wispr Flow for voice input.

Previous Implementation

Previously, we had a form-based approach for adding social media links:

  1. Users selected the network from a dropdown
  2. They entered their handle and description
  3. Clicked "Add" to create the link

New Implementation

Our new approach is more intuitive and user-friendly:

  1. Users click an "Add Social Media" button
  2. They see buttons for each supported social network, complete with icons
  3. Clicking a network immediately adds it to their link page
  4. Users can then edit the username and description inline

Technical Changes

  • Created blade components for social media icons using SVGs from Nucleo app
  • Implemented inline editing using AlpineJS
  • Removed the separate form for adding links
  • Added real-time updates using Livewire's wire:model.live and wire:change

UI Improvements

  • Custom input styling with a light gray background
  • Removed focus rings for a cleaner look
  • Added network...

Subscribe now to get full access to the lesson content.

Get started →