Build a Duolingo Clone With Nextjs, React, Drizzle, Stripe (2024)
⭐️ Become a pro member:
👨💻 Source Code & More:
💬 Discord & Help:
Clerk:
Kenney Assets:
Freesound:
Elevenlabs AI:
Flagpack:
Icons:
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 14, Drizzle ORM, PostgreSQL, Server Actions, Stripe, ShadcnUI, Tailwind and more.
Key Features:
- 🌐 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
1 view
418
124
1 month ago 00:08:10 1
AI Agents Will Create MILLIONAIRES in 2025 – Are You Ready
1 month ago 00:01:29 1
Тентовые здания МСБИЛДИНГС
1 month ago 00:03:58 1
The Shira Choir x The Kiffness - Im Hashem Lo Yivneh Bayis (Psalm 127 DANCE REMIX)
1 month ago 00:02:43 1
Yearning Kru - Multipass
1 month ago 00:40:25 1
40MIN Unilateral Leg Strength - Lower Body Workout
1 month ago 00:19:20 1
Blue Ribbon: Story of the Build
1 month ago 00:00:31 1
Тот самый чел, который говорит что он “топ 1 холиворлда“
1 month ago 00:06:07 1
PATRIARKH - WIERSZALIN IV (feat. Eliza Sacharczuk) (Official Video) | Napalm Records