mirror of
https://github.com/Dvorinka/excalidraw-full.git
synced 2026-06-03 22:02:57 +00:00
feat: full project sync - CI fixes, frontend, workspace API, and all changes
This commit is contained in:
@@ -0,0 +1,74 @@
|
||||
# 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
|
||||
|
||||
```bash
|
||||
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
|
||||
```
|
||||
Reference in New Issue
Block a user