Frontend Architecture

Component Hierarchy

%%{init: {'theme': 'neutral'}}%%
graph TD
    App["App.js"]
    Shell["AppShell + Sidebar"]
    Dash["DashboardPage"]
    Sched["SchedulePage"]
    Search["ActivitySearchPage"]
    Detail["ActivityDetailPage"]
    Vendor["VendorDashboardPage"]
    VendorSignup["VendorSignupPage"]

    App --> Shell
    Shell --> Dash
    Shell --> Sched
    Shell --> Vendor
    App --> Search
    App --> Detail
    App --> VendorSignup

    Dash --> ChildrenList
    Dash --> ChildDetailView
    Dash --> FamilyCalendarView
    ChildDetailView --> ChildPreferences
    ChildDetailView --> EditProfileDialog
    ChildDetailView --> CalendarEventDialog
    ChildDetailView --> EditSchoolHoursDialog
    ChildDetailView --> AddActivityDialog
    Search --> SearchFilters
    Search --> ActivityCard

Pages

DashboardPage (/dashboard)

Three-tab layout using shadcn/ui Tabs:

1. Bookings — placeholder for future booking management
2. Children — child list with add/delete, click into child detail view
3. Family Calendar — combined weekly view of all children's events

Child Detail View: per-child weekly calendar grid. Create, edit, delete CalDAV events. Week navigation (prev/next/today). Recurring event badges. Events expanded from rrules for the visible week. Child preferences (interests, likes, connections) in tabbed panel.

Components:

• ChildrenList.tsx — card grid of children
• ChildDetailView.tsx — weekly calendar for one child
• ChildPreferences.tsx — interests, likes, connections tabs
• CalendarEventDialog.tsx — create/edit event form with rrule support
• EditProfileDialog.tsx — create/edit child profile
• EditSchoolHoursDialog.tsx — school hours per day
• AddActivityDialog.tsx — multi-step recurring activity creation
• FamilyCalendarView.tsx — combined view across all children
• calendarUtils.ts — rrule expansion, week grouping, time formatting

SchedulePage (/schedule)

Per-child weekly activity grid. Select a child from dropdown, view/add recurring activities stored as WEEKLY rrule CalDAV events. Activities rendered as color-coded cards grouped by day.

ActivitySearchPage (/activities)

Meilisearch-powered search using react-instantsearch + @meilisearch/instant-meilisearch adapter.

Components:

• SearchFilters.tsx — category checkboxes, age range, price range, location
• ActivityCard.tsx — card with category badge, price, age range, session count, location

Search state managed by InstantSearch internally. Minimal Redux state for selected child (for likes).

ActivityDetailPage (/activity/:id)

Full activity detail fetched from Supabase via /api/activities/:id. Ported from Replit design.

Sections:

• Hero image with category badge
• About card with description
• Sessions list — filterable by search URL params (?days=MO,WE)
• Sidebar with location + quick booking summary
• Booking dialog with child selector (from DashboardPage.children state)
• Add-to-schedule dialog

Components:

• SessionRow — session card with book/schedule/contact buttons
• Date/time/price formatting helpers

VendorDashboardPage (/vendor)

Two-panel vendor management. Left panel: activity card grid. Right panel: drill into sessions for selected activity.

Activity CRUD: title, category, description, age range, location fields. Session CRUD: label, days-of-week toggle, time/date pickers, seats, price (sub-units). Publish flow: draft session → publish button → creates Sharetribe listing + CalDAV calendar + Meilisearch index.

Duck (VendorDashboardPage.duck.ts):

• 9 thunks: fetchVendorActivities, fetchSessionsForActivity, createNewActivity, updateExistingActivity, deleteExistingActivity, createNewSession, updateExistingSession, deleteExistingSession, publishExistingSession
• Sessions keyed by activityId: sessions: Record<string, any[]>

VendorSignupPage (/for-providers)

Public vendor interest form. Fields: org name, contact name, email, phone, program types (checkboxes), website, referral source, notes. Posts to /api/vendor-signup. Success state shows thank-you message.

State Management

Redux Ducks pattern. Each page has its own duck file:

• DashboardPage.duck.ts — children list, calendar events, family calendar, child selection, preferences
• SchedulePage.duck.ts — children list, calendar events for selected child
• ActivityDetailPage.duck.ts — single activity fetch, normalization
• VendorDashboardPage.duck.ts — vendor activities, sessions per activity, CRUD mutations

All child/calendar data flows through CalDAV API endpoints. Activity/session data flows through Supabase API endpoints. No schedule or calendar data stored in Sharetribe privateData.

UI Components

shadcn/ui primitives in src/components/ui/ (~48 components). Built on Radix UI + Tailwind CSS. Styled with CSS variables defined in src/styles/tailwind.css.

Key custom components:

• ActivityCard — activity card for search results
• SearchFilters — faceted search filter panel
• AppShell — sidebar layout shell (replaces Sharetribe LayoutSideNavigation)
• LikeButton — heart toggle for activity favourites

Routing

Routes registered in src/routing/routeConfiguration.js:

Navigation links in UserNav.js and TopbarDesktop.js.

Integration Points

Files that must be modified when adding a new page:

1. src/routing/routeConfiguration.js — route definition with loadable import
2. src/containers/pageDataLoadingAPI.js — register loadData function
3. src/containers/reducers.js — register page reducer
4. src/translations/en.json — translation keys