mirror of
https://github.com/Dvorinka/excalidraw-full.git
synced 2026-07-29 07:33:47 +00:00
Tomas Dvorak
71dda9d45d
Docker Images / Build and push (push) Failing after 17s
Implements an autosave mechanism to prevent data loss by periodically sending snapshots of the drawing to the backend. This includes new API endpoints on the server and updated frontend services. Additionally, improves the editor experience with: - Enhanced CSRF protection and origin validation in the backend. - Fix for React "Maximum update depth exceeded" error during scene mutations using a mutation guard. - New presentation slide thumbnails and navigation UI. - Expanded template library with various brainstorming layouts. - Refined dashboard statistics and layout styling. - Improved sidebar logo using SVG for better scaling.
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 userPOST /api/auth/login- LoginGET /api/drawings- List drawingsGET /api/teams- List teams
The Vite proxy forwards /api to http://localhost:3002.
Canvas Integration
To integrate the existing Excalidraw canvas:
- Install package:
npm install @excalidraw/excalidraw - Import in
Editor.tsx:import { Excalidraw } from '@excalidraw/excalidraw' - Replace the placeholder div with the
<Excalidraw />component - Wire up
onChangeto 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