Appearance
UI Prototype
The UI prototype (apps/ui-prototype/) is a design exploration sandbox — not a production application. It demonstrates future UI patterns, page layouts, and user flows using mock data, and serves as a visual specification before features are built in the production webapp (apps/webapp).
Purpose
The prototype exists to:
- Explore and validate UI patterns and user flows visually
- Iterate on component designs without backend dependencies
- Serve as a visual specification for production implementation
- Test responsive behavior and interaction patterns with realistic mock data
Developers building new features in apps/webapp should look at the prototype first to understand the intended design direction.
How to Access
| URL | Description |
|---|---|
https://lab.jubiloop.localhost | Docker Stack (full-stack mode) |
http://localhost:8080 | Host-mode / infra-only |
The prototype runs as the jubiloop_dev_ui_prototype Docker service in the full stack. In infra-only mode, start it separately: npm run dev:prototype or npm run dev -- --filter=ui-prototype.
Tech Stack
The prototype deliberately uses a different stack from the production webapp to avoid coupling:
| Aspect | Prototype (ui-prototype) | Production (webapp) |
|---|---|---|
| React | 18 | 19 |
| Router | React Router v6 | TanStack Router (file-based) |
| Tailwind | v3 | v4 |
| Data | Mock objects + localStorage | Real API via @jubiloop/api-client |
| Auth | Simulated (prop-based) | Better Auth sessions |
| UI components | Own src/components/ui/ (shadcn/ui) | Shared from @jubiloop/ui |
| State | useState + localStorage | TanStack Query + real API |
| Tests | None | Vitest |
Fully independent from shared packages
The prototype does not import @jubiloop/ui, @jubiloop/api-client, or @jubiloop/shared-types. It is self-contained with its own component library and all mock data hardcoded.
Features Demonstrated
The prototype covers 21 routes across public, auth, and app sections.
Core App Pages
- Dashboard (
/dashboard) — Event cards (pinned, active, shared), quick actions, templates, upcoming deadlines, empty states - Event Creation (
/events/new) — Multi-field event creation form - Event Detail (
/events/:id) — The centrepiece page, with 5 tabs:- Idea Blocks — Modular planning blocks (Venue, Catering, Entertainment, etc.), each containing tasks, vendor assignments, notes, and drag-and-drop reordering. Includes AI-assisted content generation (design mockup).
- Schedule — Drag-and-drop timeline/calendar with day views and unscheduled tasks
- Budget — Per-item estimated vs. actual amounts, vendor-linked line items, auto-calculated totals
- Guests — Guest list management with RSVP status tracking, export, and invite resend
- Portal — Guest portal settings and section customisation
- Guest Portal (
/events/:id/guest-portal) — Shareable guest-facing page with RSVP form, photo gallery (masonry grid), polls, music queue/song requests, comment wall, announcements, and activity ticker
Marketing / Public Pages
Landing page, early access signup, pricing, demo walkthrough, blog home, full blog system (post, author, category pages), FAQ, contact, terms, privacy.
Key Design Concepts
The prototype explores concepts that will be built into the production webapp:
| Concept | Description |
|---|---|
| Idea Blocks | Core planning unit — modular segments (Venue, Catering, etc.) each with tasks and vendor assignments. Replaces free-form notes with structured, actionable items. |
| Plan Version System | Create, switch, rename, and delete "plan versions" — essentially named branches for event planning. |
| Guest Portal | A configurable, shareable page for event guests (RSVP, photos, polls, music, comments). |
| Checkpoint System | Save and restore named snapshots of the event planning state. |
| AI Integration | Contextual AI chat bubble and block-level content generation (design mockup only — no real API calls). |
| Collaborator Management | Invite collaborators with role-based access (owner, editor, viewer). |
Relationship to Production Webapp
The prototype is a read-only design reference. Code from apps/ui-prototype/ is not shared with or imported into apps/webapp.
When implementing a feature in production:
- Browse the relevant prototype page/component for design intent and interaction patterns
- Build the production version in
apps/webappusing the real API,@jubiloop/uicomponents, TanStack Router file-based routes, and TanStack Query for data fetching - The prototype's component implementations are useful for understanding the UX, but the production code will differ significantly (typed API responses, Better Auth sessions, shared UI library, etc.)
See Also
- Web App Overview — Production webapp architecture
- Event Planning Data Models — The data models behind these features
- Event Planning Backend — Backend implementation
- Local Development Setup — Running the prototype with the Docker Stack