Lingo - Interactive platform for language learning.
📔 Table of Contents
‼️ Folder Structure
Here is the folder structure of this app.
duolingo-clone/
|- actions/
|-- challenge-progress.ts
|-- user-progress.ts
|-- user-subscription.ts
|- app/
|-- (auth)/
|-- (main)/
|-- (marketing)/
|-- admin/
|-- api/
|-- lesson/
|-- apple-icon.png
|-- favicon.ico
|-- globals.css
|-- icon1.png
|-- icon2.png
|-- layout.tsx
|- components/
|-- modals/
|-- ui/
|-- banner.tsx
|-- feed-wrapper.tsx
|-- mobile-header.tsx
|-- mobile-sidebar.tsx
|-- promo.tsx
|-- quests.tsx
|-- sidebar-item.tsx
|-- sidebar.tsx
|-- sticky-wrapper.tsx
|-- user-progress.tsx
|- config/
|-- index.ts
|- db/
|-- drizzle.ts
|-- queries.ts
|-- schema.ts
|- lib/
|-- admin.ts
|-- stripe.ts
|-- utils.ts
|- public/
|- scripts/
|-- prod.ts
|- store/
|-- use-exit-modal.ts
|-- use-hearts-modal.ts
|-- use-practice-modal.ts
|- .env.example
|- .env/.env.local
|- .gitignore
|- .prettierrc.json
|- bun.lock
|- components.json
|- constants.ts
|- drizzle.config.ts
|- environment.d.ts
|- eslint.config.mjs
|- middleware.ts
|- next.config.ts
|- package.json
|- postcss.config.js
|- tailwind.config.ts
|- tsconfig.json
|- vercel.ts
🧰 Getting Started
- Make sure Git and NodeJS is installed.
- Clone this repository to your local computer.
- Create
.envfile in root directory. - Contents of
.env:
# .env
# disabled next.js telemetry
NEXT_TELEMETRY_DISABLED=1
# clerk auth keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
# neon db uri
DATABASE_URL="postgresql://<user>:<password>@<host>:<post>/lingo?sslmode=require"
# stripe api key and webhook
STRIPE_API_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
# public app url
NEXT_PUBLIC_APP_URL=http://localhost:3000
# clerk admin user id(s) separated by comma and space (, )
CLERK_ADMIN_IDS="user_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
# or CLERK_ADMIN_IDS="user_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx, user_xxxxxxxxxxxxxxxxxxxxxx" for multiple admins.
-
Obtain Clerk Authentication Keys
- Source: Clerk Dashboard or Settings Page
- Procedure:
- Log in to your Clerk account.
- Navigate to the dashboard or settings page.
- Look for the section related to authentication keys.
- Copy the
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEYandCLERK_SECRET_KEYprovided in that section.
-
Retrieve Neon Database URI
- Source: Database Provider (e.g., Neon, PostgreSQL)
- Procedure:
- Access your database provider's platform or configuration.
- Locate the database connection details.
- Replace
<user>,<password>,<host>, and<port>placeholders in the URI with your actual database credentials. - Ensure to include
?sslmode=requireat the end of the URI for SSL mode requirement.
-
Fetch Stripe API Key and Webhook Secret
- Source: Stripe Dashboard
- Procedure:
- Log in to your Stripe account.
- Navigate to the dashboard or API settings.
- Find the section related to API keys and webhook secrets.
- Copy the
STRIPE_API_SECRET_KEYandSTRIPE_WEBHOOK_SECRET.
-
Specify Public App URL
- Procedure:
- Replace
http://localhost:3000with the URL of your deployed application.
- Replace
- Procedure:
-
Identify Clerk Admin User IDs
- Source: Clerk Dashboard or Settings Page
- Procedure:
- Log in to your Clerk account.
- Navigate to the dashboard or settings page.
- Find the section related to admin user IDs.
- Copy the user IDs provided, ensuring they are separated by commas and spaces.
-
Save and Secure:
- Save the changes to the
.envfile.
- Save the changes to the
-
Install Project Dependencies using
bun install --legacy-peer-deps. -
Run the Seed Script:
In the same terminal, run the following command to execute the seed script:
bun run db:push && bun run db:prod
This command uses bun to execute the Typescript file (scripts/prod.ts) and writes challenges data in database.
- Verify Data in Database:
Once the script completes, check your database to ensure that the challenges data has been successfully seeded.
- Now app is fully configured 👍 and you can start using this app using either one of
bun dev.
NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.
📷 Screenshots
⚙️ Tech Stack
🔧 Stats
🙌 Contribute
You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.
💎 Acknowledgements
Useful resources and dependencies that are used in Lingo.
- Special Thanks to Code with Antonio: https://codewithantonio.com/
- Kenney Assets: https://kenney.nl/
- Freesound: https://freesound.org/
- Elevenlabs AI: https://elevenlabs.io/
- Flagpack: https://flagpack.xyz/
- @clerk/nextjs: ^6.38.2
- @eslint/eslintrc: ^3
- @neondatabase/serverless: ^1.0.2
- @radix-ui/react-avatar: ^1.1.11
- @radix-ui/react-dialog: ^1.1.15
- @radix-ui/react-progress: ^1.1.8
- @radix-ui/react-separator: ^1.1.8
- @radix-ui/react-slot: ^1.2.4
- @types/node: ^25.4.0
- @types/react: ^19.2.14
- @types/react-dom: ^19.2.3
- @vercel/config: ^0.0.33
- autoprefixer: ^10.4.27
- class-variance-authority: ^0.7.1
- clsx: ^2.1.0
- dotenv: ^17.3.1
- drizzle-kit: ^0.31.9
- drizzle-orm: ^0.45.1
- eslint: ^10
- eslint-config-next: 16.1.6
- eslint-config-prettier: ^10.1.8
- lucide-react: ^0.577.0
- next: ^16.1.6
- pg: ^8.20.0
- postcss: ^8
- prettier: ^3.8.1
- prettier-plugin-tailwindcss: ^0.7.2
- ra-data-simple-rest: ^5.14.4
- react: ^19.2.4
- react-admin: ^4.16.20
- react-circular-progressbar: ^2.2.0
- react-confetti: ^6.4.0
- react-dom: ^19.2.4
- react-use: ^17.6.0
- sonner: ^2.0.7
- stripe: ^20.4.0
- tailwind-merge: ^3.5.0
- tailwindcss: ^3.4.19
- tailwindcss-animate: ^1.0.7
- tsx: ^4.21.0
- typescript: ^5
- zustand: ^5.0.11
☕ Buy Me a Coffee
🚀 Follow Me
📚 Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
📃 Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out Next.js deployment documentation for more details.
⭐ Give A Star
You can also give this repository a star to show more people and they can use this repository.



