🎯 Snap2Slides Pro

Transform any document into professional presentations with AI

Snap2Slides is an AI-powered presentation generator built from scratch over 3 weeks as a learning project. It transforms images, PDFs, and documents into professional PowerPoint slides using Google's Gemini Vision API, with robust multi-API failover system and comprehensive mobile support.

🎬 Watch Live Demo Video

🌐 Try It Live - No Registration Required

Real application, real AI processing, real PowerPoint downloads

🏗️ Development Journey - From Concept to Production

Built from scratch in 3 weeks - A complete learning journey from concept to deployed application

This project represents a full-stack development experience with real challenges and solutions:

• 🔥 Week 1: Core architecture, Next.js 14 setup, Gemini API integration
• ⚡ Week 2: Multi-API failover system, PowerPoint generation, mobile optimization
• 🚀 Week 3: Production deployment, comprehensive documentation, GitHub presentation

Key Learning Highlights:

• Mastering AI API integration and building resilient failover systems
• Developing comprehensive error handling and application monitoring
• Learning responsive design principles for complex file processing workflows
• Growing skills in thorough documentation and professional project organization

📖 Read the Complete Development Story → Deep dive into challenges, solutions, and architectural decisions

✨ What Makes This Special

This isn't just another AI tool - it's a complete production application built with real-world challenges in mind:

🚀 Core Features

• 🤖 Multi-API AI Processing - Google Gemini Vision with automatic failover
• 📄 Universal File Support - Images, PDFs, Word docs, PowerPoint (up to 50MB)
• 📱 True Mobile-First - Tested on real devices, works perfectly on phones
• ⚡ Real-time Processing - Live progress tracking, no fake loading screens
• 💾 Instant Downloads - Professional PowerPoint files ready for presentation
• 🔧 Admin Monitoring - Built-in system health dashboard

🛠 Robust Technical Architecture

• Reliable System Design - Multi-API rotation prevents downtime
• Cross-Device Compatibility - Network-enabled testing across devices
• Performance Optimized - React.memo, code splitting, hardware acceleration
• Comprehensive Error Handling - Graceful degradation and user feedback
• Security First - Input validation, file type restrictions, API protection

Setup

1. Install Dependencies

   npm install

2. Configure Gemini API

   • Get your API key from Google AI Studio
   • Add it to .env.local:

   GEMINI_API_KEY=your_actual_api_key_here
   

3. Run Development Server

   npm run dev

4. Open in Browser

   • Navigate to http://localhost:3000 (or the port shown in terminal)

Usage

1. Upload Image: Drag and drop or click to select an image file (JPG, PNG, WebP up to 10MB)
2. Generate Slides: Click "Generate Slides" to process with AI
3. Download Result: PowerPoint file will automatically download when ready

Technical Stack

• Next.js 14: React framework with App Router
• TypeScript: Type-safe development
• Tailwind CSS: Utility-first styling
• Google Gemini AI: Advanced image analysis and content generation
• PptxGenJS: PowerPoint file generation

API Routes

• POST /api/gemini-vision: Process images with AI
• POST /api/generate-pptx-slides: Create PowerPoint presentations

File Structure

app/
├── api/
│   ├── gemini-vision/route.ts    # AI image processing
│   └── generate-pptx-slides/route.ts  # PowerPoint generation
├── globals.css                   # Clean, professional styling
├── layout.tsx                    # Root layout
└── page.tsx                      # Main application interface

Environment Variables

GEMINI_API_KEY=your_gemini_api_key_here

Production Deployment

1. Build the application:

   npm run build

2. Start production server:

   npm start

Make sure to set the GEMINI_API_KEY environment variable in your production environment.

• TypeScript: Full type safety and excellent developer experience

🛠️ Tech Stack

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first styling
• Google Gemini AI - Image analysis and content generation
• MongoDB - Database for storing presentations
• Framer Motion - Smooth animations

🎯 Quick Start

1. Install Dependencies

   npm install

2. Environment Setup

   cp .env.local.example .env.local
   # Add your API keys

3. Run Development Server

   npm run dev

4. Open Browser Visit http://localhost:3000

📁 Project Structure

├── app/
│   ├── api/          # API routes
│   ├── components/   # Reusable components
│   ├── globals.css   # Global styles
│   ├── layout.tsx    # Root layout
│   └── page.tsx      # Homepage
├── public/           # Static assets
├── next.config.js    # Next.js configuration
└── tailwind.config.js # Tailwind configuration

🔧 Development

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run type-check - TypeScript checking

🎨 Features in Detail

Image Upload & Analysis

• Drag & drop interface
• Multiple file support
• AI-powered content extraction
• Smart title generation

Slide Generation

• Professional templates
• Automatic layout optimization
• Content suggestions
• Export capabilities

🚀 Deployment

Ready to deploy on Vercel, Netlify, or any Node.js hosting platform.

📝 License

MIT License - feel free to use for personal and commercial projects.

---

Built with ❤️ for the future of presentations