# Collaborative Classroom Whiteboard — Frontend Build Prompt ## Interface Overview Build a **collaborative brainstorming whiteboard application** designed specifically for **students and educators** in classroom settings. The interface should feel approachable, energetic yet focused, and intuitive enough for users of all technical skill levels. The app presents a full-screen canvas drawing experience with a clean toolbar, layer management panel, and sketch organization system — all powered by mock/simulated data with no backend required. > **Core Experience Goal:** A student or teacher should be able to open the app, immediately understand how to start drawing, and feel like they're working in a shared, live classroom space — even with simulated collaboration. --- ## Visual Design ### Color Palette - **Primary Background:** Soft off-white `#F8F9FA` for the canvas area — easy on the eyes during long sessions - **Toolbar/UI Chrome:** Deep slate blue `#1E2A3A` for sidebars and toolbars — professional and focused - **Accent Color:** Vibrant teal `#00BFA6` for active states, selected tools, and CTAs - **Secondary Accent:** Warm amber `#FFB347` for notifications, highlights, and collaborative presence indicators - **Canvas Surface:** Pure white `#FFFFFF` with a very subtle dot-grid pattern to mimic real whiteboards - **Text:** `#2D3748` for primary text, `#718096` for secondary/muted labels ### Typography - **Primary Font:** `Inter` — clean, modern, highly readable at small UI sizes - **Display/Header Font:** `Nunito` — friendly, rounded feel appropriate for educational settings - **Font Sizes:** 13px for toolbar labels, 15px for panel text, 24px for modal headings ### Visual Style - **Rounded corners** (`border-radius: 12px`) on cards, panels, and modals - **Subtle drop shadows** on floating toolbars and panels (`box-shadow: 0 4px 20px rgba(0,0,0,0.08)`) - **Glassmorphism** effect on floating tool options panels (`backdrop-filter: blur(12px)`) - Minimalist, distraction-free aesthetic — the **canvas is the hero**, UI chrome should recede - Smooth micro-animations on all interactive elements (100–200ms transitions) --- ## User Experience Flow ### 1. Landing / Sketch Dashboard - User arrives at a **"My Sketchboards" dashboard** — a grid of saved sketch cards - A prominent **"+ New Sketchboard"** button in the top right - Mock sketches are pre-loaded to demonstrate the layout - Each card shows: thumbnail preview, sketch name, last edited date, and collaborator avatars ### 2. Opening / Creating a Sketch - Clicking **"+ New Sketchboard"** opens a small modal asking for a sketch name and optionally selecting a template (blank, lined, grid, dotted) - Clicking an existing sketch card opens the full **canvas editor view** - Smooth page transition animation between dashboard and editor ### 3. Canvas Editor View - Full-screen whiteboard canvas takes up the majority of the viewport - **Left sidebar:** drawing tools - **Right sidebar (collapsible):** layer management panel - **Top bar:** sketch name (editable inline), collaborator presence, undo/redo, share button, and back-to-dashboard button - **Bottom floating bar:** zoom controls and canvas navigation ### 4. Saving & Returning - Auto-save indicator in the top bar (simulated: shows "Saving..." then "Saved ✓") - Manual save via `Ctrl+S` / button also supported - Returning to dashboard shows updated thumbnail and last-edited timestamp --- ## Component Structure ### `<Dashboard />` - `<SketchGrid />` — responsive grid of sketch cards - `<SketchCard />` — thumbnail, title, metadata, hover actions (open, rename, delete) - `<NewSketchModal />` — name input, template selector, create button - `<DashboardHeader />` — app logo, user avatar, search bar ### `<CanvasEditor />` - `<EditorTopBar />` — sketch title, collaborator avatars, undo/redo buttons, save status, back button - `<DrawingCanvas />` — the main interactive HTML5 Canvas element (full drawing functionality) - `<ToolSidebar />` — vertical icon toolbar on the left - `<LayerPanel />` — collapsible right sidebar with layer management - `<ZoomControls />` — floating bottom-center bar - `<ContextMenu />` — right-click menu on canvas for element actions ### `<ToolSidebar />` Contains tool buttons for: - **Pen tool** — with sub-options: stroke width slider, color picker - **Eraser tool** — with size option - **Shape tools** — rectangle, circle, triangle, line, arrow - **Text tool** — click-to-place text boxes - **Select/Move tool** — to select and reposition elements - **Color palette** — quick-access swatches + custom color picker ### `<LayerPanel />` - List of layers (mock: "Background", "Layer 1", "Layer 2") - Each layer row: visibility toggle (eye icon), lock toggle, layer name (editable), drag handle for reordering - **"+ Add Layer"** button at the bottom - Active layer highlighted in teal accent ### `<CollaboratorPresence />` *(simulated)* - 3–4 animated avatar bubbles in the top bar representing "online" classmates - Each avatar has a colored cursor indicator - Mock colored cursors appear on canvas with name labels, moving subtly to simulate live collaboration - Tooltip on hover shows collaborator name and "Active now" --- ## Mock Data Requirements ### Pre-loaded Sketch Cards (Dashboard) ``` [ { id: 1, name: "Math Class - Geometry Lesson", lastEdited: "2 hours ago", collaborators: 4, thumbnail: [placeholder drawing] }, { id: 2, name: "Biology Diagram - Cell Structure", lastEdited: "Yesterday", collaborators: 2, thumbnail: [placeholder drawing] }, { id: 3, name: "Brainstorm: Climate Project", lastEdited: "3 days ago", collaborators: 6, thumbnail: [placeholder drawing] }, { id: 4, name: "History Timeline - WW2", lastEdited: "1 week ago", collaborators: 1, thumbnail: [placeholder drawing] }, { id: 5, name: "Quick Notes - Tuesday Lecture", lastEdited: "2 weeks ago", collaborators: 3, thumbnail: [placeholder drawing] } ] ``` ### Mock Collaborator Users ``` [ { name: "Ms. Johnson", avatar: "MJ", color: "#FF6B6B" }, { name: "Alex K.", avatar: "AK", color: "#4ECDC4" }, { name: "Priya S.", avatar: "PS", color: "#FFE66D" }, { name: "Marcus T.", avatar: "MT", color: "#A8E6CF" } ] ``` ### Mock Layers (inside canvas editor) ``` ["Background", "Teacher Notes", "Student Work", "Diagrams"] ``` --- ## Drawing Canvas Functionality > All drawing must be implemented using the **HTML5 Canvas API** or a lightweight canvas library such as **Fabric.js** or **Konva.js**. No backend calls required — all state is managed in-browser. ### Pen Tool - Smooth freehand drawing with mouse/touch input - Pressure simulation via velocity-based stroke width variation - Color and stroke width configurable from the tool options popover ### Eraser Tool - Pixel eraser that removes drawn content - Adjustable eraser size ### Shape Tools - Click and drag to draw: **rectangles, circles, triangles, lines, arrows** - Hold `Shift` to constrain proportions (perfect square/circle) - Shapes are selectable and movable after placement - Fill color and stroke color independently configurable ### Text Tool - Click anywhere on canvas to place a text box - Inline editing with font size and bold/italic options - Text boxes are movable and resizable ### Undo / Redo - Full undo/redo stack (minimum 50 steps) - `Ctrl+Z` / `Ctrl+Y` keyboard shortcuts - Undo/Redo buttons in the top bar with visual disabled state when stack is empty ### Layer System - Each layer acts as an independent drawing surface - Drawing only affects the **currently active layer** - Layer visibility toggle hides/shows that layer on canvas - Layer lock prevents accidental editing --- ## Responsive Design ### Desktop (Primary — 1280px+) - Full layout: left toolbar + canvas + right layer panel all visible simultaneously - Canvas fills remaining space fluidly ### Tablet (768px – 1279px) - Layer panel **collapses by default** — accessible via toggle button - Toolbar remains visible but icon labels hide (icons only) - Canvas touch input fully supported ### Mobile (< 768px) - Dashboard switches to a **single-column card list** - Canvas editor enters a **simplified mode**: bottom toolbar replaces side toolbar - Layer panel accessible via a bottom sheet drawer - Touch drawing fully supported with palm rejection visual indicator --- ## Interactive Elements & Micro-interactions ### Tool Selection - Selected tool highlights with teal accent background + subtle scale-up animation - Tool options panel slides in **below or beside** the selected tool button with a spring animation ### Canvas Hover States - Cursor changes dynamically based on active tool (pencil cursor for pen, crosshair for shapes, etc.) - Simulated collaborator cursors drift slowly around the canvas with name labels ### Save Indicator - Top bar shows **"Saving..."** with a spinner for 1.5 seconds, then transitions to **"Saved ✓"** in green - Triggered on any drawing action (debounced to every 30 seconds in simulation) ### New Sketch Modal - Slides in from center with a backdrop blur overlay - Template cards have a hover lift effect - "Create" button pulses once when sketch name is entered ### Sketch Card Hover (Dashboard) - Card lifts with enhanced shadow - Overlay appears with **"Open"**, **"Rename"**, and **"Delete"** action buttons - Delete triggers a confirmation micro-modal ### Undo/Redo Buttons - Visually disabled (grayed out, no pointer events) when respective stacks are empty - Brief shake animation if user attempts to undo with empty stack ### Layer Drag-to-Reorder - Drag handle appears on hover - Dragged layer shows a ghost preview - Drop target highlights with a teal line indicator --- ## Design Guidelines & Constraints - **Accessibility:** All interactive elements must have visible focus states. Color contrast ratios must meet WCAG AA standards. Toolbar icons must have `aria-label` attributes and visible tooltips on hover. - **Educational Tone:** Avoid overly corporate design language. Use friendly, encouraging microcopy (e.g., "Start creating something amazing!" for empty states). - **Performance Feel:** Even though canvas operations can be heavy, UI chrome (toolbar, panels) must feel **instantly responsive**. Use CSS transitions over JavaScript animations for UI elements. - **Empty State:** If no sketches exist on the dashboard, show an illustrated empty state with a friendly message and a large "Create Your First Sketchboard" CTA button. - **Keyboard Shortcuts:** Display a keyboard shortcut reference panel accessible via `?` key or a help button — showing shortcuts for all tools and actions. - **No login screens or auth flows** — app opens directly to the dashboard with mock user data pre-loaded. --- IMPORTANT BUILD INSTRUCTIONS: - Focus on CORE features only. Do not add extra polish, advanced features, or nice-to-haves. - Do NOT overthink the design or architecture. Keep it simple and functional. - Write all files in parallel where possible. Minimize thinking time. - Skip animations, transitions, and complex interactions unless explicitly requested. - Use simple, clean components. No over-engineering. - Target completion in under 3 minutes. Speed over perfection. - Ship a working MVP, not a feature-complete product.
Now I'll build all the components in parallel. Let me start by updating the globals and layout, then build all the components.
Now let me build all the components in parallel:
The collaborative classroom whiteboard is fully built. Here is a summary of what was created:
Dashboard — A responsive grid of 5 pre-loaded sketch cards with SVG thumbnail previews, hover overlays for Open/Rename/Delete actions (with delete confirmation), search, and a "New Sketchboard" modal with 4 template choices (Blank, Dot Grid, Lined, Grid).
Canvas Editor — Full HTML5 Canvas drawing with 9 tools (pen, eraser, rectangle, circle, triangle, line, arrow, text, select), per-layer rendering, undo/redo stack (50 steps), keyboard shortcuts (P/E/R/C/L/A/T/V + Ctrl+Z/Y/S), and a debounced "Saving... → Saved ✓" indicator.
Layer Panel — 4 mock layers with visibility toggle, lock toggle, inline rename (double-click), drag-to-reorder, and add/delete controls. The right panel is collapsible via the Layers button in the top bar.
Collaborator Presence — 4 animated avatar bubbles with online indicators and name tooltips in the top bar. The theme uses deep slate blue #1E2A3A for chrome, teal #00BFA6 for accents, and amber #FFB347 for highlights with Inter + Nunito fonts.