Math Animation Learning Platform

A full-stack web application for learning mathematics through interactive Manim-generated animations.

🎯 Features

• Rich Math Animations: Visualize mathematical concepts with Manim
• Topic Library: Browse topics across calculus, algebra, geometry, and trigonometry
• Interactive Learning: Watch animations, adjust parameters, and explore concepts
• Modern UI: Built with Next.js, Tailwind CSS, and shadcn/ui
• Responsive Design: Works seamlessly on all devices

📁 Project Structure

.
├── backend/              # FastAPI backend
│   ├── main.py          # FastAPI application
│   ├── topics.json      # Topic definitions
│   ├── manim_scenes/    # Manim scene files
│   └── static/          # Rendered animations
│
└── frontend/            # Next.js frontend
    ├── app/             # Next.js app directory
    ├── components/      # React components
    └── lib/             # Utilities and API client

🚀 Quick Start

Prerequisites

• Python 3.8+
• Node.js 18+
• LaTeX (MiKTeX or TeX Live)
• Manim installed

Backend Setup

1. Navigate to backend directory:

cd backend

2. Install Python dependencies:

pip install -r requirements.txt

3. Install Manim:

pip install manim

4. Install LaTeX:

   • Windows: Download and install MiKTeX
   • Mac: brew install mactex or brew install basictex
   • Linux: sudo apt-get install texlive-full

5. Run the backend server:

python main.py

The API will be available at http://localhost:8000

Frontend Setup

1. Navigate to frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Create environment file: Create .env.local:

NEXT_PUBLIC_API_URL=http://localhost:8000

4. Run the development server:

npm run dev

Open http://localhost:3000 in your browser.

📚 API Endpoints

GET /health

Health check endpoint.

GET /topics

Get all available topics.

GET /topics/{topic_id}

Get a specific topic with animation status.

Query Parameters:

• quality: "low", "medium", or "high" (default: "medium")

POST /render

Render an animation.

Request Body:

{
  "topic_id": "derivative-x-squared",
  "quality": "medium",
  "parameters": {}
}

GET /topics/{topic_id}/video

Serve the video file directly.

🎨 Adding New Topics

1. Create a Manim scene in backend/manim_scenes/:

from manim import *

class YourScene(Scene):
    def construct(self):
        # Your animation code
        pass

2. Add topic to backend/topics.json:

{
  "id": "unique-id",
  "name": "Topic Name",
  "description": "Description",
  "category": "calculus",
  "scene_file": "your_scene.py",
  "scene_class": "YourScene",
  "parameters": {}
}

3. Restart the backend server

🛠️ Development

Backend Development

• FastAPI with automatic API documentation at /docs
• Hot reload with uvicorn --reload
• Manim scenes in manim_scenes/ directory

Frontend Development

• Next.js with App Router
• TypeScript for type safety
• Tailwind CSS for styling
• shadcn/ui components

📖 Documentation

• Backend README
• Frontend README

🎓 Available Topics

• Calculus: Derivatives, Integrals, Riemann Sums
• Algebra: Quadratic Formula
• Geometry: Pythagorean Theorem
• Trigonometry: Sine Waves

🤝 Contributing

1. Create a new Manim scene
2. Add it to topics.json
3. Test the rendering
4. Submit a pull request

📝 License

MIT License

🙏 Acknowledgments

• Manim for animation engine
• FastAPI for backend framework
• Next.js for frontend framework
• shadcn/ui for UI components