This is a clone of the popular language learning app Duolingo. It is a web application that allows users to learn a new language by completing lessons and quizzes. Users can track their progress and earn points by completing lessons and quizzes. The app also includes a leaderboard feature that allows users to compete with friends and other users.
It's a tutorial project for exploring Clerk, ShadCDN, Drizzle, and Neon Database.
- User authentication
- Leaderboard
- Progress tracking
- Shop
- Subscription
- Next.js
- Clerk (Auth)
- ShadCDN, TailwindCSS (UI)
- Zustand (State Management)
- Drizzle (ORM)
- Neon Database (Database)
- Vercel (Deployment)
- Stripe (Subscription)
- Clone the repository
- Install dependencies
pnpm install- Copy the
.env.examplefile to.env.local
cp .env.example .env.local- Setup Clerk
Go to Clerk and create an account. Create a new application and copy the API key. Update
CLERK_SECRET_KEYandNEXT_PUBLIC_CLERK_PUBLISHABLE_KEYin the.env.localfile. - Setup Neon Database
Go to Neon Database and create an account. Create a new database and copy the API key. Update
DATABASE_URLin the.env.localfile. - Setup Stripe
Go to Stripe and create an account. Copy the API key. Update
STRIPE_SECRET_KEYin the.env.localfile. Also don't forget to follow official stripe's guide to setup webhook and updateSTRIPE_WEBHOOK_SECRET. - Now its time to open multiple terminals:
- Run the drizzle studio:
pnpm run db:studio- Run the stripe webhook listener:
stripe listen --forward-to localhost:3000/api/webhooks/stripe- Run the development server:
pnpm run dev- Open the browser and go to
http://localhost:3000 - Enjoy!
- Type-safe for process.env
- Setup @trivago/prettier-plugin-sort-imports to sort imports
- Reduce duplicated usage for
StickyWrapper - If its possible, attach userSubscription to Clerk's user object
There is no license. Feel free to use it for your own project. If you have any questions, feel free to ask me. Tutorial's real owner is CodeWithAntonio, I just followed his tutorial and added some features.