pastel-ui/DEV_SETUP.md

Development Setup

Running the Application

This application requires both the UI (Next.js) and the API (Rust) to be running.

Quick Start

Option 1: Run both together (recommended)

pnpm dev:all

Option 2: Run separately in different terminals

Terminal 1 - API:

pnpm dev:api
# or
cd ../pastel-api && cargo run

Terminal 2 - UI:

pnpm dev

Ports

• UI (Next.js): http://localhost:3000
• API (Rust): http://localhost:3001

API Setup

The Pastel API must be running on port 3001 for the UI to work. If you see "Failed to lighten color!" or 404 errors, it means the API is not running.

First Time API Setup

cd ../pastel-api

# Build the API
cargo build --release

# Run the API
cargo run

The API will start on http://localhost:3001 and the UI will automatically connect to it.

Environment Files

• UI: .env.local - Sets NEXT_PUBLIC_API_URL=http://localhost:3001
• API: ../pastel-api/.env - Sets PORT=3001

Troubleshooting

API not responding (404 errors)

Problem: UI shows "Failed to lighten color!" or console shows 404 errors

Solution:

1. Check if API is running: curl http://localhost:3001/api/v1/health
2. If not running, start it: cd ../pastel-api && cargo run
3. Check the API .env file has PORT=3001

Port already in use

Problem: Error: "Address already in use"

Solution:

# Find what's using the port
lsof -i :3000  # for UI
lsof -i :3001  # for API

# Kill the process or use different ports

API build errors

Problem: Cargo build fails

Solution:

1. Ensure Rust is installed: rustc --version
2. Update Rust: rustup update
3. Check ../pastel-api/Cargo.toml for dependencies

Features Available

Once both UI and API are running, you can access:

• Playground: http://localhost:3000/playground - Color manipulation with history
• Harmony Palettes: http://localhost:3000/palettes/harmony - Generate color harmonies
• Distinct Colors: http://localhost:3000/palettes/distinct - Visually distinct colors
• Gradient Creator: http://localhost:3000/palettes/gradient - Color gradients
• Color Blindness: http://localhost:3000/accessibility/colorblind - Simulate color blindness
• Contrast Checker: http://localhost:3000/accessibility/contrast - WCAG compliance
• Batch Operations: http://localhost:3000/batch - Process multiple colors

Development Commands

# UI commands
pnpm dev          # Start Next.js dev server
pnpm build        # Production build
pnpm lint         # Run ESLint
pnpm type-check   # TypeScript checking

# API commands (from pastel-api directory)
cargo run         # Run in dev mode
cargo build       # Build debug version
cargo build --release  # Build optimized version
cargo test        # Run tests