Code2Concept

An AI-powered educational platform that transforms coding problems into visual learning experiences. Code2Concept analyzes programming problems, provides multiple solution approaches, and generates animated explanations using Manim to help developers understand algorithms and data structures conceptually.

Features

• 🤖 AI-Powered Analysis: Uses Google's Gemini AI to analyze coding problems and generate comprehensive explanations
• 📊 Multiple Approaches: Compare different solution approaches with time/space complexity analysis
• 🎬 Animated Explanations: Generate visual animations using Manim to illustrate algorithm execution
• 💡 Concept Learning: Break down complex algorithms into understandable concepts
• 🎯 Interactive Interface: Modern React-based UI for seamless learning experience

Tech Stack

Frontend

• React with Vite for fast development
• Tailwind CSS for styling
• JavaScript/JSX for component logic

Backend

• Node.js with Express.js
• Google Generative AI (Gemini) for problem analysis
• Manim for animation generation
• FFmpeg for video processing

Getting Started

Prerequisites

• Node.js (Latest LTS version recommended)
• npm (comes with Node.js)
• Python 3.7 or higher
• Manim (for animation generation)
• Google Gemini API Key
• MathTeX (optional, for mathematical notation rendering)

Installing Python

1. Download Python from the official website
2. During installation, make sure to check "Add Python to PATH"
3. Verify installation by opening a terminal and running:

python --version

Installing Manim

1. Install Manim using pip:

pip install manim

2. Install additional dependencies:

   • For Windows:

     # Install MiKTeX (LaTeX distribution)
     # Download from: https://miktex.org/download
     
     # Install FFmpeg
     # Download from: https://ffmpeg.org/download.html
     # Add FFmpeg to your system PATH

   • For macOS:

     brew install py3cairo ffmpeg

   • For Linux:

     sudo apt update
     sudo apt install libcairo2-dev libpango1.0-dev ffmpeg

3. Verify Manim installation:

manim --version

Installation

1. Clone the repository:

git clone https://github.com/A-R-P-I-T-JAIN/Code2Concept.git
cd Code2Concept

2. Install frontend dependencies:

npm install

3. Install backend dependencies:

cd backend
npm install

4. Set up environment variables: Create a .env file in the backend directory:

cd backend

GEMINI_API_KEY=your_google_gemini_api_key_here
PORT=5000

Running the Application

Development Mode

1. Start the backend server:

cd backend
npm run dev

The backend will run on http://localhost:5000

2. Start the frontend development server:

npm run dev

The frontend will run on http://localhost:5173 (or another available port)

Production Mode

1. Build the frontend:

npm run build

2. Start the backend in production:

cd backend
npm start

3. Preview the production build:

npm run preview

Available Scripts

Frontend

• npm run dev - Start development server with HMR
• npm run build - Create production build
• npm run preview - Preview production build locally
• npm run lint - Run ESLint for code quality checks

Backend

• npm run dev - Start backend with nodemon (auto-reload)
• npm start - Start backend in production mode

Project Structure

Code2Concept/
├── src/
│   ├── components/         # React components
│   ├── data/              # Static data (approaches.js)
│   ├── services/          # API services
│   └── ...
├── backend/
│   ├── server.js          # Express server
│   ├── videos/            # Generated video files
│   ├── renders/           # Manim render outputs
│   └── audio/             # Audio files
├── public/                # Static assets
└── ...

How It Works

1. Problem Input: Users input coding problems or questions
2. AI Analysis: Gemini AI analyzes the problem and generates solution approaches
3. Approach Comparison: Multiple solutions are presented with complexity analysis
4. Animation Generation: Manim creates visual animations explaining the algorithms
5. Interactive Learning: Users can explore different approaches and watch explanations

API Endpoints

• POST /api/analyze - Analyze a coding problem and return solution approaches
• GET /videos/:filename - Serve generated video files

Contributing

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

Environment Setup

Make sure to set up your environment variables properly:

# Backend/.env
GEMINI_API_KEY=your_api_key_here
PORT=5000

Troubleshooting

Common Issues

1. Manim Installation Issues: Ensure all system dependencies are installed
2. FFmpeg Not Found: Make sure FFmpeg is added to your system PATH
3. API Key Issues: Verify your Gemini API key is correctly set in the environment variables
4. Port Conflicts: Change the port in the backend if 5000 is already in use

Video Generation Issues

• Ensure Python and Manim are properly installed
• Check that the renders and videos directories have write permissions
• Verify FFmpeg is accessible from the command line

License

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

Acknowledgments

• Google Generative AI for problem analysis
• Manim Community for animation framework
• React and Vite teams for the frontend framework
• All contributors and the open-source community

Support

If you encounter any issues or have questions, please:

1. Check the troubleshooting section above
2. Search existing issues on GitHub
3. Create a new issue with detailed information about your problem

---

Happy Learning! 🚀