Build a Duolingo Clone With Nextjs, React, Drizzle, Stripe (2024)
βοΈ Become a pro member: https://codewithantonio.com/premium
π¨βπ» Source Code & More: https://www.codewithantonio.com/projects/duolingo-clone
π¬ Discord & Help: https://www.codewithantonio.com/discord
Clerk: https://go.clerk.com/wmPbEeD
Kenney Assets:https://kenney.nl/
Freesound: https://freesound.org/
Elevenlabs AI: https://elevenlabs.io/
Flagpack: https://flagpack.xyz/
In this 11 hour tutorial, you will learn how to create your very own language learning SaaS, similar to Duolingo. Users will be able to choose a language course, and have guided lessons with beautiful design, characters, audio & visual effects. You will learn Next.js 14, Drizzle ORM, PostgreSQL, Server Actions, Stripe, ShadcnUI, Tailwind and more.
Key Features:
- π Next.js 14 & server actions
- π£ AI Voices using Elevenlabs AI
- π¨ Beautiful component system using Shadcn UI
- π Amazing characters thanks to KenneyNL
- π Auth using Clerk
- π Sound effects
- β€οΈ Hearts system
- π Points / XP system
- π No hearts left popup
- πͺ Exit confirmation popup
- π Practice old lessons to regain hearts
- π Leaderboard
- πΊ Quests milestones
- π Shop system to exchange points with hearts
- π³ Pro tier for unlimited hearts using Stripe
- π Landing page
- π Admin dashboard React Admin
- π§ ORM using DrizzleORM
- πΎ PostgresDB using NeonDB
- π Deployment on Vercel
- π± Mobile responsiveness
Timestamps
00:00 Intro & Demo
02:26 Project Setup
12:17 Buttons library
30:00 Marketing Skeleton
39:24 Authentication
01:00:44 Footer
01:07:49 Main Layout
01:25:41 Sidebar
01:38:35 Learn Page Wrappers
02:00:43 Drizzle & Neon
02:14:42 Courses Page
02:33:03 User Progress
03:01:46 Seed Script
03:19:56 Schema
03:44:17 Units
04:11:54 Lesson Button
04:45:15 Course Progress
05:06:52 Lesson Header
05:27:35 Exit Modal
05:39:03 Challenge Cards
06:17:16 Challenge Footer
06:42:33 Challenge Actions
07:24:39 Challenge Finish Screen
08:00:23 Challenge Practice
08:17:34 Shop
08:35:13 Stripe
09:19:36 Details
10:04:48 Admin
11:00:26 Deployment
Posted Apr 8
click to rate
Share this page with your family and friends.