Fork of Next.js presentation app was forked from Next.js presentation app

Continue chatting to ask questions about or make changes to it.

Collaborative Presentation App Overview

This project is a real-time collaborative presentation application that allows users to create, edit, and present slideshows together. It's built with Next.js, MongoDB, and Socket.IO to enable real-time collaboration.

Core Features

1. User Authentication: Simple nickname-based entry system
2. Presentation Management: Create, join, and manage presentations
3. Real-time Collaboration: Multiple users can edit presentations simultaneously

4. Role-based Permissions:

   • Creator: Full control over the presentation
   • Editor: Can edit slides but not change settings
   • Viewer: Can only view the presentation

5. Rich Editing Tools:

   • Markdown text editing
   • Drawing tools (pen, shapes, eraser)
   • Image uploads
6. Presentation Mode: Full-screen presentation with slide navigation
7. Export Functionality: Export presentations to PDF
8. Responsive Design: Works on desktop and mobile devices

Technical Architecture

• Frontend: Next.js with React and Tailwind CSS
• Backend: Next.js API routes and custom server for Socket.IO
• Database: MongoDB for data persistence
• Real-time: Socket.IO for real-time collaboration
• File Storage: Local file system for uploaded images
• PDF Generation: Uses html2canvas and jsPDF

Environment Variables

Let me add the required environment variables to the project:

How to Use the App

1. Create a Presentation:

   • Enter your nickname
   • Provide a presentation name
   • Click "Create Presentation"

2. Join a Presentation:

   • Enter your nickname
   • Enter the 6-digit presentation code
   • Click "Join Presentation"

3. Edit Slides:

   • Add/remove slides using the sidebar
   • Edit slide content using Markdown
   • Add images, shapes, and drawings
   • All changes are synchronized in real-time

4. Manage Users:

   • The creator can change user roles
   • Invite others via email or sharing a link

5. Present:

   • Enter presentation mode
   • Navigate through slides
   • Use drawing tools during presentation

Setup Instructions

1. Clone the repository
2. Create a .env file with the variables I provided
3. Install dependencies: npm install
4. Start MongoDB (locally or use MongoDB Atlas)
5. Run the development server: npm run dev
6. Access the application at http://localhost:3000

The application uses a custom server setup to handle both Next.js and Socket.IO, which is defined in server.ts. Make sure MongoDB is running before starting the application, as it's required for storing presentation data.

Please make sure to add the following environment variables to your project: