Posted by
admin on
April 8, 2024
click to rate
⭐️ 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