🔴 Let's build an AI Journal App w/ REACT NATIVE! (Sanity, Clerk, Stripe, Expo, Cursor, MCP, OpenAI)
Join me as I show you how to build a AI Journal App from scratch with React Native - This comprehensive tutorial covers everything you need to create an AI Journal App!
🎯 What You'll Learn
🛠️ Modern Tech Stack:
- Expo SDK 54 - React Native with new architecture, React 19, and file-based routing
- Sanity CMS - Headless CMS with custom schemas, Studio admin dashboard, and powerful GROQ queries
- Clerk + Billing - Authentication with Stripe-powered subscriptions and pricing table integration
- OpenAI GPT - Pro Feature gated AI therapeutic chat with multi-step reasoning and tool calling
- Vercel AI SDK - Real-time streaming responses for Expo apps
- Tamagui - Cross-platform UI components with native performance
💻 Core Features:
- User Authentication - Google OAuth, email sign-up, and session management
- AI Therapist Chat - Analyzes journal history and provides personalized insights
- Daily Writing Prompts - Admin-managed with weighted random selection
- Rich Journal Entries - Mood tracking, categories, images, and auto-categorization
- Subscription Management - Pro/Starter plans with Expo Web pricing portal
- Dual App Architecture - Native mobile app + Sanity Studio admin dashboard
🔧 Advanced Concepts:
- AI Tool Calling - Custom tools that fetch/analyze journal entries by date or patterns
- Expo Web Strategy - Use web exclusively for billing while keeping app native
- Sanity Integration - Custom schemas, relationships, type generation, and image handling
- Clerk Billing - Pricing table component, webhooks, and feature gating
- GROQ Queries - Powerful filtering and sorting with Sanity’s query language
- Real-time Streaming - AI responses with visual indicators
🚀 Production Skills:
- API Routes - Serverless edge functions with Expo
- Feature Gating - Subscription-based access control
- State Management - Context API and custom hooks
- Perfect for developers learning React Native, AI integration, and subscription monetization!
I'll see you there. Peace PAPAFAM 🫡
watch video on watch page
18 - 0
🔴 Let’s build an AI Marketing SaaS w/ Next.js 15! (SEO Reports, BrightData, OpenAI, Clerk Billing)
Join me as I show you how to build a AI Marketing SaaS App from scratch with Next.js 15 - In this comprehensive tutorial, you’ll learn how to create a fully functional SaaS platform where users can generate SEO reports, and leverage AI to supercharge their marketing!
🎯 What You'll Learn
🛠️ Modern Tech Stack Mastery:
Next.js 15 - App Router, server actions, React 19, and TypeScript end-to-end
Convex - Real-time serverless backend with reactive queries, mutations, and job scheduling
Clerk - Authentication with Clerk Billing for subscription management (Stripe-powered)
Bright Data - Professional web scraping with SERP & Perplexity integration
OpenAI GPT - AI-powered analysis with structured report generation
Vercel AI SDK - Type-safe AI completions and real-time streaming chat responses
shadcn/ui + Tailwind CSS - Modern responsive design with beautiful, accessible components
💻 Core Features You’ll Build:
User Authentication - Sign up, sign in, and subscription management with Pro/Starter plans
AI Report Generation - Generate comprehensive SEO analysis reports in seconds using AI
Web Scraping Integration - Collect real-time data from search engines and web sources
Real-time Progress Tracking - Live status updates during report generation with Convex
AI Chat Integration - Chat with your reports using contextual AI with web search capabilities (Pro plan feature)
Beautiful Dashboard - Modern, responsive UI with detailed data visualizations using Recharts
Smart Retry Logic - Failed analyses can retry without re-scraping expensive data
🔧 Advanced Development Concepts:
Real-time Data Sync - Learn reactive programming with Convex subscriptions and schedulers
Authentication & Billing Flow - Implement secure user sessions with subscription-based feature gating
AI Integration Architecture - Structured AI workflows with Zod schema validation
Webhook Processing - Handle external API callbacks from Bright Data scraping via Convex HTTP endpoints
Background Job Management - Long-running tasks with smart retry logic and status tracking
Database Design - Schema design for SEO reports with optimal data structure
🚀 Production-Ready Skills:
Deployment - Deploy to Vercel with environment configuration and webhook endpoints
Performance - Optimize for AI processing and large-scale web scraping operations
Error Handling - Implement robust error boundaries and retry mechanisms
Security - Follow best practices for API keys, webhooks, and user data protection
✅ Perfect for developers who want to:
Master modern React/Next.js development with the latest features
Learn AI integration and prompt engineering for business applications
Build production-ready SaaS applications with subscription billing
Create portfolio-worthy full-stack AI-powered projects
Watch the Video here 👇
watch video on watch page
31 - 0
I Found the BEST AI Tool to Review Your Code... and it’s Free! (CodeRabbit CLI)
In this video, I’m showing you how CodeRabbit can save you from disaster when coding with AI. We all use tools like Cursor, Claude, and Gemini to move faster — but faster doesn’t always mean cleaner. That’s where CodeRabbit comes in.
I’ll demo three ways to use it in your workflow:
1️⃣ First, the CLI right in your terminal — this is the real game changer, giving you completely free AI reviews on staged and unstaged changes before you even commit. It keeps you in flow, flags messy code, and stops bugs before they spread.
2️⃣ Then we’ll look at the editor extensions in VS Code, Cursor, and Windsurf, which catch issues before you commit to your changes — making sure you don’t miss anything while you’re in the zone.
3️⃣ Finally, the pull request reviews, where CodeRabbit automatically summarises your changes and highlights risks so nothing sloppy makes it into production.
Watch the video here 👇
watch video on watch page
22 - 0
The wait’s over — my new video on Replit Agent 3 is LIVE! 🚀
In this video, I’m not just showcasing features — I’m testing Agent 3 to see if it can really do what it says it can do. Can it actually take an idea and turn it into a usable app? That’s the challenge!
I asked it to build a chatbot dashboard with multiple assistants — one for community questions, another for website info, and even a public-facing chatbot that anyone can try. Along the way, I put Agent 3’s new abilities to the test:
✅ Running on its own for up to 200 minutes
✅ Testing and fixing its own work in a browser
✅ Creating and managing assistants with different specialties
✅ Deploying a working prototype you can share instantly
Once you’ve watched, I’d love to hear your take — drop a comment on the video and let me know what you think about the future of AI tools like this. Could they change the way we prototype apps forever?
Watch the video here 👇
watch video on watch page
14 - 0
🔴 Lets build a Telegram 2.0 Clone with Next.js! (Video Calling, Group & 1-1 Chat, Stream, Clerk, TS)
Join me as I show you how to build a Telegram-like App from scratch with Next.js - This comprehensive tutorial walks you through everything you need to build a fully functional web app with video calling, group chat and 1-1 chat features!
🎯 What You'll Learn:
🛠️ Modern Tech Stack Mastery:
Next.js 15 - App Router, server actions, and TypeScript
Convex - Real-time database with reactive queries and mutations
Clerk - Authentication with user management and session handling
Stream Chat & Video - Professional chat UI and video calling infrastructure
TailwindCSS - Modern responsive design and component styling
💻 Core Features You'll Build:
User Authentication - Sign up, sign in, and user profile management
Real-time Messaging - Instant chat with message persistence and history
Group Chats - Create and manage group conversations with multiple users
HD Video Calls - One-click video calling with Screen sharing capabilities
User Search - Find and connect with other users across the platform
Responsive Design - Mobile-first UI that works perfectly on all devices
🔧 Advanced Development Concepts:
Real-time Data Sync - Learn reactive programming with Convex subscriptions
Authentication Flow - Implement secure user sessions and route protection
Client-Server Architecture - Understand modern full-stack patterns
Token-based Security - Generate and validate secure tokens for video calls
Database Design - Schema design for chat applications with optimal indexing
State Management - Handle complex UI states in a messaging app
🚀 Production-Ready Skills
Deployment - Deploy to Vercel with environment configuration
Performance - Optimize for real-time applications and large user bases
Error Handling - Implement robust error boundaries and user feedback
Security - Follow best practices for authentication and data protection
✅ Perfect for developers who want to:
Master modern React/Next.js development
Learn real-time application architecture
Build production-ready messaging applications
Understand professional chat and video infrastructure
Create portfolio-worthy full-stack projects
Prerequisites: Basic React knowledge helpful but not required - we'll guide you through everything step by step!
Set your reminder here and I'll see you soon PAPAFAM! 👇
watch video on watch page
54 - 0
I Just Released a 14 Hour React Native Crash Course! 🔥
Join me as I build 4 React Native Apps using Expo, AI, Tailwind CSS, & Much More:
1️⃣ AI WORKOUT TRACKER APP that can help you track your workouts with a live timer, give you AI-powered exercise guidance and tips, and log all the analytics to track your fitness journey with detailed statistics!
2️⃣ ZOOM-LIKE VIDEO CALLING APP with Real-time Seamless Audio and Video calling Functionality & a Join Room feature that can support more than 100k Participants!
3️⃣ UPS-LIKE DELIVERY APP where you can pull all the customer info, order info, search through any records and I’ll show you how you can turn a chunky JSON data into a beautiful delivery app!
4️⃣ And finally, a FITNESS APP WITH IN-APP SUBSCRIPTIONS where we will implement Monthly & Annual in-app Subscriptions with localised pricing, restore purchases feature & full fledged Feature gating!
Watch the Crash Course here! 👇
watch video on watch page
134 - 5
Join me as I show you how to build an AI Workout Tracker with React Native. We will also implement Sanity CMS, Clerk, Expo, Nativewind, OpenAI & much more amazing tech!
🎯 What You'll Learn:
📱 Mobile Development with React Native & Expo
- Cross-platform mobile app development for iOS and Android
- Real-time workout tracking with live timers
- Touch-optimized interface design for mobile devices
- TypeScript for type safety and better development experience
- State management with Zustand for efficient data handling
🗂️ Content Management with Sanity CMS
- Flexible exercise database with images and descriptions
- Rich content editor for exercise instructions
- Media uploads and optimization for demonstration videos
- Custom schemas for fitness content
- Headless CMS for flexible content management
💪 Fitness Tracking Features
- Smart workout tracking with set and rep logging
- Built-in stopwatch for accurate workout duration tracking
- Progress analytics to track fitness journey with detailed statistics
- Comprehensive exercise library with instructions
- Unit flexibility to switch between kg and lbs for weight tracking
🤖 AI Integration & Guidance
- Personalized exercise instructions powered by OpenAI
- AI-powered exercise guidance and tips
- Intelligent workout recommendations
- Real-time AI assistance during workouts
🔒 Authentication & User Management
- Secure authentication with Clerk
- Google OAuth integration
- Protected user data and workout history
- User profile management
🎨 Modern UI/UX Design
- Beautiful interface with NativeWind/Tailwind CSS
- Intuitive tab-based navigation with workout flow
- Consistent design with unified color scheme and typography
- Smooth animations with fluid transitions and micro-interactions
- Loading states with clear feedback during data operations
- Screen reader support and accessible components
🌟 Professional Mobile Features
- Responsive design optimized for all screen sizes
- Mobile-first design approach
- Cross-platform compatibility
- Real-time progress tracking and analytics
Set your reminder here and I'll see you soon PAPAFAM! 👇
watch video on watch page
46 - 1
Our 19 Hour AI Agent Crash Course is now OUT! 🚀
Join me as I build 4 AI Agentic Apps using Next.js 15, ReactJS, Tailwind CSS, TypeScript, & More:
1️⃣ RECEIPT TRACKER APP that stores any uploaded receipt, extracts all important data using AI Agentic workflows, and displays the receipt’s key details along with a AI Summary!
2️⃣ REDDIT 2.0 CLONE featuring an AI Moderation Bot powered by AI Agents to detect profanity & sensitive information in posts and comments… and automatically redact it with auto AI moderation!
3️⃣ AI AGENT CHAT APP that leverages Agentic tools from IBM’s Wxflows to retrieve YouTube video transcripts, search through Google Books for book info and summaries, and much more to answer any of your Questions!
4️⃣ AI AGENTIC SAAS APP that uses AI Agents to generate titles, thumbnails, shooting scripts, transcripts, and more from any uploaded video. A perfect SaaS App for deploying and generating recurring revenue today!
Watch the Crash Course Here! 👇
watch video on watch page
72 - 0
I Retired My Mum With a Trip to JAPAN! 🇯🇵
Set your Reminders Now - Vlog #12 will be LIVE at 6pm GST Today!
It’s finally here — the most unforgettable trip of my life. ✈️
This one means the world to me… because I officially retired my mum and took her on the dream vacation she’s always deserved — to Japan! 💙
This vlog is packed with heartfelt moments and unforgettable adventures. From the neon-lit streets of Tokyo to the tranquil temples of Kyoto, we explored it all — together.
We:
• Wrestled a sumo wrestler… and won 💪🏽🏆
• Wandered through vibrant local markets 🍱
• Indulged in Japan’s world-famous cuisine & Wagyu Beef! 🍜
• Took part in a traditional tea ceremony 🍵
• Experienced a samurai training session ⚔️
• Sang our hearts out at karaoke for my Mums Birthday 🎤
• Visited historic shrines and soaked in the culture ⛩
• Went on a breathtaking road trip to Mount Fuji 🚗
• Had a blast at Universal Studios Japan, including Super Nintendo World 🎢🎮
• Sped across the country on the Shinkansen bullet train 🚄
• Fireworks at Konansou rooftop onsen, w/ Mount Fuji views over Lake Kawaguchiko 🎆🗻
• Played with & fed the deer's in Nara Park 🦌🐒
• Fed wild monkeys at Arashiyama Monkey Park in Kyoto 🐒🍌
• Spoilt my mum on her birthday at the breathtaking teamLab Borderless in Tokyo 🎂🌌🖼️
• And soaked in the nightlife of Osaka’s Dotonbori 🎌🎤
• Plus so much more!!! 😁
This wasn’t just a trip — it was a celebration of family, freedom, and a major life milestone. Retiring my mum and giving her the dream vacation she truly deserved was everything.
Join us as we explore Tokyo, Kyoto, Osaka, Nara, and beyond — with travel tips, hidden gems, food spots, and pure joy along the way.
The ultimate Japan travel vlog — let’s go! 🇯🇵
watch video on watch page
16 - 0
Join me as I show you how to build a Linktree SaaS with Next.js 15. Learn the latest tech such as Next.js 15, Tinybird for Analytics, Clerk Billing, Docker, Tailwind CSS, TypeScript & much more!
🎯 What You'll Learn:
- 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
Set your reminder here and I'll see you soon PAPAFAM! 👇
watch video on watch page
23 - 0
I'm Sonny. 💯
You might also know me as PAPA React!
I've been coding for over 10 years now. As a Full Stack developer I've worked both with startups and large corporations to help build & scale their companies. Along the journey I realised my passion existed in helping others excel and pursue their dreams as upcoming developers and if that’s not enough I have cloned most of the applications you have used in your life! 🌟
🚨 Join the world’s BEST developer community “Zero to Full Stack Hero” NOW:
www.papareact.com/course
16 October 2011