Convex Real-Time Database

🔐 Clerk (Auth + Billing): https://go.clerk.com/sonny 🚀 Join the Zero to OpenClaw Hero waitlist 👉 https://www.papareact.com/ztoh-form Episode 2 of our new Series ‘Code with AI the Right Way’ is here! — and this time, we’re building LIVE from scratch! No pre-built code, no shortcuts. You’ll watch the entire process unfold in real-time as we break down requirements, set up our AI tooling, and vibe code a full Product Hunt clone from zero. Whether you’re just starting out or leveling up, this episode shows you how to think through architecture first, then leverage tools like Cursor to move fast without breaking things. 👇 Other Links mentioned in the video: 🗄️ Convex (Real-time Database): https://convex.dev/referral/SONNYS4371 💻 Source Code Form: [Updated after build is completed] --- 🎯 What You'll Get From This Episode: 📋 Requirements Breakdown We start by analyzing Product Hunt's core features and translating them into a clear build plan — the way a senior developer would scope a project before writing a single line of code. 🛠️ AI Tooling Deep Dive Watch us set up and configure the AI tools we'll use throughout the build — Cursor, skills, MCP servers, rules files, and documentation context. You'll learn WHY each tool matters and WHEN to use it. 🧠 What You'll Learn Along the Way: • How to break down a real-world app into buildable phases • Setting up your AI coding environment the right way • When to use Plan Mode vs Agent Mode in Cursor • How to feed AI the right context (docs, skills, rules) • Debugging live — because things WILL break, and that's the lesson • Architecture decisions: why we structure things the way we do This is a LIVE build — mistakes, debugging, and all. That's the point. You learn more watching someone solve real problems in real-time than from a polished, pre-recorded tutorial. 🕣 Timestamps: 0:00 Intro & Welcome 0:26 What we're building — Product Hunt 1:41 Tech Stack Overview 3:00 Feature planning & brainstorming 5:18 Clerk for Authentication & Billing 6:20 Using OpenClaw AI agent to scope features 7:46 MCPs & Skills breakdown 10:18 Reviewing feature suggestions 13:53 Project setup — npm create convex 15:00 Clerk configuration & API keys 18:00 Creating the Convex project 21:00 Installing skills in Cursor 24:00 Cursor rules & agents.md explained 25:25 First look — sign-in flow works 27:00 MCPs vs Skills explained 30:00 Installing ShadCN 32:00 Planning mode — creating the build plan 35:00 Convex schema design 39:00 Fixing fonts & app restart 45:00 Skills deep dive — auto-pull behavior 48:00 Responsive design strategy 53:00 Committing baseline & starting build 57:00 Phase 1 complete — reviewing changes 1:00:00 Fixing TypeScript types 1:03:00 Replacing useEffect with Clerk webhooks 1:09:00 Webhook testing — user sync verified 1:15:00 Product submission, categories & tags 1:18:00 Route protection & auth checks 1:24:00 Seeding realistic test data 1:27:00 Context window management 1:31:00 Git worktrees — parallel development 1:38:00 Seed data results — feed working 1:41:00 Testing upvotes, comments & replies 1:44:00 DSA explained through the app 1:47:00 UI/UX redesign planning 1:54:00 Running multiple agents in parallel 2:06:00 Career advice — AI coding landscape 2:14:00 Onboarding flow & user profiles 2:21:00 Leaderboards & awards 2:36:00 UI/UX redesign in progress 2:47:00 Context window trick — fresh session 2:50:00 Billing integration with Clerk 2:54:00 Redesign results revealed 2:58:00 Clerk Billing Plan Setup 3:07:00 Timeline navigation & date strip UX 3:12:00 Sponsored listings working 3:21:00 Mobile responsiveness check 3:24:00 Billing test — subscribe & cancel flow 3:30:00 Live leaderboard & timezone fixes 3:37:00 Full app walkthrough & deployment tips 3:42:00 Outro ─── 👇 Want to become an AI Next-gen developer? Check out my course & community here: https://www.papareact.com/course Learn to vibe code the RIGHT way with Cursor and AI — build real-world SaaS apps from scratch, join thousands of developers in the community, and land your dream job. ─── 📱 Follow me across socials: Twitter/X: https://x.com/sonnysangha Instagram: https://instagram.com/sonnysangha LinkedIn: https://linkedin.com/in/sonnysangha TikTok: https://tiktok.com/@sonnysangha Discord: https://discord.gg/papafam DISCLAIMER: This video is sponsored by Clerk. This video is made for informational and educational purposes only. We do not own or affiliate with Product Hunt and/or 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. #cursor #ai #vibecode #nextjs16 #clerk #convex #tailwindcss #vibecoding #fullstackdeveloper #reactjs #typescript #saasapp #multitenant #webdev #cursorai #claude #openai #gpt #opus46 #opus #codex