CodeMentor AI

• Visit Link: CodeMentor + AI An AI-powered coding assistant with real-time collaboration and session sharing.

CodeMentor AI is a web-based platform designed to assist developers in writing, debugging, and collaborating on code. It integrates a powerful code editor, an AI assistant, and features for saving and sharing coding sessions. Built with modern technologies like React, Express, MongoDB, and Socket.IO, this project showcases full-stack development, secure authentication, and AI integration.

---

📋 Table of Contents

• Features
• Tech Stack
• Installation
• Usage
• Project Structure
• Authentication
• Contributing
• License
• Author

---

✨ Features

• Interactive Code Editor: Write and edit code with syntax highlighting using Monaco Editor.
• AI Assistant: Get real-time coding assistance, explanations, and suggestions powered by OpenAI.
• Snippet Management: Save, tag, and search code snippets for reuse.
• Session Sharing: Save coding sessions (including code and AI queries) and share them via unique links.
• Real-Time Collaboration: Collaborate with others in real-time using Socket.IO.
• Secure Authentication: Log in securely with GitHub OAuth, required on every visit for enhanced security.
• Theme Support: Switch between light and dark modes for a comfortable coding experience.
• Responsive Design: Fully responsive UI built with Tailwind CSS, works on all devices.
• Code Quality: Real-time linting for JavaScript code to ensure best practices.
• Testing: Includes frontend and backend tests using Jest and Supertest.

---

🛠️ Tech Stack

Frontend

• React: JavaScript library for building the user interface.
• Vite: Fast build tool and development server.
• Monaco Editor: Code editor with syntax highlighting.
• Tailwind CSS: Utility-first CSS framework for styling.
• Axios: For making HTTP requests to the backend.
• React Router: For client-side routing.

Backend

• Express.js: Web framework for Node.js.
• MongoDB: NoSQL database for storing snippets and sessions.
• Mongoose: ODM for MongoDB.
• Socket.IO: For real-time collaboration.
• Passport.js: For GitHub OAuth authentication.
• jsonwebtoken: For generating and verifying JWT tokens.
• OpenAI API: For AI-powered coding assistance.

Testing

• Jest: Testing framework for JavaScript.
• Supertest: For testing API endpoints.

---

🖥️ Installation

Follow these steps to set up the project locally.

Prerequisites

• Node.js (v18.x or higher)
• MongoDB (local or MongoDB Atlas)
• GitHub OAuth App (for authentication)
• OpenAI API Key (for AI features)

Steps

1. Clone the Repository:

   https://github.com/sarthak03dot/CodeMentor-AI.git
   cd CodeMentor-AI

2. Set Up the Backend:

   • Navigate to the server directory:

     cd server

   • Install dependencies:

     npm install

   • Create a .env file in the server directory with the following:

     GITHUB_CLIENT_ID=your_github_client_id
     GITHUB_CLIENT_SECRET=your_github_client_secret
     JWT_SECRET=your_jwt_secret
     MONGO_URI=mongodb://localhost:27017/codementor
     OPENAI_API_KEY=your_openai_api_key
     PORT=5000
     

     • Replace the values with your own:
       • GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET: Create a GitHub OAuth app (GitHub > Settings > Developer settings > OAuth Apps) and copy the credentials.
       • JWT_SECRET: A secure string for signing JWT tokens.
       • MONGO_URI: Your MongoDB connection string.
       • OPENAI_API_KEY: Your OpenAI API key.
   • Start the backend server:

     npm start

3. Set Up the Frontend:

   • Navigate to the client directory:

     cd ../client

   • Install dependencies:

     npm install

   • Start the development server:

     npm run dev

   • The frontend will run on http://localhost:5173.

4. Configure GitHub OAuth:

   • In your GitHub OAuth app settings:
     • Set the Homepage URL to http://localhost:5173.
     • Set the Authorization callback URL to http://localhost:5000/auth/github/callback.

5. Access the App:

   • Open http://localhost:5173 in your browser.
   • You’ll be redirected to GitHub for authentication. Log in with your GitHub account to access the app.

---

🚀 Usage

1. Write Code:

   • Use the code editor to write code in your preferred language (e.g., JavaScript, Python).
   • Syntax highlighting is provided by Monaco Editor.

2. Get AI Assistance:

   • Use the AI chat interface to ask coding questions (e.g., “Explain this code” or “Fix this bug”).
   • Responses are powered by OpenAI and displayed in the chat.

3. Save Snippets:

   • Save code snippets with tags for easy retrieval.
   • Search snippets by tags to reuse code.

4. Save and Share Sessions:

   • Save a coding session (code, language, AI queries) and get a shareable link.
   • Share the link with others to collaborate or showcase your work.

5. Collaborate in Real-Time:

   • Share a session link and collaborate with others in real-time using Socket.IO.

6. Switch Themes:

   • Toggle between light and dark modes using the button in the navbar.

---

📂 Project Structure

codementor-ai/
├── client/                     # Frontend (React)
│   ├── src/
│   │   ├── components/
│   │   │   ├── ChatInterface.jsx
│   │   │   ├── Editor.jsx
│   │   │   ├── Footer.jsx
│   │   │   └── SharedSession.jsx
│   │   ├── pages/
│   │   │   └──Home.jsx
│   │   ├── App.jsx
│   │   ├── index.css
│   │   └── main.jsx
│   ├── package.json
│   ├── vite.config.js
│   └── tailwind.config.js
├── server/                     # Backend (Express)
│   ├── routes/
│   │   ├── ai.js
│   │   ├── auth.js
│   │   ├── lint.js
│   │   ├── sessions.js
│   │   └── snippets.js
│   ├── models/
│   │   ├── Session.js
│   │   └── Snippet.js
│   ├── test/
│   │   └── api.test.js
│   ├── index.js
│   └── package.json
├── docs/   
│   └── .markdown
├── README.md
└── .gitignore

---

🔒 Authentication

The app uses GitHub OAuth for authentication:

• Users are redirected to GitHub to log in on every visit to https://your-domain/.
• Upon successful login, a JWT token is generated and used for API requests.
• The token is stored in React state (not localStorage) to enforce re-authentication on page reloads.

Setting Up GitHub OAuth

1. Create a GitHub OAuth app (GitHub > Settings > Developer settings > OAuth Apps).
2. Set the Homepage URL and Authorization callback URL as described in the Installation sections.
3. Add the GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET to your .env file.

---

🤝 Contributing

Contributions are welcome! Follow these steps to contribute:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature/your-feature-name

3. Make your changes and commit:

   git commit -m "Add your feature description"

4. Push to your branch:

   git push origin feature/your-feature-name

5. Create a pull request on GitHub.

Please ensure your code follows the project’s coding style and includes tests where applicable.

---

📜 License

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

---

👤 Author

• Sarthak Singh
  • GitHub: sarthak03dot
  • Portfolio: sarthak03dot-portfolio.onrender.com
  • Location: Ghaziabad, India
  • Bio: B-Tech Student in Computer Science and Engineering

---

CodeMentor AI - Empowering developers with AI and collaboration. 🚀