A modern, full-stack coding platform built with React, Express.js, and MongoDB. Practice coding problems, track your progress, and prepare for technical interviews with this comprehensive LeetCode clone.
- Problem Management: Browse, search, and filter coding problems by difficulty, category, and tags
- Interactive Code Editor: Built-in Monaco Editor with syntax highlighting for multiple languages
- Code Execution: Submit solutions and get instant feedback with test case results
- User Authentication: Secure registration and login system with JWT tokens
- Progress Tracking: Monitor your coding journey with detailed statistics and submission history
- Problem Creation: Add new problems with examples, test cases, and starter code
- Multi-language Support: JavaScript, Python, Java, and C++
- Responsive Design: Modern UI that works on desktop and mobile devices
- Real-time Feedback: Instant submission results with runtime and memory usage
- Advanced Filtering: Search problems by title, description, difficulty, and category
- Pagination: Efficient handling of large datasets
- Error Handling: Comprehensive error handling and user feedback
- React 18 - Modern React with hooks and functional components
- React Router - Client-side routing
- Tailwind CSS - Utility-first CSS framework
- Monaco Editor - VS Code's editor for the web
- Axios - HTTP client for API requests
- React Hot Toast - Beautiful notifications
- Lucide React - Modern icon library
- Node.js - JavaScript runtime
- Express.js - Web application framework
- MongoDB - NoSQL database
- Mongoose - MongoDB object modeling
- JWT - JSON Web Tokens for authentication
- bcryptjs - Password hashing
- Express Validator - Input validation and sanitization
- Node.js (v16 or higher)
- MongoDB (local installation or MongoDB Atlas)
- Git
git clone <repository-url>
cd leetcode-clone# Install root dependencies
npm install
# Install server dependencies
cd server
npm install
# Install client dependencies
cd ../client
npm installCreate a .env file in the server directory:
PORT=5000
MONGODB_URI=mongodb://localhost:27017/leetcode-clone
JWT_SECRET=your_jwt_secret_key_here_change_in_production
NODE_ENV=development# Start MongoDB (if running locally)
mongod
# Seed the database with sample data
cd server
node seedData.js# From the root directory, start both frontend and backend
npm run dev
# Or start them separately:
# Backend (from server directory)
npm run dev
# Frontend (from client directory)
npm startThe application will be available at:
- Frontend: http://localhost:3000
- Backend API: http://localhost:5000
After seeding the database, you can use these credentials:
- Email: admin@example.com
- Password: password123
leetcode-clone/
βββ client/                 # React frontend
β   βββ public/            # Static files
β   βββ src/
β   β   βββ components/    # Reusable components
β   β   βββ contexts/      # React contexts
β   β   βββ pages/         # Page components
β   β   βββ App.js         # Main app component
β   β   βββ index.js       # Entry point
β   βββ package.json
β   βββ tailwind.config.js
βββ server/                # Express backend
β   βββ models/           # Mongoose models
β   βββ routes/           # API routes
β   βββ index.js          # Server entry point
β   βββ seedData.js       # Database seeder
β   βββ package.json
βββ package.json          # Root package.json
βββ README.md
- POST /api/auth/register- Register new user
- POST /api/auth/login- Login user
- GET /api/auth/profile- Get user profile
- PUT /api/auth/profile- Update user profile
- GET /api/problems- Get all problems (with filtering and pagination)
- GET /api/problems/:id- Get specific problem
- POST /api/problems- Create new problem
- PUT /api/problems/:id- Update problem
- DELETE /api/problems/:id- Delete problem
- GET /api/problems/stats/overview- Get problem statistics
- POST /api/submissions- Submit solution
- GET /api/submissions/user/:userId- Get user submissions
- GET /api/submissions/:id- Get specific submission
- GET /api/submissions/problem/:problemId- Get problem submissions
- Register/Login: Create an account or login with existing credentials
- Browse Problems: Explore the problem library with filtering options
- Solve Problems: Click on any problem to start coding
- Submit Solutions: Write your code and submit for evaluation
- Track Progress: View your submission history and statistics
- Create Problems: Use the "Create Problem" page to add new challenges
- Manage Content: Edit or delete existing problems
- Monitor Activity: View submission statistics and user activity
- Build the client: cd client && npm run build
- Deploy the buildfolder to your hosting service
- Configure environment variables for the API URL
- Set up environment variables on your hosting platform
- Configure MongoDB connection (MongoDB Atlas recommended)
- Deploy the server directory
- Run database seeder if needed
- Create a MongoDB Atlas cluster
- Update the MONGODB_URIin your environment variables
- Whitelist your application's IP addresses
- Password Hashing: bcryptjs for secure password storage
- JWT Authentication: Secure token-based authentication
- Input Validation: Express-validator for request validation
- CORS Protection: Configured CORS for cross-origin requests
- Environment Variables: Sensitive data stored in environment variables
- Update the languagesobject inProblemDetail.js
- Add language support in the submission API
- Update the Monaco Editor configuration
- Modify tailwind.config.jsfor custom colors and themes
- Update component styles in individual files
- Add custom CSS in index.css
- Extend the Problem model for additional fields
- Add new API endpoints in the routes directory
- Create new React components and pages
MongoDB Connection Error
- Ensure MongoDB is running locally or check Atlas connection string
- Verify network connectivity and firewall settings
Port Already in Use
- Change the PORT in the .envfile
- Kill existing processes using the port
Build Errors
- Clear node_modules and reinstall dependencies
- Check for version compatibility issues
Authentication Issues
- Verify JWT_SECRET is set correctly
- Check token expiration settings
- Fork the repository
- Create a feature branch: git checkout -b feature-name
- Commit your changes: git commit -am 'Add feature'
- Push to the branch: git push origin feature-name
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by LeetCode's problem-solving platform
- Built with modern web technologies and best practices
- Thanks to the open-source community for the amazing tools and libraries
For support, email support@codeclone.com or create an issue in the repository.
Happy Coding! π