CodeExplainer 🚀

An AI-powered code analysis tool that provides instant explanations, security analysis, and improvement suggestions for your code. Built with Next.js and powered by OpenAI and Groq.

✨ Features

🔍 Intelligent Code Analysis

• Instant Explanations: Get detailed, AI-powered explanations of any code snippet
• Security Analysis: Automatic detection of vulnerabilities (SQL injection, XSS, CSRF, etc.)
• Performance Metrics: Identify bottlenecks and optimization opportunities
• Quality Assessment: Code maintainability, readability, and best practices evaluation

🎯 Smart Improvements

• Conditional Suggestions: Only shows improvement button when issues are detected
• Detailed Recommendations: Get specific, actionable improvement suggestions
• Before/After Comparison: See improved code with explanations of changes

⚡ Performance Optimized

• Persistent Caching: File-based cache system that works across all users
• Rate Limiting: Built-in rate limiting for API calls using Bottleneck
• Idempotent Operations: Prevents duplicate API calls for identical code
• 24-Hour Cache TTL: Reduces API costs while maintaining freshness

🎨 Modern UI/UX

• Syntax Highlighting: Beautiful code editor with Prism.js
• Responsive Design: Works seamlessly on desktop, tablet, and mobile
• Auto-Scroll: Automatically scrolls to results after analysis
• Real-time Feedback: Loading states and progress indicators

🔧 Multi-Language Support

Supports 20+ programming languages:

• JavaScript, TypeScript, Python, Java, Go
• Solidity, SQL, C, C++, Rust
• And many more...

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• OpenAI API key or Groq API key

Installation

1. Clone the repository

git clone https://github.com/yourusername/codeexplainer.git
cd codeexplainer

2. Install dependencies

npm install

3. Set up environment variables

Create a .env.local file in the root directory:

# AI Provider Configuration (choose: openai or groq)
NEXT_PUBLIC_DEFAULT_AI_PROVIDER=groq

# API Keys (get from respective providers)
OPENAI_API_KEY=your_openai_api_key_here
GROQ_API_KEY=your_groq_api_key_here

4. Run the development server

npm run dev

5. Open your browser Navigate to http://localhost:3000

📦 Tech Stack

• Framework: Next.js 15.5.4 (Pages Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• AI Integration:
  • OpenAI API (GPT-4)
  • Groq API (Llama 3.3 70B)
• Code Editor: react-simple-code-editor
• Syntax Highlighting: Prism.js
• Rate Limiting: Bottleneck

🏗️ Project Structure

codeexplainer/
├── src/
│   ├── pages/
│   │   ├── api/
│   │   │   ├── analyze.ts      # Code analysis endpoint
│   │   │   ├── explain.ts      # Code explanation endpoint
│   │   │   └── improve.ts      # Code improvement endpoint
│   │   ├── _app.tsx            # App wrapper
│   │   ├── _document.tsx       # HTML document structure
│   │   └── index.tsx           # Main application page
│   ├── styles/
│   │   └── globals.css         # Global styles
│   ├── utils/
│   │   ├── cache.ts            # Persistent caching system
│   │   └── rateLimiter.ts      # API rate limiting
│   └── types/
│       └── prismjs.d.ts        # TypeScript declarations
├── public/
│   ├── favicon.svg             # App icon
│   └── favicon.ico             # Fallback icon
├── .cache/                     # Persistent cache directory
├── .gitignore
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.ts

🔑 API Configuration

OpenAI Setup

1. Get your API key from OpenAI Platform
2. Add to .env.local: OPENAI_API_KEY=sk-...
3. Set provider: NEXT_PUBLIC_DEFAULT_AI_PROVIDER=openai

Groq Setup (Recommended for Speed)

1. Get your API key from Groq Console
2. Add to .env.local: GROQ_API_KEY=gsk_...
3. Set provider: NEXT_PUBLIC_DEFAULT_AI_PROVIDER=groq

Rate Limits

Groq (Llama 3.3 70B):

• 30 requests per minute (RPM)
• 1,000 requests per day (RPD)
• 12,000 tokens per minute (TPM)
• 100,000 tokens per day (TPD)

OpenAI (GPT-4):

• 100 requests per minute (RPM)
• Varies by tier

🎯 Key Features Explained

Persistent Caching System

• Cross-User Benefits: All users benefit from cached results
• File-Based Storage: Survives server restarts
• SHA256 Hashing: Secure, collision-resistant cache keys
• Automatic Cleanup: Removes expired and excess cache files
• Cost Optimization: Dramatically reduces API calls

Smart Analysis

• Security Scoring: 0-100 score with grade (A-F)
• Performance Metrics: Identifies bottlenecks and inefficiencies
• Quality Assessment: Evaluates maintainability and readability
• Risk Classification: Low, medium, high risk indicators

Conditional UI

• Improvement button only appears when issues are detected
• Clear visual indicators for code quality
• Color-coded metrics (green, yellow, red)

🚀 Deployment

Deploy to Vercel (Recommended)

1. Push to GitHub

git init
git add .
git commit -m "Initial commit"
git push -u origin main

2. Deploy on Vercel
   • Go to vercel.com
   • Import your GitHub repository
   • Add environment variables
   • Deploy!

Deploy with Vercel CLI

npm i -g vercel
vercel
vercel --prod

📝 Usage Examples

Analyze JavaScript Code

// Paste this into CodeExplainer
function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price;
  }
  return total;
}

Get:

• Detailed explanation of the code
• Security analysis (no issues)
• Performance suggestions (use reduce)
• Improved version with modern syntax

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

📄 License

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

🙏 Acknowledgments

• Next.js - The React Framework
• OpenAI - GPT-4 API
• Groq - Fast LLM inference
• Tailwind CSS - Utility-first CSS
• Prism.js - Syntax highlighting

📧 Contact

For questions or feedback, please open an issue on GitHub.

---

Built with ❤️ using Next.js and AI