mirror of
https://github.com/Dvorinka/excalidraw-full.git
synced 2026-07-28 23:23:47 +00:00
Tomas Dvorak
462a70933d
This commit introduces a significant update to both the frontend and backend, focusing on enhanced user engagement and a consistent visual identity. Key changes include: - **Frontend UI/UX Refactor**: - Implemented a "hand-drawn" aesthetic across the entire application using CSS overrides, custom SVG charts, and specific border/shadow styles to match the Excalidraw experience. - Added a new notification system in the Header to display user updates. - Enhanced the Template Picker with more variety and improved interaction models. - Added a "Presentation Mode" in the Editor. - Improved Dashboard visualizations with hand-drawn style sparklines and charts. - Added modal dialogs for creating drawings and templates with custom names. - **Backend & API Enhancements**: - Implemented full CRUD support for custom templates, allowing users to save their drawings as reusable templates. - Added a notification service with endpoints to list, mark as read, and mark all as read. - Updated the API client to handle more robust JSON responses and error states. - Improved CORS/Origin validation in the HTTP middleware to handle proxy headers (`X-Forwarded-Host`, `X-Forwarded-Proto`) more reliably. - **Database & Infrastructure**: - Added a new PostgreSQL migration for the `notifications` table. - Updated the data models in the workspace to support templates (including snapshot storage) and notifications. - Updated `.gitignore` to exclude graphify cache and AST files.
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