🌐 Lingo - Language Learning Platform

A modern web application for language learning, built with cutting-edge technologies including React 19 and Next.js 15.

✨ Features

• 🎯 Interactive language learning exercises
• 🎨 Modern, responsive UI design
• 🔐 Secure authentication with Clerk
• ⚡ Optimized performance with Next.js
• 📱 Mobile-first approach

🚀 Tech Stack

• Framework: Next.js 15 with App Router and Server Actions
• Frontend: React 19, TypeScript
• Authentication: Clerk
• Styling: Tailwind CSS, shadcn/ui components
• Database: Neon (Serverless Postgres)
• ORM: Drizzle ORM
• Validation: Zod
• Package Manager: pnpm
• Deployment: Vercel

🛠️ Installation

1. Clone the repository

git clone https://github.com/frshaad/lingo.git
cd lingo

2. Install dependencies

pnpm install

3. Set up environment variables

cp .env.example .env

Add the following required environment variables to your .env file:

NEXT_PUBLIC_APP_URL='http://localhost:3000' # https://lingo-kohl-gamma.vercel.app/

# Clerk Authentication (Required)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=   # Your Clerk public key
CLERK_SECRET_KEY=                    # Your Clerk secret key

# Clerk Authentication URLs (Required)
NEXT_PUBLIC_CLERK_SIGN_IN_URL=              # Default: "/"
NEXT_PUBLIC_CLERK_SIGN_UP_URL=              # Default: "/"
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=  # Default: "/learn"
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=  # Default: "/learn"
NEXT_PUBLIC_CLERK_AFTER_SIGN_OUT_URL=       # Default: "/"

# Database (Required)
DATABASE_URL=                        # Your PostgreSQL connection string from Neon.tech

Important: Always use the validated env object from @/lib/env.ts instead of accessing process.env directly. This ensures type safety and runtime validation of environment variables.

// ❌ Don't use process.env directly
const dbUrl = process.env.DATABASE_URL

// ✅ Do use the validated env object
import env from '@/lib/env'
const dbUrl = env.DATABASE_URL

4. Run the development server

pnpm dev

Open http://localhost:3000 with your browser to see the result.

🏗️ Project Structure

src/
├── app/
├── components/
│   └── ui/          # shadcn/ui components
├── lib/
│   └── db/         # Drizzle schema and config

🖼️ Screenshots

👨‍💻 About Me

I'm a junior developer passionate about creating user-friendly web applications. This project showcases my abilities with modern web technologies and my commitment to writing clean, maintainable code.

📫 Contact

• LinkedIn
• Email

📄 License

This project is open source and available under the MIT License.

---

Built with ❤️ by Farshad