DEV Community

Nurman Tri Gumelar
Nurman Tri Gumelar

Posted on

Building an Ultra-Fast Link-in-Bio Platform with Laravel 11, Livewire 3 & Real-Time Phone Preview

#laravel #php #tailwindcss #webdev

Building an Ultra-Fast Link-in-Bio Platform with Laravel 11, Livewire 3 & Real-Time Phone Preview

Most link-in-bio tools on the web today share the same common frustrations: sluggish page load times, full-page reloads when editing links, and long, clunky URLs.

I wanted to build a modern, minimalist, and ultra-fast link-in-bio platform that solves these problems with a clean 6-character domain: GAS.PM.

In this article, I want to break down the architectural choices, tech stack, and techniques used to build GAS.PM from scratch.

⚡ The Tech Stack

  • Backend: Laravel 11 (PHP 8.3)
  • Frontend / Interactivity: Livewire 3 + Alpine.js
  • Styling: Tailwind CSS (Modern Glassmorphism & Custom Themes)
  • Database: MySQL
  • Production Server: Nginx + PHP-FPM on Linux

🎯 1. Real-Time Split-Screen Live Preview with Livewire 3

The core UX challenge of a bio link builder is giving creators immediate visual feedback. Instead of saving, reloading, and opening a new tab, GAS.PM utilizes a split-screen dashboard:

  • Left Side: The configuration panel (adding links, reordering, tweaking avatars, backdrop filters, and button styles).
  • Right Side: An interactive simulated smartphone frame rendering the live public profile.

With Livewire 3, updates happen seamlessly:

  • When a user changes a color picker or adjusts the glassmorphism blur slider, Livewire dynamically morphs only the modified DOM nodes inside the phone frame without full-page reloads.
  • Drag-and-drop link reordering updates the database order instantly in the background.

🎨 2. Deep Aesthetic Customization (Glassmorphism & Frosted Glass)

Creators care deeply about their aesthetic identity. Rather than offering just 3 static templates, GAS.PM gives users granular control over:

  1. Backdrop Filters: Frosted glass overlay opacity and dynamic values.
  2. Button Shapes: Rounded, sharp, or minimalist border styles.
  3. Typography & Category Headers: Visually grouping multiple links into distinct sections with clean typography.
  4. Live Search Bar: Visitors can search through complex portfolios or link trees in real-time.

📈 3. Silent Edge Analytics & Instant QR Code Generator

A link in bio isn't complete without insights and sharing tools:

  • Edge Analytics: Background logging of and mapped with device and location insights.
  • Canvas QR Code Generator: Users can generate and download print-ready high-resolution QR codes directly from the dashboard for physical packaging, business cards, or event banners.

🚀 Check It Out Live

The platform is completely free to use:

I'd love to hear feedback from the developer and creator community on features you'd love to see next!

Top comments (0)