A free, Duolingo-style web app for learning programming.
Bite-sized lessons. Real code in your browser. Gamified. Fun. For everyone.

---

✨ Features

Feature	Description
🎯 Bite-sized lessons	Complete a lesson in 2–5 minutes. Perfect for busy schedules.
💻 Run code in browser	Python via Pyodide, JavaScript in sandboxed Web Workers. No installs needed.
🏆 XP & Streaks	Earn XP per exercise, build daily streaks, level up with badges.
🗣️ AI Doubt Helper	Get unstuck instantly with AI explanations. English & Hinglish supported.
👥 Community Threads	Ask questions per lesson — AI answers first, peers join in.
📱 Mobile-first	Designed for phones. Responsive, PWA-friendly.
💰 100% Free	No paywalls, no hearts, no energy limits. Ever.

---

🚀 Quick Start

# Clone the repo
git clone https://github.com/user-synax/codingo.git
cd codingo

# Install dependencies (both frontend & backend use Bun)
cd frontend && bun install
cd ../backend && bun install

# Start the backend (port 4000)
cd backend && bun dev

# In a new terminal, start the frontend (port 3000)
cd frontend && bun dev

Open http://localhost:3000 in your browser.

⚠️ Make sure to set up your .env files:

• Backend: MONGODB_URI and JWT_SECRET (see .env.example)
• Frontend: NEXT_PUBLIC_API_URL (defaults to http://localhost:4000)

---

🛠️ Tech Stack

┌─────────────────────────────────────────────────┐
│                   Codingo Stack                   │
├─────────────────────────────────────────────────┤
│                                                   │
│  Frontend      Next.js 16 · Tailwind CSS v4      │
│                shadcn/ui · TypeScript             │
│                Nunito / Nunito Sans fonts         │
│                                                   │
│  Backend       Express · Bun + TypeScript         │
│                JWT · bcryptjs · Zod validation    │
│                Rate limiting · CORS               │
│                                                   │
│  Database      MongoDB · Mongoose                 │
│                                                   │
│  Infrastructure  Vercel · MongoDB Atlas            │
│                Appwrite (avatars — planned)        │
│                                                   │
│  Code          Bun · TypeScript everywhere         │
│                ESM modules · strict TS            │
└─────────────────────────────────────────────────┘

---

📂 Architecture

codingo/
├── frontend/                        # Next.js 16 App Router
│   ├── app/
│   │   ├── page.js                  # Landing page (hero, features, footer)
│   │   ├── layout.js                # Root layout with fonts
│   │   ├── (auth)/                  # Auth group (login, signup, forgot-password)
│   │   ├── onboarding/              # 3-step onboarding wizard
│   │   └── app/                     # Authenticated app shell
│   │       ├── page.js              # Dashboard (stats, path preview)
│   │       ├── learn/               # Learning path + lesson runner
│   │       ├── community/           # Community threads
│   │       └── profile/             # User profile
│   ├── components/
│   │   ├── ui/                      # Button, Input, Label, Sheet
│   │   ├── landing/                 # Navbar, Hero, Features, Footer...
│   │   ├── auth/                    # SignupForm, LoginForm, AuthCard
│   │   ├── onboarding/              # OnboardingWizard, CountrySelect
│   │   └── app/                     # Sidebar, BottomNav
│   ├── lib/
│   │   ├── api.js                   # Central API client
│   │   ├── auth.js                  # Server-side auth helper
│   │   ├── countries.js             # 230+ country list
│   │   └── utils.js                 # cn() — clsx + tailwind-merge
│   ├── components/landing/Footer.js # Ayush @user-synax
│   ├── globals.css                  # Tailwind @theme + motion tokens
│   ├── public/                      # App logo (apple-touch-icon, android-chrome 192/512, favicon, site.webmanifest)
│   └── next.config.mjs
│
├── backend/                         # Express API server
│   ├── src/
│   │   ├── index.ts                 # Entry point
│   │   ├── app.ts                   # Express factory
│   │   ├── config/                  # env.ts, db.ts
│   │   ├── routes/                  # auth, courses, lessons, progress
│   │   ├── models/                  # User, Course, Unit, Lesson, Exercise, Progress, XPEvent
│   │   ├── middleware/              # auth.ts (JWT)
│   │   ├── validators/              # auth.ts (Zod schemas)
│   │   └── utils/                   # jwt.ts, streak.ts
│   └── tsconfig.json
│
├── docs.md                          # Full documentation
├── PRD.md                           # Product Requirements
├── DESIGN.md                        # Visual design system
└── README.md                        # You're here 👈

---

🎨 Design System

All visual decisions are governed by DESIGN.md. Key highlights:

• Palette: Single saturated green #58cc02 for CTAs + display headings, #1cb0f6 blue for links
• Typography: Nunito (display) + Nunito Sans (body) via next/font
• Radius: 12px on everything — buttons, pills, cards, inputs
• No shadows: The only shadow allowed is the box-shadow: 0 4px 0 button press edge
• Sticker-style: Flat fills, thick 2px borders, playful mascot illustrations
• Dark mode: Supported from day one (placeholder in CSS, implementation in progress)

Color	Hex	Role
🟢 Eager Green	#58cc02	Primary CTA, display headings, footer
🟩 Storybook Green	#d7ffb8	Soft highlight wash
🔵 Spark Blue	#1cb0f6	Links, secondary CTAs
🟣 Night Ink	#000437	Deep accents
⚫ Charcoal	#4b4b4b	Primary body text
🩶 Paper White	#ffffff	Page canvas

---

📖 Documentation

Full project documentation is available as a live site at /docs and as markdown in docs.md covering:

• 30-lesson JS from Zero curriculum + 7 exercise types + offline-first flow
• Full API reference (auth, courses, lessons, progress, community SSE, leaderboard, economy, AI, users)
• 12 Mongoose models, indexes, and relationships
• Auth (JWT + bcrypt + Google ID-token + rate limiting) and security guards
• Gamification (XP/levels, streak+freeze, hearts/CC, daily goals, badges)
• Community threads + AI hint-first helper (Groq/OpenRouter, budget 20/day, cache)
• Offline IndexedDB v3 (4 stores) + Zustand + service worker PWA
• Code runner (Web Worker sandbox, Python stub), Design tokens, and local setup

---

📅 Roadmap

Phase	Status	Description
Foundation	✅ Done	Monorepo, DESIGN.md, auth, base layout, landing
Lesson Engine	✅ Done	7 exercise types, Monaco, Worker runner, drafts, offline queue
Content	✅ Done	JS from Zero — 30 lessons, 5 units
Gamification	✅ Done	XP, levels, streaks+freeze, hearts/CC, daily goals, badges, leaderboard
Community + AI	✅ Done	Threads/SSE, hint-first AI (Groq/OpenRouter), auto first reply
Polish & Launch	✅ Done	PWA, legal, SEO/sitemap/robots/OG, 3D button edge, motion
Launch	⏳ Next	Perf pass, moderation, soft launch

---

🤝 Contributing

Contributions are what make the open source community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AwesomeFeature)
3. Commit your changes (git commit -m 'Add some AwesomeFeature')
4. Push to the branch (git push origin feature/AwesomeFeature)
5. Open a Pull Request

---

👤 Owner

Ayush — Built this with ❤️

• 🐙 GitHub: user-synax
• 🌐 Portfolio: codingo.synax.me

---

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

---

Made with ❤️ by Ayush · View on GitHub