Here is the folder structure of this app.
duolingo-clone/
|- actions/
|- challenge-progress.ts
|- user-progress.ts
|- user-subscription.ts
|- app/
|-- (main)/
|--- courses/
|--- leaderboard/
|--- learn/
|--- quests/
|--- shop/
|--- layout.tsx
|-- (marketing)/
|--- footer.tsx
|--- header.tsx
|--- layout.tsx
|--- page.tsx
|-- admin/
|--- challenge/
|--- challengeOption/
|--- course/
|--- lesson/
|--- unit/
|--- app.tsx
|--- page.tsx
|-- api/
|--- challengeOptions/
|--- challenges/
|--- courses/
|--- lessons/
|--- units/
|--- webhooks/stripe/
|-- lesson/
|--- [lessonId]/
|--- card.tsx
|--- challenge.tsx
|--- footer.tsx
|--- header.tsx
|--- layout.tsx
|--- page.tsx
|--- question-bubble.tsx
|--- quiz.tsx
|--- result-card.tsx
|-- apple-icon.png
|-- favicon.ico
|-- globals.css
|-- icon1.png
|-- icon2.png
|-- layout.tsx
|- components/
|-- modals/
|-- ui/
|-- feed-wrapper.tsx
|-- mobile-wrapper.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
|-- reset.ts
|-- seed.ts
|- store/
|-- use-exit-modal.ts
|-- use-hearts-modal.ts
|-- use-practice-modal.ts
|- types/
|-- canvas.ts
|- .env
|- .env.example
|- .eslintrc.js
|- .gitignore
|- .prettierrc.json
|- components.json
|- constants.ts
|- drizzle.config.ts
|- environment.d.ts
|- middleware.ts
|- next.config.mjs
|- package-lock.json
|- package.json
|- postcss.config.js
|- tailwind.config.ts
|- tsconfig.json
.env
file in root directory..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, user_xxxxxxxxxxxxxxxxxxxxxx"
Obtain Clerk Authentication Keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
and CLERK_SECRET_KEY
provided in that section.Retrieve Neon Database URI
<user>
, <password>
, <host>
, and <port>
placeholders in the URI with your actual database credentials.?sslmode=require
at the end of the URI for SSL mode requirement.Fetch Stripe API Key and Webhook Secret
STRIPE_API_SECRET_KEY
and STRIPE_WEBHOOK_SECRET
.Specify Public App URL
http://localhost:3000
with the URL of your deployed application.Identify Clerk Admin User IDs
Save and Secure:
.env
file.Install Project Dependencies using npm install --legacy-peer-deps
or yarn install --legacy-peer-deps
.
Run the Seed Script:
In the same terminal, run the following command to execute the seed script:
npm run db:push && npm run db:prod
This command uses npm
to execute the Typescript file (scripts/prod.ts
) and writes challenges data in database.
Once the script completes, check your database to ensure that the challenges data has been successfully seeded.
npm run dev
or yarn dev
.NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.
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.
Useful resources and dependencies that are used in Lingo.
Special Thanks to Kenney Assets: https://kenney.nl/
Freesound: https://freesound.org/
Elevenlabs AI: https://elevenlabs.io/
Flagpack: https://flagpack.xyz/
@clerk/nextjs: ^4.29.9
@neondatabase/serverless: ^0.9.0
@radix-ui/react-avatar: ^1.0.4
@radix-ui/react-dialog: ^1.0.5
@radix-ui/react-progress: ^1.0.3
@radix-ui/react-separator: ^1.0.3
@radix-ui/react-slot: ^1.0.2
class-variance-authority: ^0.7.0
clsx: ^2.1.0
dotenv: ^16.4.5
drizzle-orm: ^0.30.4
lucide-react: ^0.359.0
next: 14.1.4
next-themes: ^0.3.0
ra-data-simple-rest: ^4.16.12
react: ^18
react-admin: ^4.16.13
react-circular-progressbar: ^2.1.0
react-confetti: ^6.1.0
react-dom: ^18
react-use: ^17.5.0
sonner: ^1.4.32
stripe: ^14.22.0
tailwind-merge: ^2.2.2
tailwindcss-animate: ^1.0.7
zustand: ^4.5.2
To learn more about Next.js, take a look at the following resources:
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
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.
You can also give this repository a star to show more people and they can use this repository.