#Lingo - Interactive platform for language learning.

Lingo - Interactive platform for language learning.

#:notebook_with_decorative_cover: Table of Contents

Folder Structure
Getting Started
Screenshots
Tech Stack
Stats
Contribute
Acknowledgements
Buy Me a Coffee
Follow Me
Learn More
Deploy on Vercel
Give A Star
Star History
Give A Star

#:bangbang: 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
  |- components.json
  |- constants.ts
  |- drizzle.config.ts
  |- environment.d.ts
  |- eslint.config.mjs
  |- next.config.ts
  |- package.json
  |- pnpm-lock.yaml
  |- pnpm-workspace.yaml
  |- postcss.config.js
  |- proxy.ts
  |- tailwind.config.ts
  |- tsconfig.json
  |- vercel.ts

#:toolbox: Getting Started

Make sure Git and NodeJS is installed.
Clone this repository to your local computer.
Create .env file 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 (,)
CLERK_ADMIN_IDS="user_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
# or CLERK_ADMIN_IDS="user_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx, user_xxxxxxxxxxxxxxxxxxxxxx" for multiple admins.

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.
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.
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.
Specify Public App URL
1. Procedure:
  - Replace http://localhost:3000 with the URL of your deployed application.
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.
Save and Secure:
- Save the changes to the .env file.
Install Project Dependencies using pnpm install.
Run the Seed Script:

In the same terminal, run the following command to execute the seed script:

pnpm run db:push && pnpm run db:prod

This command uses tsx 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 pnpm dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

#:raising_hand: Need Help?

If you run into issues during installation or setup:

GitHub Discussions — Open a Q&A discussion for setup and troubleshooting help.
Email — sanidhyyy@gmail.com
Discord — @sanidhyy

#:camera: Screenshots

Modern UI/UX

Quests

Shop

#:gear: Tech Stack

#:wrench: Stats

#:raised_hands: 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.