Code Review Buddy

Your AI-powered code review buddy. Get instant, expert feedback on bugs, performance, and best practices using Google's Gemini API.

✨ Features

• Instant AI-Powered Feedback: Leverages the power of Google's gemini-2.5-flash model for high-quality code analysis.
• Multi-Language Support: Review code in various popular programming languages like JavaScript, Python, Java, C++, and more.
• Comprehensive Analysis: Get feedback on:
  • Bugs and Logic Errors
  • Performance Optimizations
  • Best Practices & Readability
  • Security Vulnerabilities
• Review History: Automatically saves every review to your browser's local storage. Easily browse, load, and delete past reviews from the history panel.
• Clean & Responsive UI: A simple, intuitive, and dark-themed three-panel layout that works great on all screen sizes.
• No Build Step Required: Runs directly in the browser using ES modules and CDN imports for React and Tailwind CSS.

🛠️ Setup and Configuration

This project is a static web application and does not require a build step. You just need a web server to serve the index.html file and a Google Gemini API key.

Prerequisites

• A modern web browser.
• A Google Gemini API Key. You can get one from Google AI Studio.

Environment Variable

The application requires the Gemini API key to be available as an environment variable named API_KEY. The application code accesses it via process.env.API_KEY.

When deploying, ensure you set this environment variable in your hosting provider's settings (e.g., Vercel, Netlify, Google Cloud). For local development, you will need a development server or a setup that can inject this environment variable into your browser's execution context.

🚀 How to Use

1. Open the application in your web browser.
2. Paste the code you want to review into the center editor panel.
3. Select the correct programming language from the dropdown menu.
4. Click the "Review Code" button.
5. The AI-generated feedback will appear in the right-hand panel.
6. Previous reviews will be listed in the left-hand history panel. Click on any item to view the code and its feedback again.

📂 File Structure

.
├── components/         # React components
│   ├── CodeInput.tsx
│   ├── ErrorMessage.tsx
│   ├── Header.tsx
│   ├── HistoryItem.tsx
│   ├── HistoryPanel.tsx
│   ├── Loader.tsx
│   ├── ReviewOutput.tsx
│   └── icons/
│       ├── CodeIcon.tsx
│       ├── HistoryIcon.tsx
│       └── TrashIcon.tsx
├── services/           # API and localStorage interaction logic
│   ├── geminiService.ts
│   └── historyService.ts
├── App.tsx             # Main application component
├── constants.ts        # Application constants (e.g., languages)
├── index.html          # Main HTML entry point
├── index.tsx           # React root renderer
├── metadata.json       # Application metadata
└── README.md           # This file