Michael Mainguy
8376e77df7
## Major Refactoring - Broke down large components into focused, reusable pieces - Reduced NewPresentationPage.tsx from 238 to 172 lines - Reduced PresentationEditor.tsx from 457 to 261 lines - Eliminated functions exceeding 50-line guideline ## New Reusable Components - PresentationDetailsForm: Form inputs for title/description - AspectRatioSelector: Aspect ratio selection grid - ThemeSelectionSection: Theme selection wrapper - CreationActions: Action buttons and selected theme info - EmptyPresentationState: Empty presentation state display - SlidesSidebar: Complete sidebar with slides list - SlideThumbnail: Individual slide thumbnail with actions - LoadingState: Reusable loading component with spinner - ErrorState: Reusable error display with retry/back actions ## New Hooks - useSlideOperations: Custom hook for slide duplicate/delete logic ## Code Quality Improvements - Replaced browser alert() calls with AlertDialog component - Updated imports to use direct .tsx extensions per IMPORT_STANDARDS.md - Eliminated browser confirm() calls in favor of ConfirmDialog system - Consolidated duplicate loading/error state patterns - Improved type safety throughout ## Benefits - Better maintainability through component separation - Consistent UX with shared UI components - Code reuse across presentation components - Compliance with 200-line file guideline 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
|---|---|---|
| public | ||
| scripts | ||
| src | ||
| .gitignore | ||
| CLAUDE.md | ||
| ERROR_HANDLING_STANDARDS.md | ||
| eslint.config.js | ||
| IMPORT_STANDARDS.md | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| REACT19_IMPLEMENTATION.md | ||
| README.md | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| USERFLOWS.md | ||
| VITE_PERFORMANCE.md | ||
| vite.config.ts | ||
Online slide presentation editor and viewer built with React and Vite
A web application for creating, editing, and presenting slide presentations with customizable themes and layouts.
Features
- Create new presentations with a selection of built-in themes
- Add slides with various layouts based on the selected theme
- Add text and images to slide layout "slots"
- Add presentation notes to slides
- Present slides in full-screen mode
- Easily switch themes and update presentations accordingly
- Modular and reusable React components
- Customizable themes with support for CSS, fonts, colors, and images
- Support for "master slides" with non-overridable content
- Responsive design for various screen sizes
- Export presentations to PDF or HTML format
Getting Started
Prerequisites
- Node.js (v20 or later)
- npm (v9 or later)
- Git (for cloning the repository)
- A modern web browser (for running the application)
- A code editor (e.g., VSCode) for development
- Basic knowledge of React, TypeScript, HTML, and CSS
- Familiarity with Vite and npm package management
Installation
- Clone the repository:
git clone https://git.dasfad.com/mmainguy/slideshare.git - Navigate to the project directory:
cd slideshare - Install dependencies:
-
npm install ```
- Start the development server:
-
npm run dev ```
- Open your web browser and navigate to
http://localhost:5173to view the application.