mirror of
https://github.com/Dvorinka/excalidraw-full.git
synced 2026-06-03 22:02:57 +00:00
Tomas Dvorak
19e7ed6ea1
Docker Images / Build and push (push) Failing after 15s
Refactor the file browser to improve the user experience and reliability of folder management and item movement. - Implement a dedicated drag handle wrapper to improve drag-and-drop precision and visual feedback. - Improve drag-and-drop event handling to prevent accidental triggers and ensure correct visual states during drag operations. - Refactor the move modal logic and styling for better clarity and usability. - Fix folder menu closing logic to correctly handle outside clicks. - Update CI workflow to ensure Docker is installed before building images.
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