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.
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
| 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 |
- Syntax-highlighted code editor with real-time compilation
- Support for HTML, CSS, JavaScript, and C programming
- Instant output execution without leaving the platform
- 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)
- Automated solution checking
- Scoring system: 100 points for correct solutions
- Deductions for incorrect attempts following predefined rules
- Instant feedback on submissions
- Personal dashboard with learning statistics
- Task completion history
- Performance metrics and weak area identification
- Visual progress indicators
- MCQ-based comprehensive exams
- Knowledge evaluation across all topics
- Test results integrated with overall progress
- Digital certificates upon course completion
- Customized certificate design with student details
- Printable and shareable format
- Node.js 16.x or higher
- npm or yarn package manager
- Git (for cloning the repository)
-
Clone the repository
git clone https://github.com/JiyaBatra/CODEVIBE-.git cd CODEVIBE- -
Install dependencies
# Frontend setup cd client npm install # Backend setup cd ../server npm install
-
Configure environment variables
Create a
.envfile in the server directory:PORT=5000 MONGODB_URI=your_mongodb_connection_string JWT_SECRET=your_jwt_secret_key NODE_ENV=development
-
Start the development servers
Terminal 1 - Backend:
cd server npm run devTerminal 2 - Frontend:
cd client npm run dev -
Open in browser
http://localhost:5173
CODEVIBE-/
├── client/ # React frontend application
│ ├── src/
│ │ ├── components/ # React components (lessons, compiler, dashboard)
│ │ ├── 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
│ ├── models/ # Database schemas
│ ├── middleware/ # Auth and validation middleware
│ └── server.js # Server entry point
├── Contributing.md # Contribution guidelines
├── LICENSE # MIT License
└── README.md # This file
POST /api/auth/register- User signupPOST /api/auth/login- User loginPOST /api/auth/logout- User logout
GET /api/lessons/:courseId- Fetch lessons for a courseGET /api/lessons/:id- Get specific lesson details
POST /api/compiler/execute- Execute user code and get resultsPOST /api/compiler/submit- Submit solution for evaluation
GET /api/progress/:userId- Get user progress dashboardPOST /api/progress/track- Record lesson completion
GET /api/certificates/:userId- Generate certificatePOST /api/certificates/download- Download certificate
- 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
- Node.js & Express - Server framework
- MongoDB - NoSQL database for data persistence
- JWT - Secure authentication tokens
- Bcrypt - Password hashing and security
- Frontend: Vercel, Netlify, or GitHub Pages
- Backend: Render, Heroku, or Railway
- Database: MongoDB Atlas (cloud)
Sign Up → Email Verification → Complete Profile → Access Dashboard
Select Course → Browse Lessons → Read Instructions → Write Code → Submit Solution → Get Feedback
Complete All Lessons → Take Final Exam → View Results → Receive Certificate
- 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
We welcome contributions from the community! Whether it's bug fixes, new features, or documentation improvements, your help makes CodeVibe better.
-
Fork the repository
git clone https://github.com/YOUR_USERNAME/CODEVIBE-.git cd CODEVIBE- -
Create a feature branch
git checkout -b feature/amazing-feature
-
Make your changes
- Follow the existing code style
- Write clear commit messages
- Add tests for new features
-
Commit and push
git add . git commit -m 'Add amazing feature' git push origin feature/amazing-feature
-
Open a Pull Request
- Describe what your PR does
- Reference any related issues
- Ensure CI/CD checks pass
For detailed guidelines, see CONTRIBUTING.md
Please note that this project is released with a Code of Conduct. By participating in this project you agree to abide by its terms.
Join our growing community of learners and contributors!
- GitHub Discussions: Ask questions and share ideas
- Issues: Report bugs and suggest features
- Pull Requests: Contribute code improvements
- Email: [[email protected]]
-
C Fundamentals (17 lessons)
- Variables, data types, operators
- Control structures and loops
- Functions and arrays
- String manipulation
-
Web Basics with HTML (15 lessons)
- HTML structure and semantics
- Forms and input handling
- Accessibility principles
- Best practices
-
Styling with CSS (14 lessons)
- CSS selectors and properties
- Flexbox and Grid layouts
- Responsive design
- Animations and transitions
- Database Fundamentals (12 lessons)
- DBMS concepts
- SQL queries and joins
- Normalization
- Indexing and optimization
# Find process using port 5000
lsof -i :5000
# Kill the process
kill -9 <PID>- Verify MongoDB is running:
mongo --version - Check connection string in .env file
- Ensure IP whitelist includes your machine
- Check browser console for detailed errors
- Verify code syntax before submission
- Clear browser cache and reload
CodeVibe is optimized for performance:
- Lazy loading of course content
- Code splitting for faster initial load
- Caching of compiled results
- Optimized API responses with pagination
- JWT-based authentication with secure tokens
- Password hashing with bcrypt
- SQL injection prevention with parameterized queries
- XSS protection through input sanitization
- CORS configured for production
Run the test suite:
# Frontend tests
cd client && npm test
# Backend tests
cd ../server && npm testThis project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by FreeCodeCamp and its amazing educational approach
- Built with love by the CodeVibe community
- Special thanks to all contributors and early adopters
- Initial release with 4 core courses
- User authentication system
- Code compilation and execution
- Progress tracking dashboard
- Certificate generation
See CHANGELOG.md for detailed version history.
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: [email protected]
Made with ❤️ by the CodeVibe Team