CodeSense AI

AI-Powered Code Review & Analysis Platform

Review • Explain • Debug • Optimize • Security Audit • Interview Prep

🚀 CodeSense AI

An AI-powered Code Review application built with React.js and Express.js that helps developers analyze, optimize, debug, explain, and review source code using Prompt Engineered Results from Large Language Models.

Why This Project?

CodeSense AI was built to help developers quickly review code using AI while also learning from the generated feedback. Instead of only identifying issues, the application explains improvements, highlights best practices, estimates complexity, and generates interview-focused questions to help users improve both their code quality and technical knowledge.

---

✨ Features

• 📝 Monaco Code Editor
• ⚛️ React-based responsive UI
• 🤖 AI-powered code analysis
• 🔍 Review, Explain, Debug & Optimize modes
• 🔐 Code Security Audit
• 💡 Interview Question Generator
• 📊 Code Quality Score
• ⭐ Overall Rating
• 📚 Detailed Engineering Review
• ⚡ Optimized Code Suggestions
• 📋 One-click Copy Support
• 💾 Local History & Settings ( LocalStorage )

---

🖥️ Screenshots

---

⚛️ Frontend (React)

React Concepts Used

• Functional Components
• React Hooks
  • useState
  • useEffect
  • useMemo
• Component Based Architecture
• Conditional Rendering
• Event Handling
• Props
• LocalStorage
• Axios
• React Markdown
• Monaco Editor
• Syntax Highlighter
• Responsive Layout

---

⚙️ Backend

• Express.js
• REST APIs
• Route Separation
• Controllers
• Services
• Error Handling Middleware
• Prompt Builder
• AI Service Layer

---

🤖 AI Features

• Code Review
• Code Explanation
• Debug Suggestions
• Security Audit
• Performance Optimization
• Complexity Analysis
• Interview Questions
• Optimized Code Generation

---

🛠 Tech Stack

Frontend

• React.js
• Vite
• Axios
• Monaco Editor
• React Markdown
• React Syntax Highlighter
• Lucide React

Backend

• Node.js
• Express.js

AI

• Groq API
• Llama 3.1 8B Instant

---

📁 Folder Structure

CodeSense-AI
│
├── client
│   ├── src
│   ├── components
│   ├── pages
│   ├── services
│   └── utils
│
├── server
│   ├── controllers
│   ├── routes
│   ├── services
│   ├── middlewares
│   ├── config
│   └── utils

---

🚀 Installation

Clone Repository

git clone <repository-url>

Frontend

cd client
npm install
npm run dev

Backend

cd server
npm install
npm run dev

---

🔑 Environment Variables

Create a .env inside the server folder.

PORT=3000
GROQ_API_KEY=YOUR_API_KEY

---

📌 API

Method	Endpoint	Description
POST	/api/review	AI Code Review
POST	/api/detailed-review	Detailed Engineering Review
GET	/api/health	Health Check

---

🚀 Deployment

The application is deployed as a full-stack project using separate hosting services for the frontend and backend.

Frontend

• Platform: Vercel
• Built using the production Vite build.
• API endpoint is configured using environment variables.

Backend

• Platform: Render
• Express.js server deployed as a Web Service.
• Groq AI API credentials are securely managed using Render Environment Variables.

---

🔒 Deployment & Security Measures

• Environment variables are used for sensitive configuration (API keys are never committed to the repository).
• node_modules, .env files, and build artifacts are excluded using .gitignore.
• Frontend and backend are deployed independently, following a production-ready architecture.
• CORS is configured to allow cross-origin communication between the frontend and backend.
• API base URL is environment-based, enabling seamless switching between local development and production.
• Backend includes centralized error handling to return controlled responses instead of exposing internal server errors.
• Source code is version controlled using Git and GitHub with a clean project structure.

👨‍💻 Author

Samarjit Banerjee

MERN Full Stack Developer | AI Enthusiast