Mangify

🎨 Project Presentation:
View on Canva

---

📝 About the Project

Project Name: Mangify

Purpose: Convert regular history topics or paragraphs into manga-style visuals, making learning fun, interactive, and visually engaging.

What This Project Does:

• Converts history topics or paragraphs into manga-style illustrations.
• Displays content using images and dialogue/text bubbles for easy understanding.
• Provides an interactive and user-friendly interface built with Next.js.
• Fully responsive design for seamless experience on all devices.
• API routes ready for future expansion or integration.
• Makes learning history fun and visually engaging.

---

🚀 Getting Started

Run Development Server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

📡 API Routes

API routes can be accessed at http://localhost:3000/api/hello
This endpoint can be edited in pages/api/hello.js.

✨ Features

• Converts regular images to manga-style visuals.
• Uses next/font to automatically optimize and load Geist font.
• Hot-reloading during development.
• Interactive and visually appealing UI.

🛠️ Tech Stack

Backend

• Node.js – Runtime environment that allows JavaScript code to run outside the browser. Handles multiple API requests efficiently.
• JavaScript – Main programming language used in Node.js.
• Express.js – Web framework for building APIs and backend services.

Database & Storage

• Supabase – PostgreSQL database as a server, easy integration for backend storage.

AI/ML Integration

• Google Gemini – For text processing, converts context into manga-like content.
  • Backend sends text to Gemini API
  • Receives creative manga-style output

Frontend

• Next.js – React framework for server-side rendering, routing, and optimized performance.
• React – Core UI library with hooks for state management.
• Tailwind CSS – Utility-first framework for fast, responsive styling.
• React Icons – Scalable vector icons for consistent UI.
• JavaScript (ES6+) & JSX – Modern, clean, and declarative component code.

📚 Learn More

• Next.js Documentation
• Learn Next.js
• Next.js GitHub Repository

☁️ Deploy on Vercel

Check out the Next.js deployment documentation for more details.