Skip to content

That's an exciting project! Creating a platform similar to LeetCode needs a name that suggests coding, challenges, mastery, and skill development.

Notifications You must be signed in to change notification settings

mrsajids/Code_Clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

1 Commit
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

CodeClone - LeetCode Clone

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.

πŸš€ Features

Core Functionality

  • 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

Technical Features

  • 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

πŸ› οΈ Tech Stack

Frontend

  • 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

Backend

  • 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

πŸ“¦ Installation

Prerequisites

  • Node.js (v16 or higher)
  • MongoDB (local installation or MongoDB Atlas)
  • Git

1. Clone the Repository

git clone <repository-url>
cd leetcode-clone

2. Install Dependencies

# Install root dependencies
npm install

# Install server dependencies
cd server
npm install

# Install client dependencies
cd ../client
npm install

3. Environment Setup

Create 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

4. Database Setup

# Start MongoDB (if running locally)
mongod

# Seed the database with sample data
cd server
node seedData.js

5. Start the Application

# 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 start

The application will be available at:

πŸ” Default Login Credentials

After seeding the database, you can use these credentials:

πŸ“ Project Structure

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

πŸ”§ API Endpoints

Authentication

  • 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

Problems

  • 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

Submissions

  • 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

🎯 Usage Guide

For Users

  1. Register/Login: Create an account or login with existing credentials
  2. Browse Problems: Explore the problem library with filtering options
  3. Solve Problems: Click on any problem to start coding
  4. Submit Solutions: Write your code and submit for evaluation
  5. Track Progress: View your submission history and statistics

For Administrators

  1. Create Problems: Use the "Create Problem" page to add new challenges
  2. Manage Content: Edit or delete existing problems
  3. Monitor Activity: View submission statistics and user activity

πŸš€ Deployment

Frontend (Netlify/Vercel)

  1. Build the client: cd client && npm run build
  2. Deploy the build folder to your hosting service
  3. Configure environment variables for the API URL

Backend (Heroku/Railway/DigitalOcean)

  1. Set up environment variables on your hosting platform
  2. Configure MongoDB connection (MongoDB Atlas recommended)
  3. Deploy the server directory
  4. Run database seeder if needed

Database (MongoDB Atlas)

  1. Create a MongoDB Atlas cluster
  2. Update the MONGODB_URI in your environment variables
  3. Whitelist your application's IP addresses

πŸ”’ Security Features

  • 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

🎨 Customization

Adding New Languages

  1. Update the languages object in ProblemDetail.js
  2. Add language support in the submission API
  3. Update the Monaco Editor configuration

Styling

  • Modify tailwind.config.js for custom colors and themes
  • Update component styles in individual files
  • Add custom CSS in index.css

Features

  • Extend the Problem model for additional fields
  • Add new API endpoints in the routes directory
  • Create new React components and pages

πŸ› Troubleshooting

Common Issues

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 .env file
  • 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

🀝 Contributing

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature-name
  3. Commit your changes: git commit -am 'Add feature'
  4. Push to the branch: git push origin feature-name
  5. Submit a pull request

πŸ“ License

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

πŸ™ Acknowledgments

  • 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

πŸ“ž Support

For support, email support@codeclone.com or create an issue in the repository.


Happy Coding! πŸš€

About

That's an exciting project! Creating a platform similar to LeetCode needs a name that suggests coding, challenges, mastery, and skill development.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published