Excalidraw/frontend

Excalidraw FULL Frontend

Production-grade frontend for the Excalidraw FULL overhaul.

Stack

• React 19 + TypeScript
• Vite (fast HMR, optimized builds)
• SCSS Modules (scoped styles)
• Zustand (state management)
• React Router (routing)
• Lucide React (icons)

Design System

Excalidraw's hand-drawn aesthetic preserved:

• Island UI: Floating panels with subtle shadows
• Primary: Purple (#6965db)
• Typography: Inter font, clear hierarchy
• Shadows: Multi-layer island shadows
• Radii: Consistent 6-12px rounding

Pages

Route	Page	Features
/	Dashboard	Stats, recent drawings, activity, templates
/login	Login	Email/password + GitHub OAuth
/signup	Signup	Account creation
/files	File Browser	Folder tree, grid/list view, drawing cards
/team	Team Settings	Members, roles, invites
/settings	User Settings	Profile, account, notifications, appearance
/templates	Templates	Gallery with categories
/drawing/:id	Editor	Canvas placeholder (integrate Excalidraw)

Quick Start

npm install
npm run dev        # Development server at http://localhost:3000
npm run typecheck  # Type checking
npm run build      # Production build

API Integration

Update src/services/api.ts endpoints to match your Go backend:

• GET /api/auth/me - Current user
• POST /api/auth/login - Login
• GET /api/drawings - List drawings
• GET /api/teams - List teams

The Vite proxy forwards /api to http://localhost:3002.

Canvas Integration

To integrate the existing Excalidraw canvas:

1. Install package: npm install @excalidraw/excalidraw
2. Import in Editor.tsx: import { Excalidraw } from '@excalidraw/excalidraw'
3. Replace the placeholder div with the <Excalidraw /> component
4. Wire up onChange to save via API

Project Structure

src/
├── components/    # Reusable UI (Button, Input, Card, Layout)
├── pages/         # Route components
├── stores/        # Zustand state
├── services/      # API clients
├── types/         # TypeScript interfaces
└── styles/        # SCSS variables, global styles