PitchPerfect App

A modern web application for creating professional presentations with rich media support, designed to work perfectly on iPad and run offline.

Features

🎨 Beautiful Templates: Choose from professionally designed templates for any presentation type
📝 Rich Text Editor: Advanced text editing with formatting options
🖼️ Rich Media Support: Add images, videos, and interactive content to your slides
🎯 Slide Editor: Intuitive drag-and-drop slide editing with real-time preview
📱 iPad Ready: Create presentations that work perfectly on iPad, even offline
💾 Standalone Export: Download complete presentations that run without internet
🎨 Custom Layouts: Design custom slide layouts with the layout designer
🔄 Real-time Preview: See your changes instantly with live preview
📊 Multiple Slide Types: Title slides, content slides, image slides, video slides, and more
🎪 Presentation Viewer: Full-featured presentation viewer with touch controls
💾 Save & Load: Save presentations and load them later for editing

Prerequisites

Node.js 16+ and npm
Modern web browser (Chrome, Firefox, Safari, Edge)

Installation

Clone the repository

git clone <repository-url>
cd PitchPerfect

Install all dependencies
```
npm run install-all
```
Start the development servers
```
npm start
```

This will start both the client (React app) and server (Node.js API) concurrently.

Development

Client (React App)

# Navigate to client directory
cd client

# Start development server
npm start

# Build for production
npm run build

Server (Node.js API)

# Navigate to server directory
cd server

# Start development server
npm start

Startup Scripts

The application includes comprehensive startup scripts that automatically handle dependency installation, process management, and health checks. These scripts work on Windows, Mac, and Linux.

Prerequisites

Node.js 16+ and npm must be installed
Required files must be present in the project structure
Network access for downloading dependencies

Using Startup Scripts

Cross-Platform (Recommended):

# Uses Node.js script that works on all platforms
npm run startup

Platform-Specific:

# Mac/Linux
npm run startup:mac
npm run startup:linux

# Windows
npm run startup:windows

Direct Script Execution:

# Node.js script (cross-platform)
node startup.js

# Shell script (Mac/Linux)
chmod +x startup.sh
./startup.sh

# Batch script (Windows)
startup.bat

What the Startup Scripts Do

Environment Check
- ✅ Verify Node.js version (16+ required)
- ✅ Verify npm is installed
- ✅ Check for required project files
Process Management
- 🔄 Stop any existing processes on ports 3000 and 5001
- 🧹 Clean up zombie processes
- ⏱️ Wait for proper termination
Dependency Management
- 📦 Check if dependencies are installed
- 🔄 Install missing dependencies automatically
- ✅ Verify installation success
Application Startup
- 🚀 Start server in background
- 🚀 Start client in background
- ⏱️ Wait for services to initialize
Health Checks
- 🔍 Verify server is responding on port 5001
- 🔍 Verify client is responding on port 3000
- 📊 Generate comprehensive health report
Reporting
- 📄 Create JSON report (startup-report.json)
- 📄 Create human-readable report (startup-report.txt)
- 🎯 Provide detailed error information

Startup Report Files

The scripts generate two report files:

startup-report.json - Machine-readable JSON report:

{
  "timestamp": "2024-01-15T10:30:00.000Z",
  "platform": "win32",
  "nodeVersion": "v18.17.0",
  "results": {
    "nodeCheck": {"success": true},
    "npmCheck": {"success": true},
    "filesCheck": {"success": true},
    "processCleanup": {"success": true, "message": "Process cleanup completed"},
    "rootDeps": {"success": true, "message": "Root dependencies ready"},
    "serverDeps": {"success": true, "message": "Server dependencies ready"},
    "clientDeps": {"success": true, "message": "Client dependencies ready"},
    "serverStart": {"success": true, "message": "Server started successfully"},
    "clientStart": {"success": true, "message": "Client started successfully"},
    "finalHealth": {"success": true, "message": "Server: OK, Client: OK"}
  }
}

startup-report.txt - Human-readable text report:

PitchPerfect Startup Report
Generated: 2024-01-15T10:30:00.000Z
Platform: win32
Node Version: v18.17.0

nodeCheck: SUCCESS
npmCheck: SUCCESS
filesCheck: SUCCESS
  All required files found
processCleanup: SUCCESS
  Process cleanup completed
rootDeps: SUCCESS
  Root dependencies ready
serverDeps: SUCCESS
  Server dependencies ready
clientDeps: SUCCESS
  Client dependencies ready
serverStart: SUCCESS
  Server started successfully
clientStart: SUCCESS
  Client started successfully
finalHealth: SUCCESS
  Server: OK, Client: OK

Troubleshooting Startup Issues

Common Issues and Solutions:

Node.js Version Too Old

ERROR: Node.js version v14.17.0 is too old. Please install Node.js 16 or higher.

Solution: Update Node.js to version 16 or higher

Missing Dependencies
```
WARNING: node_modules not found in server
```
Solution: The script will automatically install missing dependencies
Port Already in Use
```
WARNING: Port 5001 is in use, killing existing process...
```
Solution: The script automatically handles this by stopping existing processes

Permission Issues (Mac/Linux)

# Make script executable
chmod +x startup.sh

Windows Execution Policy

# Run PowerShell as Administrator
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Advanced Usage

Custom Configuration:

# Set custom ports (if needed)
export SERVER_PORT=5002
export CLIENT_PORT=3001
node startup.js

Verbose Mode:

# Enable detailed logging
export DEBUG=true
npm run startup

Skip Dependency Installation:

# Only start services (assumes dependencies are installed)
export SKIP_INSTALL=true
npm run startup

Restart Scripts

The application includes intelligent restart scripts that read your .env configuration and properly stop/start the client and server processes.

Prerequisites

Create a .env file in the root directory with the following variables:

# Server Configuration (from server/config/config.js)
PORT=5001
CLIENT_URL=http://localhost:3000

# Client Configuration (from client/src/config/config.js)
REACT_APP_SERVER_URL=http://localhost:5001
REACT_APP_CLIENT_URL=http://localhost:3000
REACT_APP_API_BASE_URL=http://localhost:5001/api

Using Restart Scripts

Windows (PowerShell):

# Restart with dependency installation
.\restart.ps1

# Restart without dependency installation (faster)
.\restart.ps1 -SkipInstall

Windows (Command Prompt):

# Restart with dependency installation
restart.bat

# Restart without dependency installation (faster)
# Edit restart.bat and set SkipInstall=true

What the restart scripts do:

Read .env configuration - Extracts ports and URLs from your .env file
Stop running processes - Stops processes on the configured ports (server: 5001, client: 3000)
Wait for termination - Ensures all processes are fully stopped
Validate configuration - Checks that required environment variables are present
Install dependencies - Runs npm run install-all (unless skipped)
Start application - Starts both client and server using npm start

Default Configuration Values

The scripts use these default values from the server and client config files:

Server Config (server/config/config.js):

PORT: 5001
CLIENT_URL: http://localhost:3000

Client Config (client/src/config/config.js):

REACT_APP_SERVER_URL: http://localhost:5001
REACT_APP_CLIENT_URL: http://localhost:3000
REACT_APP_API_BASE_URL: http://localhost:5001/api

Manual Restart

If you prefer to restart manually:

# Stop all Node.js processes
taskkill /f /im node.exe

# Wait a moment
timeout /t 3

# Start the application
npm start

Troubleshooting Restart Issues

Port conflicts: The scripts automatically detect and stop processes on configured ports
Missing .env: Scripts will show you what variables are needed
Permission issues: Run PowerShell as Administrator if needed
Process not stopping: Use taskkill /f /im node.exe manually

Project Structure

PitchPerfect/
├── client/                          # React frontend application
│   ├── src/
│   │   ├── components/              # Reusable React components
│   │   │   ├── Header.js           # Main navigation header
│   │   │   ├── SlideEditor.js      # Slide editing component
│   │   │   ├── MediaUpload.js      # Media upload component
│   │   │   ├── RichTextEditor.js   # Rich text editing
│   │   │   └── IPadPreview.js      # iPad preview component
│   │   ├── pages/                  # Main application pages
│   │   │   ├── Home.js            # Landing page
│   │   │   ├── TemplateSelector.js # Template selection
│   │   │   ├── PresentationBuilder.js # Main presentation builder
│   │   │   ├── PresentationViewer.js # Presentation viewer
│   │   │   ├── SavedPresentations.js # Saved presentations list
│   │   │   └── SlideLayoutDesigner.js # Custom layout designer
│   │   ├── config/
│   │   │   └── config.js          # Configuration settings
│   │   └── App.js                 # Main React application
│   ├── public/                     # Static assets
│   └── package.json               # Client dependencies
├── server/                         # Node.js backend API
│   ├── index.js                   # Main server file
│   ├── config/
│   │   └── config.js              # Server configuration
│   ├── presentations/             # Stored presentations
│   ├── uploads/                   # Uploaded media files
│   └── package.json              # Server dependencies
├── capacitor.config.json          # Capacitor configuration
├── package.json                  # Root dependencies
└── README.md                     # This file

Usage

Creating Presentations

Start the app by running npm start
Choose a template from the template selector
Build your presentation using the drag-and-drop slide editor
Add media by uploading images and videos
Preview your presentation using the iPad preview feature
Save your presentation for later editing
Export as a standalone presentation for offline use

Slide Types

Title Slide: Perfect for opening your presentation
Content Slide: Standard content with text and media
Image Slide: Focus on visual content
Video Slide: Video-focused presentations
Multi-Media Slide: Multiple media items on one slide
Contact Slide: Contact information and call-to-action
Custom Layout: Use custom-designed layouts

Custom Layouts

Design layouts using the Slide Layout Designer
Create slots for content placement
Save layouts for reuse across presentations
Apply layouts to slides in the presentation builder

API Integration

The app includes a Node.js backend API with the following endpoints:

GET /api/templates - Get available presentation templates
GET /api/presentations - List all saved presentations
GET /api/presentations/:id - Get specific presentation
POST /api/presentations - Save a new presentation
PUT /api/presentations/:id - Update an existing presentation
DELETE /api/presentations/:id - Delete a presentation
POST /api/upload - Upload media files
GET /api/presentations/:id/generate - Generate standalone presentation

Configuration

Client Configuration

Edit client/src/config/config.js to customize the app:

const config = {
  apiUrl: 'http://localhost:5001/api',
  uploadUrl: 'http://localhost:5001/api/upload',
  // ... other settings
};

Server Configuration

Edit server/config/config.js to customize the server:

const config = {
  port: 5001,
  uploadDir: './uploads',
  presentationsDir: './presentations',
  // ... other settings
};

Building for Production

Web Application

Build the client
```
cd client
npm run build
```
Deploy the built files from client/build/ to your web server

Standalone Presentations

Create a presentation in the app
Click "Export" to generate a standalone version
Download the ZIP file containing the presentation
Extract and open index.html in any web browser

Troubleshooting

Common Issues

Port conflicts: Ensure ports 3000 (client) and 5001 (server) are available
Media upload issues: Check server upload directory permissions
Build errors: Ensure all dependencies are installed
Preview issues: Check browser console for JavaScript errors

Debug Mode

Enable debug logging by setting environment variables:

export DEBUG=true
export NODE_ENV=development

Contributing

Fork the repository
Create a feature branch
Make your changes
Test thoroughly
Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For support and questions:

Check the React documentation
Review the Node.js documentation
Open an issue on GitHub

PitchPerfect Player App

The PitchPerfect Player is a separate Capacitor.js mobile application designed specifically for playing PitchPerfect presentations on iPad iOS and other mobile devices.

Player Features

📱 Native Mobile App: Built with Capacitor.js for iOS and Android
🎯 Presentation Player: Full-featured presentation viewer with touch controls
📥 Download Support: Download presentations from PitchPerfect server
🔄 Offline Playback: Play presentations without internet connection
🎨 Rich Media Support: Images, videos, and interactive content
👆 Touch Controls: Swipe gestures for navigation
🎮 Keyboard Controls: Arrow keys, spacebar, and escape
🖥️ Fullscreen Mode: Immersive presentation experience
⚡ Autoplay: Automatic slide progression with customizable timing

Player Installation

Clone the player repository (separate from main app)

git clone <player-repository-url>
cd PitchPerfectPlayer

Install dependencies
```
npm install
```
Build the web assets
```
npm run build
```
Add platforms
```
npx cap add ios
npx cap add android
```
Sync the project
```
npx cap sync
```

Player Development

# iOS Development
npx cap open ios
npx cap run ios

# Android Development
npx cap open android
npx cap run android

Player Usage

Launch the app on your iPad or mobile device
Browse presentations in the main list view
Tap "Play" to start a presentation
Navigate using swipe gestures or on-screen controls
Use fullscreen mode for immersive experience

The Player app works seamlessly with presentations created in the main PitchPerfect App, providing a complete presentation creation and playback solution.

Name		Name	Last commit message	Last commit date
client		client
server		server
.cursorignore		.cursorignore
.gitignore		.gitignore
CONFIGURATION.md		CONFIGURATION.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
PITCHPERFECT_PLAYER_API.md		PITCHPERFECT_PLAYER_API.md
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
restart.bat		restart.bat
restart.ps1		restart.ps1
start.bat		start.bat
startup.bat		startup.bat
startup.js		startup.js
startup.sh		startup.sh
test-debug.js		test-debug.js
test.txt		test.txt

Uh oh!

Latest commit

History

Folders and files

Repository files navigation

PitchPerfect App

Features

Prerequisites

Installation

Development

Client (React App)

Server (Node.js API)

Startup Scripts

Prerequisites

Using Startup Scripts

What the Startup Scripts Do

Startup Report Files

Troubleshooting Startup Issues

Advanced Usage

Restart Scripts

Prerequisites

Using Restart Scripts

Default Configuration Values

Manual Restart

Troubleshooting Restart Issues

Project Structure

Usage

Creating Presentations

Slide Types

Custom Layouts

API Integration

Configuration

Client Configuration

Server Configuration

Building for Production

Web Application

Standalone Presentations

Troubleshooting

Common Issues

Debug Mode

Contributing

License

Support

PitchPerfect Player App

Player Features

Player Installation

Player Development

Player Usage

About

Resources

Contributing

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages