The latest articles on DEV Community by Nurman Tri Gumelar (@nurmantg). https://dev.to/nurmantg https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4118709%2F041741c8-623f-4fb2-8653-6cd398cba994.png https://dev.to/nurmantg en Nurman Tri Gumelar Thu, 10 Sep 2026 06:51:53 +0000 https://dev.to/nurmantg/building-an-ultra-fast-link-in-bio-platform-with-laravel-11-livewire-3-real-time-phone-preview-m32 https://dev.to/nurmantg/building-an-ultra-fast-link-in-bio-platform-with-laravel-11-livewire-3-real-time-phone-preview-m32 <h1> Building an Ultra-Fast Link-in-Bio Platform with Laravel 11, Livewire 3 &amp; Real-Time Phone Preview </h1> <p>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.</p> <p>I wanted to build a modern, minimalist, and ultra-fast link-in-bio platform that solves these problems with a clean 6-character domain: <strong><a href="https://gas.pm" rel="noopener noreferrer">GAS.PM</a></strong>.</p> <p>In this article, I want to break down the architectural choices, tech stack, and techniques used to build <strong>GAS.PM</strong> from scratch.</p> <h2> ⚡ The Tech Stack </h2> <ul> <li> <strong>Backend:</strong> Laravel 11 (PHP 8.3)</li> <li> <strong>Frontend / Interactivity:</strong> Livewire 3 + Alpine.js</li> <li> <strong>Styling:</strong> Tailwind CSS (Modern Glassmorphism &amp; Custom Themes)</li> <li> <strong>Database:</strong> MySQL</li> <li> <strong>Production Server:</strong> Nginx + PHP-FPM on Linux</li> </ul> <h2> 🎯 1. Real-Time Split-Screen Live Preview with Livewire 3 </h2> <p>The core UX challenge of a bio link builder is giving creators immediate visual feedback. Instead of saving, reloading, and opening a new tab, <strong>GAS.PM</strong> utilizes a split-screen dashboard:</p> <ul> <li> <strong>Left Side:</strong> The configuration panel (adding links, reordering, tweaking avatars, backdrop filters, and button styles).</li> <li> <strong>Right Side:</strong> An interactive simulated smartphone frame rendering the live public profile.</li> </ul> <p>With <strong>Livewire 3</strong>, updates happen seamlessly:</p> <ul> <li>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.</li> <li>Drag-and-drop link reordering updates the database order instantly in the background.</li> </ul> <h2> 🎨 2. Deep Aesthetic Customization (Glassmorphism &amp; Frosted Glass) </h2> <p>Creators care deeply about their aesthetic identity. Rather than offering just 3 static templates, GAS.PM gives users granular control over:</p> <ol> <li> <strong>Backdrop Filters:</strong> Frosted glass overlay opacity and dynamic values.</li> <li> <strong>Button Shapes:</strong> Rounded, sharp, or minimalist border styles.</li> <li> <strong>Typography &amp; Category Headers:</strong> Visually grouping multiple links into distinct sections with clean typography.</li> <li> <strong>Live Search Bar:</strong> Visitors can search through complex portfolios or link trees in real-time.</li> </ol> <h2> 📈 3. Silent Edge Analytics &amp; Instant QR Code Generator </h2> <p>A link in bio isn't complete without insights and sharing tools:</p> <ul> <li> <strong>Edge Analytics:</strong> Background logging of and mapped with device and location insights.</li> <li> <strong>Canvas QR Code Generator:</strong> Users can generate and download print-ready high-resolution QR codes directly from the dashboard for physical packaging, business cards, or event banners.</li> </ul> <h2> 🚀 Check It Out Live </h2> <p>The platform is completely free to use:</p> <ul> <li> <strong>Platform:</strong> <a href="https://gas.pm" rel="noopener noreferrer">https://gas.pm</a> </li> <li> <strong>Live Demo Bio:</strong> <a href="https://gas.pm/nurmantg" rel="noopener noreferrer">https://gas.pm/nurmantg</a> </li> </ul> <p>I'd love to hear feedback from the developer and creator community on features you'd love to see next!</p> laravel webdev tailwindcss php