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

1. Make sure Git and NodeJS is installed.
2. Clone this repository to your local computer.
3. Create .env file in root directory.
4. 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.

5. Obtain Clerk Authentication Keys

   1. Source: Clerk Dashboard or Settings Page
   2. 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_KEY and CLERK_SECRET_KEY provided in that section.

6. Retrieve Neon Database URI

   1. Source: Database Provider (e.g., Neon, PostgreSQL)
   2. 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=require at the end of the URI for SSL mode requirement.

7. Fetch Stripe API Key and Webhook Secret

   1. Source: Stripe Dashboard
   2. 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_KEY and STRIPE_WEBHOOK_SECRET.

8. Specify Public App URL

   1. Procedure:
      • Replace http://localhost:3000 with the URL of your deployed application.

9. Identify Clerk Admin User IDs

   1. Source: Clerk Dashboard or Settings Page
   2. 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.

10. Save and Secure:

    • Save the changes to the .env file.

11. Install Project Dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps.

12. 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.

13. Verify Data in Database:

Once the script completes, check your database to ensure that the challenges data has been successfully seeded.

14. Now app is fully configured 👍 and you can start using this app using either one of 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:

• 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!

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.

(back to top)