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/

Icons: https://iconduck.com/licenses/mit

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