Presentation Maker

A modern web application for creating and presenting slide decks using JSON-based configurations. Built with Next.js 15, React 19, and TypeScript.

Features

• AI-Powered Generation: Create presentations from text descriptions using Google's Gemini AI
• JSON-Based Configuration: Define presentations using a structured JSON schema
• Multiple Slide Types: Support for 11 different slide types including titles, bullet points, images, code, charts, timelines, and more
• Interactive Presentation Mode: Fullscreen presentation with keyboard navigation
• Local Storage: Save and manage presentations locally
• Upload & Export: Import JSON files or create presentations through the web interface
• Real-time Editing: Built-in JSON editor for customizing presentations
• Responsive Design: Works on desktop and mobile devices

Slide Types Supported

• Title slides
• Bullet point lists
• Image slides
• Code snippets with syntax highlighting
• Text + Image combinations
• Quotes
• Comparison tables
• Timelines
• Charts
• Process diagrams
• Call-to-action slides

Getting Started

1. Clone the repository

   git clone https://github.com/D0dii/presentation-maker.git
   cd presentation-maker

2. Install dependencies

   pnpm install

3. Set up environment variables Create a .env.local file and add your Google API key:

   GOOGLE_GENERATIVE_AI_API_KEY=your_api_key_here

4. Run the development server

   pnpm dev

5. Open the application Navigate to http://localhost:3000

Usage

Creating Presentations

1. AI Generation: Describe your presentation topic and let AI generate the slides
2. Upload JSON: Import an existing JSON presentation file
3. Manual Creation: Use the examples as templates and customize them

JSON Schema

Presentations follow a structured schema with the following format:

{
  "title": "Presentation Title",
  "description": "Brief description",
  "slides": [
    {
      "type": "title",
      "title": "Slide Title",
      "subtitle": "Optional subtitle"
    }
  ]
}

Navigation

• Arrow Keys: Navigate between slides
• F/F11: Toggle fullscreen mode
• Esc: Exit fullscreen

Tech Stack

• Framework: Next.js 15 (App Router)
• Runtime: React 19
• Language: TypeScript
• Styling: Tailwind CSS v4
• State Management: Jotai
• Validation: Zod
• AI Integration: Google Generative AI
• UI Components: Radix UI
• Code Highlighting: Prism React Renderer
• Icons: Lucide React

Project Structure

src/
├── app/                    # Next.js app router
│   ├── api/chat/          # AI generation endpoint
│   ├── creator/           # Presentation creation interface
│   ├── examples/          # Sample presentations
│   ├── presentation/      # Presentation viewer and editor
│   └── presentations/     # User presentations list
├── components/            # Reusable UI components
├── lib/                   # Utilities and schemas
├── atoms/                 # Jotai state management
└── hooks/                 # Custom React hooks