CodeSage is a full-stack, SaaS-grade AI tool powered by Google Gemini AI. Paste any code snippet and instantly get a plain-English explanation, bug detection with severity ratings, or optimization suggestions with time and space complexity analysis — all in one clean interface.
| Feature | Description |
|---|---|
| Code Explainer | Step-by-step beginner-friendly breakdown of any code snippet |
| Bug Finder | Detects errors and issues with severity ratings and suggested fixes |
| Code Optimizer | Optimization suggestions with Time & Space complexity analysis |
| Dark / Light Mode | Persistent theme toggle saved across sessions |
| Copy Results | One-click clipboard copy of AI-generated output |
| Layer | Technology |
|---|---|
| Frontend | React, CSS |
| Backend | Node.js, Express.js |
| AI Engine | Google Gemini API |
| Architecture | Full-Stack (Client / Server) |
CodeSage-AI-Code-Explainer/
├── client/ # React frontend
│ ├── src/
│ │ ├── components/ # UI components
│ │ └── main.jsx # Entry point
│ └── index.html
├── server/ # Express backend
│ ├── routes/ # API routes
│ └── index.js # Server entry point
├── package.json
└── README.md
- Node.js v18+
- Google Gemini API key — Get one here
# Clone the repository
git clone https://github.com/humaisali/CodeSage-AI-Code-Explainer.git
# Navigate into the project
cd CodeSage-AI-Code-Explainercd server
npm install
# Create a .env file and add your Gemini API key
echo "GEMINI_API_KEY=your_api_key_here" > .env
# Start the server
npm startcd client
npm install
npm run devOpen http://localhost:5173 in your browser.
Create a .env file inside the server/ directory:
GEMINI_API_KEY=your_google_gemini_api_key
- User pastes a code snippet into the editor
- Selects a mode — Explain, Debug, or Optimize
- The request is sent to the Express backend
- Backend calls Google Gemini API with a structured prompt
- AI response is returned and displayed in the UI
Humais Ali — Full Stack Developer at SkyTech Developers
Built with React, Node.js, and Google Gemini AI.