CodeVibe - Learn. Practice. Master. Code.

A modern, browser-based coding practice platform inspired by FreeCodeCamp. Learn programming through structured tasks, real-time coding and instant evaluation — no local environment setup required.

Live Demo • Project Structure • Contributor Leaderboard • Contributing • Code of Conduct • Community • Contact & Support

---

What is CodeVibe?

CodeVibe removes friction from the learning journey. Whether you're a complete beginner or brushing up on fundamentals, CodeVibe provides:

• Browser-based IDE: Write, test, and execute code instantly in your browser
• Structured Learning: Follow guided modules from basics to advanced concepts
• Instant Feedback: Get real-time evaluation and detailed performance metrics
• Progress Tracking: Monitor your learning journey with comprehensive dashboards
• Certificates: Earn certificates upon successful completion of courses
• Zero Setup: No environment configuration — start coding in seconds

---

Why CodeVibe?

Feature	Benefit
In-Browser Compiler	Write code without installing anything—instant execution
Structured Curriculum	Learn through carefully designed lessons and exercises
Automatic Evaluation	Get instant feedback on correctness and performance
Progress Dashboard	Track completed tasks and monitor learning patterns
MCQ-Based Assessment	Comprehensive final tests to verify knowledge
Certificates	Shareable credentials upon course completion
Detailed Feedback	Identify strengths and areas for improvement

---

Key Features

1. Interactive Code Editor

• Syntax-highlighted code editor with real-time compilation
• Support for HTML, CSS, JavaScript, and C programming
• Instant output execution without leaving the platform

2. Structured Learning Paths

• C Programming: From basics to advanced concepts (17+ lessons)
• Web Development: HTML fundamentals (15+ lessons)
• CSS Mastery: Styling and responsive design (14+ lessons)
• Database Fundamentals: SQL and DBMS concepts (12+ lessons)

3. Evaluation System

• Automated solution checking
• Scoring system: 100 points for correct solutions
• Deductions for incorrect attempts following predefined rules
• Instant feedback on submissions

4. Progress Tracking & Analytics

• Personal dashboard with learning statistics
• Task completion history
• Performance metrics and weak area identification
• Visual progress indicators

5. Final Assessment

• MCQ-based comprehensive exams
• Knowledge evaluation across all topics
• Test results integrated with overall progress

6. Certificate System

• Digital certificates upon course completion
• Customized certificate design with student details
• Printable and shareable format

7. My Mistakes Dashboard (NEW)

• Track Recurring Errors: Identify the most common coding mistakes in your submissions
• Pattern Recognition: Categorizes errors by type (Syntax Errors, Logic Errors, Array Index Errors, etc.)
• Smart Suggestions: Get recommended lessons to review for each mistake category
• Severity Levels: Visual indicators (High/Medium/Low) show which errors need most attention
• Learning Insights: Understand your weak areas and focus revision efforts efficiently

---

Learning Paths

Beginner Path

1. C Fundamentals (17 lessons)

   • Variables, data types, operators
   • Control structures and loops
   • Functions and arrays
   • String manipulation

2. Web Basics with HTML (15 lessons)

   • HTML structure and semantics
   • Forms and input handling
   • Accessibility principles
   • Best practices

3. Styling with CSS (14 lessons)

   • CSS selectors and properties
   • Flexbox and Grid layouts
   • Responsive design
   • Animations and transitions

Intermediate Path

4. Database Fundamentals (12 lessons)
   • DBMS concepts
   • SQL queries and joins
   • Normalization
   • Indexing and optimization

---

Getting Started

Prerequisites

• Node.js 16.x or higher
• npm or yarn package manager
• Git (for cloning the repository)

Installation

1. Clone the repository

   git clone https://github.com/JiyaBatra/CODEVIBE-.git
   cd CODEVIBE-
   

2. Install dependencies

   # Frontend setup
   cd client
   npm install
   
   # Backend setup
   cd ../server
   npm install
   

3. Configure environment variables

   Copy the environment template and fill in your values:

    cp server/.env.example server/.env

Then open server/.env and update at minimum:

• MONGODB_URI — your local or MongoDB Atlas connection string
• JWT_SECRET — generate a secure key by running:

   node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

See server/.env.example for all available variables and their descriptions.

Environment Setup

To run the backend locally, you need to configure your environment variables.

Navigate to the server/ directory.

Copy the .env.example file and rename it to .env.

Update the variables in .env as needed:

PORT: The port your Express server will run on (Default: 5002).

DB_URL / MONGODB_URI: Your MongoDB connection string.

ALLOWED_ORIGINS: Comma-separated list of frontend URLs permitted to access the API.

LEADERBOARD_API_URL & TOKEN: Credentials required if you are syncing GitHub stats with the backend.

4. Start the development servers

   Terminal 1 - Backend:

   cd server
   npm run dev
   

   Terminal 2 - Frontend:

   cd client
   npm run dev
   

5. Open in browser

   http://localhost:5173
   

---

Project Structure

CODEVIBE-/
├── .github/                        # GitHub configuration and templates
│   ├── ISSUE_TEMPLATE/             # Issue templates for contributors
│   │   ├── bug_report.md           # Bug report template
│   │   ├── feature_request.md      # Feature request template
│   │   └── documentation.md        # Documentation improvement template
│   └── pull_request_template.md    # PR description template
├── client/                         # React frontend application
│   ├── src/
│   │   ├── components/             # React components (lessons, compiler, dashboard)
│   │   │   ├── Dashboard.jsx       # Main dashboard with analytics
│   │   │   ├── MyMistakesDashboard.jsx  # Track recurring coding mistakes (NEW)
│   │   │   ├── Compiler.jsx        # Code editor and executor
│   │   │   └── ...                 # Other lesson components
│   │   ├── hooks/                  # Custom React hooks
│   │   │   └── useMistakes.js      # Hook for fetching mistakes data (NEW)
│   │   ├── assets/                 # Images, icons, static files
│   │   ├── App.jsx                 # Main app component
│   │   ├── main.jsx                # React entry point
│   │   └── index.css               # Global styles
│   └── package.json
├── server/                         # Node.js/Express backend
│   ├── routes/                     # API endpoints
│   │   ├── api/
│   │   │   ├── progressRoutes.js   # Progress tracking endpoints
│   │   │   ├── mistakesRoutes.js   # Mistakes dashboard endpoints (NEW)
│   │   │   └── ...                 # Other route files
│   │   └── index.js                # Route aggregator
│   ├── controller/                 # Request handlers
│   │   ├── progress/               # Progress logic
│   │   ├── mistakes/               # Mistakes analysis logic (NEW)
│   │   └── ...                     # Other controllers
│   ├── models/                     # Database schemas
│   ├── middleware/                 # Auth and validation middleware
│   └── server.js                   # Server entry point
├── CODE_OF_CONDUCT.md              # Community standards and behavior expectations
├── CONTRIBUTING.md                 # Contribution guidelines
├── LICENSE                         # MIT License
└── README.md                       # This file

---

API Documentation

Authentication

• POST /api/auth/register - User signup
• POST /api/auth/login - User login
• POST /api/auth/logout - User logout

Lessons

• GET /api/lessons/:courseId - Fetch lessons for a course
• GET /api/lessons/:id - Get specific lesson details

Code Execution

• POST /api/compiler/execute - Execute user code and get results
• POST /api/compiler/submit - Submit solution for evaluation

Progress Tracking

• GET /api/progress/:userId - Get user progress dashboard
• POST /api/progress/track - Record lesson completion

Mistakes Dashboard (NEW)

• GET /api/mistakes/:email - Fetch user's recurring coding mistakes
• GET /api/mistakes/:email/:pattern - Get detailed info about a specific error pattern

Certificates

• GET /api/certificates/:userId - Generate certificate
• POST /api/certificates/download - Download certificate

---

Tech Stack

Frontend

• React 18 - UI library with hooks and functional components
• CSS3 - Custom styling with animations and transitions
• Axios - HTTP client for API requests
• React Router - Client-side routing

Backend

• Node.js & Express - Server framework
• MongoDB - NoSQL database for data persistence
• JWT - Secure authentication tokens
• Bcrypt - Password hashing and security

Deployment

• Frontend: Vercel, Netlify, or GitHub Pages
• Backend: Render, Heroku, or Railway
• Database: MongoDB Atlas (cloud)

---

Core Functionalities

User Authentication

Sign Up → Email Verification → Complete Profile → Access Dashboard

Learning Flow

Select Course → Browse Lessons → Read Instructions → Write Code → Submit Solution → Get Feedback

Assessment Path

Complete All Lessons → Take Final Exam → View Results → Receive Certificate

---

Future Enhancements

• My Mistakes Dashboard - Track and analyze recurring coding errors (IMPLEMENTED)
• Real-time code collaboration (pair programming)
• Advanced DSA practice modules with visualizations
• System programming and competitive coding tracks
• AI-powered hints and personalized learning recommendations
• Mentor/instructor dashboard for managing students
• Mobile application for on-the-go learning
• Community forum for peer support
• Leaderboards and achievement badges
• Integration with coding interview platforms

---

Contributing

We welcome contributions from the community! Whether it's bug fixes, new features, or documentation improvements, your help makes CodeVibe better.

How to Contribute

1. Fork the repository

   git clone https://github.com/YOUR_USERNAME/CODEVIBE-.git
   cd CODEVIBE-
   

2. Create a feature branch

   git checkout -b feature/amazing-feature
   

3. Make your changes

   • Follow the existing code style
   • Write clear commit messages
   • Add tests for new features

4. Commit and push

   git add .
   git commit -m 'Add amazing feature'
   git push origin feature/amazing-feature
   

5. Open a Pull Request

   • Describe what your PR does
   • Reference any related issues
   • Ensure CI/CD checks p