🤖 Gemini Code Reviewer

An AI-powered code review tool that provides instant, comprehensive feedback on your code using Google's Gemini API

🚀 Live Demo | 📖 Documentation | 🤝 Contributing

---

📋 Table of Contents

• Overview
• Features
• Quick Start
• Installation
• Usage
• Configuration
• Deployment
• Development
• API Reference
• Contributing
• License

💡 New to the project? Check out our Documentation Guide to navigate all available docs!

🎯 Overview

Gemini Code Reviewer is a web-based application that leverages Google's powerful Gemini AI to provide instant, expert-level code reviews. Simply paste your code, and get comprehensive feedback on:

• 🐛 Bugs & Issues - Identify logical errors and edge cases
• ⚡ Performance - Discover bottlenecks and optimization opportunities
• 📖 Readability - Improve code style and naming conventions
• 🎯 Best Practices - Learn modern patterns and techniques
• 🔒 Security - Detect potential vulnerabilities

Built with React, TypeScript, and Vite for a fast, modern development experience.

✨ Features

Core Functionality

• 🤖 AI-Powered Analysis - Leverages Gemini 2.5 Flash for intelligent code review
• 💻 Syntax Highlighting - Clear code presentation with proper formatting
• 📝 Markdown Output - Well-structured, readable feedback
• ⚡ Real-time Processing - Fast response times with streaming support
• 🎨 Modern UI - Clean, responsive interface built with Tailwind CSS

1. Build and deploy - No API key needed at build time!
2. Push to main - automatic deployment to GitHub Pages
3. Create releases with git tag v1.0.0
4. Configure API key - Users enter their API key at runtime in the browser

Developer Experience

• 🔧 TypeScript - Full type safety and autocomplete
• ⚡ Vite - Lightning-fast development and builds
• 🎯 React 19 - Latest React features and optimizations
• 🔄 Hot Reload - Instant feedback during development

DevOps & Deployment

• 🚀 Automated CI/CD - GitHub Actions workflows for testing and deployment
• 📦 Release Management - Automated releases with changelog generation
• 🌍 Multi-Environment - Staging and production deployments
• 🔒 Security Scanning - Automated security audits and secret detection
• 📊 Build Monitoring - Artifact validation and size tracking

🚀 Quick Start

Prerequisites

• Node.js 18.x or 20.x
• npm or yarn
• Google Gemini API key (Get one here)

Installation

1. Clone the repository

   git clone https://github.com/GizzZmo/Code-ReViewer.git
   cd Code-ReViewer

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env.local

   Edit .env.local and add your Gemini API key:

   GEMINI_API_KEY=your_api_key_here

4. Start the development server

5. Run the app:

   npm run dev

6. Open your browser Navigate to http://localhost:5173

📖 Usage

Basic Code Review

1. Paste your code into the left editor panel
2. Click "Review Code" button
3. View AI feedback in the right panel with detailed analysis

Example Review

// Paste this code to see a sample review
function calculateSum(arr) {
  var total = 0;
  for (var i = 0; i <= arr.length; i++) {
    total = total + arr[i];
  }
  return total;
}

The AI will identify:

• Off-by-one error in the loop
• Use of var instead of const/let
• Missing input validation
• Suggestions for modern JavaScript features

⚙️ Configuration

Environment Variables

Variable	Description	Required	Default
GEMINI_API_KEY	Your Google Gemini API key	✅ Yes	-
NODE_ENV	Environment mode	❌ No	development

Customizing the AI Prompt

Edit services/geminiService.ts to customize the review criteria:

const systemInstruction = `
  Your custom review instructions here...
`;

🚀 Deployment

Quick Deploy to GitHub Pages

1. Add API key to repository secrets

   • Go to Settings → Secrets and variables → Actions
   • Add GEMINI_API_KEY secret

2. Push to main branch

   git push origin main

3. Automatic deployment

   • GitHub Actions will build and deploy automatically
   • Access at https://yourusername.github.io/Code-ReViewer

Other Deployment Options

• Vercel: One-click deploy with automatic builds
• Netlify: Drag-and-drop or Git integration
• Custom Hosting: Use the dist/ folder after npm run build

📖 See DEPLOYMENT.md for detailed deployment instructions.

🛠️ Development

Project Structure

Code-ReViewer/
├── .github/workflows/     # GitHub Actions workflows
├── components/            # React components
│   ├── CodeEditor.tsx    # Code input component
│   ├── ReviewOutput.tsx  # Review display component
│   ├── Header.tsx        # App header
│   └── icons/            # SVG icon components
├── services/             
│   └── geminiService.ts  # Gemini API integration
├── App.tsx               # Main application component
├── index.tsx             # Application entry point
├── index.html            # HTML template
├── vite.config.ts        # Vite configuration
└── tsconfig.json         # TypeScript configuration

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npx tsc --noEmit	Type check without building

Code Quality

# Type checking
npx tsc --noEmit

# Security audit
npm audit

# Build size analysis
npm run build

📚 API Reference

reviewCode(code: string): Promise<string>

Main function to review code using Gemini API.

Parameters:

• code (string): The code snippet to review

Returns:

• Promise<string>: Markdown-formatted review

Example:

import { reviewCode } from './services/geminiService';

const review = await reviewCode('function hello() { console.log("Hello"); }');
console.log(review);

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Quick Contribution Steps

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Maintain existing code style
• Add tests for new features
• Update documentation as needed
• Ensure all CI checks pass =======

3. Configure your API key:
   • Open the app in your browser
   • Enter your Gemini API key in the configuration panel at the top
   • Your API key is stored securely in your browser's local storage
   • Get your API key from Google AI Studio

Note: The API key is no longer required at build time. Users can configure their API key directly in the application UI, and it's stored locally in their browser.

🤖 GitHub Workflows

This repository includes comprehensive GitHub Actions workflows:

• 🔄 CI/CD - Automated testing and building on every push
• 🚀 Deployment - GitHub Pages and custom deployments
• 📦 Release Management - Automated releases and packaging
• 🔒 Security - Secret validation and security scanning
• 🌍 Multi-Environment - Staging and production deployments

📖 See .github/workflows/README.md for detailed workflow documentation.

📝 License

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

🙏 Acknowledgments

• Built with Google Gemini API
• Powered by React and Vite
• UI styled with Tailwind CSS

📞 Support

• 📧 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions
• 📖 Documentation: Full Documentation

---

Made with ❤️ by the Code-ReViewer team

⭐ Star us on GitHub — it motivates us a lot!