Summary
Keywords
Full Transcript
1️⃣ Get Started with Clerk 👉 https://go.clerk.com/zeEg66y 2️⃣ Get Started with Tinybird 👉 https://tbrd.co/sonny 🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course 🛠️ Looking for the Code for this build? (Plus over 55+ others!) https://links.papareact.com/github Join me as I show you how to build it from scratch with Next.js 15 - This comprehensive tutorial covers everything you need to create a Link in bio app! 💻 Tech Stack Server Components & Server Actions with Next.js 15 Authentication with Clerk Payment Processing with Clerk Billing Real-time Database with Convex Analytics Tracking with Tinybird integration Modern UI with Tailwind CSS and Radix UI Responsive Design across all devices Real-time Updates with Convex subscriptions Protected Routes and secure data handling Turbopack for lightning-fast development Clean, Linktree-inspired Interface Consistent Design System using Shadcn & Radix UI components Drag & Drop Interactions with beautiful animations Micro-interactions for better engagement Intuitive Navigation and user experience Theme Support with next-themes Seamless Checkout Experience with Clerk Billing 🎯 What You'll Learn: Custom Profile Pages - Create beautiful, personalized link-in-bio pages Link Management - Add, edit, delete, and organize your links Drag & Drop Sorting - Easily reorder links with intuitive drag-and-drop Analytics Dashboard - Track link clicks and engagement metrics Premium Subscriptions - Monetize your content with subscription tiers Billing Management - Handle subscriptions and payments seamlessly Real-time Updates - Changes reflect instantly across all platforms Theme Customization - Personalize your page appearance Mobile-First Design - Optimized for all devices Extended Link Management - Add 3, 10 or unlimited links to your profile depening on your subscription tier Advanced Analytics - Track detailed click metrics and engagement Geolocation Insights - See where your clicks are coming from globally Subscription Management - Easy billing and plan upgrades One-Click Access - Easy navigation to all creator links Subscription Options - Support creators through premium tiers 🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST? Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter 🕐 TIMESTAMPS: 00:00 Introduction 00:27 Build Demo & Breakdown 08:51 Clerk Billing 10:00 Tinybird for Analytics 16:05 Initialising the Build with Convex 25:17 Setting Up Tinybird & Docker 38:22 Building the Landing Page 55:11 Building the Header Component 1:07:37 Creating the Dashboard Page 1:12:01 Building the Link Customization & Username Functionality 1:45:08 Building the Public Link In Bio Page 2:07:26 Implementing Clerk Billing 2:14:56 Building the Billing Page 2:20:04 Building the Page Customization Functionality 2:43:35 Building the Manage Links Functionality (with React DnD) 3:15:04 Building the Create a New Link Functionality 3:32:45 Explaining & Implementing Tinybird for Link Analytics 4:09:58 Implementing Materializations with Tinybird 4:15:42 Building the Analytics Overview in the Dashboard Page 4:26:43 Building the Link Analytics Page 4:43:27 Live Debugging 4:57:36 Deploying to Vercel 5:02:12 Final Deployed Build Demo 5:07:38 Outro Let’s get it PAPAFAM 🔥. DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Linktree and it's subsidiaries in any form. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes. #nextjs15 #ai #reactjs #clerk #tinybird #saas #saasappdevelopement #docker #learning #coding #tutorial #beginner #programming
