🦉 Duolingo Clone - Language Learning Platform

A fully functional Duolingo clone built with modern web technologies. Learn languages through interactive lessons with beautiful design, characters, sound effects, and gamification features including hearts, XP points, and leaderboards.

Credit: This project is based on the tutorial by Antonio Erdeljac (Code With Antonio)

✨ Features

• 📚 Language Learning
  • Language course system with Spanish
  • Guided lessons with progress tracking
  • Practice mode to review completed lessons
  • Interactive challenges (SELECT, ASSIST types)

Note: The app is designed to support multiple languages. Currently includes Spanish. Additional languages require database seeding with course content (units, lessons, challenges).

• 🎮 Gamification System

  • ❤️ Hearts system - lose hearts on wrong answers
  • ⭐ Points/XP system - earn points for correct answers
  • 🏆 Leaderboard - compete with other learners
  • 🗺️ Quest milestones - track your progress
  • 🛍️ Shop system - exchange points for hearts
  • 💳 Pro tier - unlimited hearts with Stripe subscription

• 🎨 Beautiful UI/UX

  • Stunning character illustrations from KenneyNL
  • Smooth animations and transitions
  • Sound effects for correct/incorrect answers
  • AI-powered voices using ElevenLabs
  • Exit confirmation popup
  • No hearts left modal
  • Mobile-responsive design

• 🔐 Authentication & Security

  • Clerk authentication
  • Protected routes
  • User progress tracking
  • Secure payment processing with Stripe

• 📊 Admin Dashboard

  • React Admin interface
  • Manage courses, units, lessons, and challenges
  • CRUD operations for all content
  • Protected admin routes

🛠️ Tech Stack

• Frontend:

  • Next.js 16 - React framework with App Router
  • React 19 - UI library
  • TailwindCSS - Styling
  • Shadcn UI - Component library
  • TypeScript - Type safety

• Backend & Database:

  • Drizzle ORM - TypeScript ORM
  • Neon PostgreSQL - Serverless Postgres
  • Next.js Server Actions
  • React Admin - Admin dashboard

• Authentication & Payments:

  • Clerk - Authentication
  • Stripe - Payment processing
  • Webhooks for subscription management

• Media & Assets:

  • ElevenLabs AI - AI voice generation
  • KenneyNL - Character assets
  • Flagpack - Country flags
  • Freesound - Sound effects

• State Management:

  • Zustand - Client state
  • React Context API

📋 Prerequisites

Before you begin, ensure you have the following:

• Node.js (v18 or higher)
• npm or yarn
• Git
• Accounts for:
  • Clerk (Authentication)
  • Neon (Database)
  • Stripe (Payments)
  • ElevenLabs (Optional - AI Voices)

🚀 Getting Started

1. Clone the repository

git clone https://github.com/git-adventures/duolingo-clone.git
cd duolingo-clone

2. Install dependencies

npm install

3. Setup Environment Variables

Create a .env.local file in the root directory and add the following:

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your-clerk-publishable-key
CLERK_SECRET_KEY=your-clerk-secret-key

# Clerk Redirect URLs
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/learn
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/learn
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

# Database (Neon PostgreSQL)
DATABASE_URL=your-neon-postgres-connection-string

# Stripe
STRIPE_API_KEY=your-stripe-secret-key
NEXT_PUBLIC_APP_URL=http://localhost:3000
STRIPE_WEBHOOK_SECRET=your-stripe-webhook-secret

# Optional: ElevenLabs AI (for voice generation)
ELEVENLABS_API_KEY=your-elevenlabs-api-key

4. Setup Database

# Push database schema
npm run db:push

# Open Drizzle Studio to manage database
npm run db:studio

5. Seed the Database

Access the admin panel at /admin and create:

• Courses (languages)
• Units (learning sections)
• Lessons (individual lessons)
• Challenges (questions)
• Challenge Options (answer choices)

6. Setup Stripe Webhooks (for local development)

# Install Stripe CLI
# Then forward webhooks to your local server
stripe listen --forward-to localhost:3000/api/webhooks/stripe

7. Start the development server

npm run dev

Open http://localhost:3000 in your browser.

📦 Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run lint	Run ESLint
npm run db:push	Push database schema
npm run db:studio	Open Drizzle Studio

📚 Resources

• Next.js Documentation
• Drizzle ORM Documentation
• Neon Documentation
• Clerk Documentation
• Stripe Documentation
• Shadcn UI Documentation
• React Admin Documentation

🙏 Acknowledgments

• YouTube Tutorial - Original tutorial
• Vercel - Deployment platform (CD)
• GitHub - Code hosting and version control (CI)

---

⭐ If you found this project helpful, please give it a star!