Summary
Keywords
Full Transcript
1️⃣ Get Started with Sanity 👉 https://www.sanity.io/sonny?utm_source=youtube&utm_medium=video&utm_content=patreon 2️⃣ Get Started with Clerk 👉 https://go.clerk.com/buyiIeO 3️⃣ Get Started with Schematic 👉 https://schematichq.com/papareact?utm_source=youtube&utm_campaign=sonny_20250507 🛠️ Looking for the SOURCE CODE for this build? (Plus over 55+ others!) https://links.papareact.com/github 🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course 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 Patreon-like app! 🎯 What You'll Learn: 📚 Full-Stack Development with Next.js 15 - Server Components & Server Actions for optimal performance - Modern app router architecture - TypeScript for type safety and better development experience - Turbopack for lightning-fast development 🗃️ Content Management with Sanity CMS - Flexible post and content management - Rich text editor for creator content - Media uploads and optimization - Custom schemas for membership platform content - Real-time content updates 💰 Membership & Subscription Features - Complete tier-based subscription system - Premium content access controls - Creator profiles with customizable details - Membership management dashboard - Payment processing with Schematic 💬 User Interaction System - Direct messaging to creator for vip subscribers - Comment system for post engagement - Subscription management for users - Content access based on subscription tier 🔒 Authentication & User Management - Secure authentication with Clerk - Protected routes and premium content 🎨 Modern UI/UX - Responsive design with Tailwind CSS - Beautiful components with Radix UI - Clean, Patreon-inspired interface - Loading states and skeletons - Time-ago timestamps for posts - Micro-interactions for better engagement 🌟 Professional Features - Full authenticated admin dashboard for creators - Seamless subscription management - Mobile-optimized browsing experience 🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST? Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter 🕐 TIMESTAMPS: 0:00 Introduction 00:18 Build Demo & Breakdown 10:48 Build Tech Stack 15:25 Initialising the Build with Clerk 25:40 Setting Up Sanity Studio 30:58 Setting Up a Schematic Account 35:41 Creating the Header Component 37:13 Setting Up User & Admin in Sanity Studio 40:34 Building the Header Component (1/3) 42:59 Implementing Shadcn/ui 46:02 Building the Header Component (2/3) 50:10 Building Schema Types for Sanity (1/2) 1:01:43 Pulling Data from Sanity Studio 1:04:43 Implementing Sanity TypeGen 1:08:18 Building the Header Component (3/3) 1:12:28 Setting Up Schematic & Stripe for Payments 1:21:44 Configuring the Pricing Plans with Schematic 1:23:47 Setting Up Feature Gating in Schematic 1:30:26 Further Configuring the Pricing Plans with Schematic 1:34:21 Implementing Schematic in the Build 1:45:27 Implementing the Pricing Schematic Component 1:53:59 Building the Pricing Page 2:01:12 Implementing Feature Gating with Schematic 2:08:43 Implementing the Current Tier Badge 2:18:51 Building Schema Types for Sanity (2/2) 2:23:24 Deploying Sanity Studio 2:36:13 Building the Top Section of the Home Page 2:52:34 Building the Posts List Component 2:55:05 Implementing the Filter by Tier Functionality 2:57:45 Creating the Post Component 3:00:49 Building the Locked Post Component 3:08:09 Building the Post Component 3:12:43 Building the Post Page 3:19:46 Implementing the Comment Functionality 3:36:04 Implementing Direct Messaging Functionality 3:44:20 Building the Message Page 3:49:44 Implementing the Send Message Functionality 4:00:27 Deploying to Vercel 4:11:26 Final Deployed Build Demo 4:13:15 Outro Let’s get it PAPAFAM 🔥. DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Patreon 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 #cms #sanity #stripe #payments #schematic #clerk #patreon #learning #coding #tutorial #beginner #programming
