A modern, web-based presentation editor built with Next.js 15, TypeScript, and HTML5 Canvas API. Create, edit, and manage presentations with an intuitive drag-and-drop interface.
Live Application: https://meta-present.vercel.app
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone <your-repo-url> cd meta-present
-
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
-
Build for production
npm run build
src/
├── app/ # Next.js App Router (layout, pages, global styles)
├── components/ # React components (Canvas, Toolbar, SlidePanel, PropertiesPanel)
├── lib/ # Redux store, hooks, and utility functions
- Next.js 15 App Router: Modern file-based routing for better performance and developer experience
- HTML5 Canvas API: Native browser canvas for custom drawing and element manipulation instead of external libraries
- Redux Toolkit: Centralized state management for complex presentation data (slides, elements, selections)
- TypeScript: Strict type safety to prevent runtime errors and improve code quality
- Tailwind CSS: Utility-first CSS framework for rapid UI development and consistent design
- PresentationEditor: Main application layout and coordination
- Canvas: HTML5 Canvas-based drawing surface for presentation elements
- Toolbar: Drawing tools and element creation controls
- SlidePanel: Slide management and navigation
- PropertiesPanel: Element property editing interface
- Slide Management: Add and delete the slides
- Drawing Tools: Rectangle, circle, triangle, star, line, and text elements
- Image Support: Upload and place images on slides
- Save/Load: Export presentations as JSON and import existing ones
Use the included presentation-2025-08-17-4.json file to test the "Load Presentation" functionality. This example file contains 4 slides with various elements to demonstrate the application's capabilities.
This project is created for the MetaUpSpace Full Stack Developer hiring task.