🚀 CodeHub

CodeHub is a premium, competitive learning platform dedicated to practical Web Development. Unlike traditional algorithm-heavy platforms, CodeHub focuses on real-world web skills. Users compete to solve frontend UI challenges and backend API logic problems within a high-performance, browser-based IDE.

---

✨ Core Features

• 🎨 Visual & Architectural Challenges: Focus on React, CSS, and API design rather than just DS&A.
• 💻 Browser-Based IDE: Integrated Monaco Editor (powers VS Code) with syntax highlighting for JSX, CSS, and JS.
• ⚡ Real-Time Grading:
  • Frontend: Functional tests (Vitest/RTL) and Visual matching.
  • Backend: API validation via secure, isolated Docker sandboxes.
• 🏆 Competitive Mechanics: Global leaderboards, Elo-based ranking, and performance metrics.
• 💎 Premium Aesthetic: A "Cyber-Educational" design with glassmorphism, physics-based animations (Framer Motion), and a sleek dark elegant theme.

---

🛠️ Tech Stack

Frontend

• Framework: React 19 + Vite
• Language: TypeScript
• Styling: Tailwind CSS 4
• Animations: Framer Motion 12
• Icons: Lucide React
• IDE Engine: Monaco Editor + @codesandbox/sandpack-react

Backend

• Runtime: Node.js + Express
• Database: MongoDB + Mongoose
• Auth: JWT-based authentication.
• Sandbox: Isolated Docker environment for safe code execution.

---

📂 Project Structure

CodeHub is organized as a monorepo using npm workspaces:

CodeHub/
├── client/           # React + Vite frontend
├── server/           # Express + MongoDB backend
├── package.json      # Root configuration & scripts
└── PRD.txt           # Product Requirements Document

---

🚀 Getting Started

Prerequisites

• Node.js (v18.0.0 or higher)
• MongoDB (Running locally or via Atlas)
• Docker (Required for backend challenges)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd CodeHub

2. Install dependencies for the entire project:

   npm install

3. Setup environment variables:

   • Create .env in server/ (see server/.env.example).
   • Create .env in client/ if needed.

Running the App

Run both the frontend and backend concurrently:

npm run dev

• Frontend: http://localhost:5173
• Backend API: http://localhost:5000

---

🛣️ Roadmap

• Phase 1: MVP: Basic Auth, Problem List, and Frontend (React/CSS) challenges.
• Phase 2: Backend Arena: Node.js/API challenges, Global Leaderboard, and User Profiles.
• Phase 3: Advanced: AI-powered code review, "Code Clash" multiplayer mode.

---

📄 License

---

Built with ❤️ by Sarthak