Web Summit Pack Coordinator

A lightweight pack-coordination layer for live event attendees, built as a focused companion to the official Web Summit app. Form a pack with a join code, curate a shared event wishlist, broadcast quick status pings, see your friends on a live floor plan, and let AI surface the talks your whole pack should attend together.

Built as a hackathon MVP for Web Summit Vancouver 2026.

What's in this repo

A mobile-first, mockup-driven web app:

• Vite + React 18 + TypeScript
• Tailwind CSS for the dark + purple visual language
• No backend — all pack state is mock data + localStorage, so the demo runs offline and deploys as static files anywhere
• Real data: all 515 sessions from events.json (scraped from the Web Summit Vancouver site) drive the wishlist, AI match recommendations, search, and event detail expansions

On desktop, the app renders inside a centered mobile-shaped viewport with black gutters on either side (it's meant to demo a phone feature). On real mobile, it fills the screen.

Features (mockup-first)

The bottom navigation has 5 tabs; only the Pack tab is active in this MVP — the others (Home, Schedule, Scan, Profile) are rendered disabled to keep the demo focused on the new feature.

Inside the Pack tab there are four sub-tabs:

Tab	What it shows
Events	"Event Overlap" — events the pack wants to attend, sorted by going-count. Filter by day & format. Tap Open day timeline for the calendar view, or Browse all events to search across 515 sessions.
Status	Live pack activity feed with relative timestamps and online dots, plus a 5-preset Quick Status grid for one-tap broadcasts.
Map	Stylised top-down floor plan of the venue with member pins, status captions, a tap-to-pin mode, and a "Pick zone" sheet for named-zone shortcuts.
AI Match	Pre-computed top-3 recommendations with "Why this match?" reasoning. "Refresh Matches" rotates between two pre-baked candidate sets.

Day Timeline (inside the Events tab)

The "Open day timeline" tile at the top of the Events tab opens a vertical 8 AM → 10 PM calendar for the selected day.

• Wishlist events with ≥ 3/4 pack overlap are pre-slotted as filled purple blocks (solid for unanimous, lighter for majority). Lower-attendance picks stay in the Event Overlap list to keep the timeline readable as "the shared day plan".
• Tap any empty slot to drop a 30-minute purple selection snapped to 10-minute increments. Drag the grip handle at the bottom of the selection to extend it.
• The purple arrow button on the right of the selection scrolls down to a Slot Picker that ranks candidate events by time fit and lightweight keyword similarity to the pack's existing picks — so the events it suggests feel related to what the pack has already chosen.
• Bookmarking a candidate from the Slot Picker uses the same wishlist toggle as the rest of the app.

A demo join code (WSV7XK) is pre-filled on the landing screen — tap Join Pack to enter. Leave Pack resets state.

Running locally

npm install
npm run dev

Open http://localhost:5173/.

Production build

npm run build
npm run preview   # quick smoke-test of the built bundle

The build emits to dist/. It's a fully static SPA — no runtime backend required.

Deploying

Vercel (recommended, ~30 seconds)

1. Push this repo to GitHub.
2. Import the project on Vercel.
3. Defaults are correct (framework: Vite, build command: npm run build, output: dist).
4. vercel.json already declares an SPA fallback so any path resolves to index.html.

GitHub Pages

The app also works on GitHub Pages because vite.config.ts sets base: "./" and there's no client-side router that depends on path-based URLs.

npm run build
# publish the dist/ folder to your gh-pages branch (e.g. via gh-pages package or an Action)

Project structure

src/
  data/
    events.json         all 515 scraped sessions
    mockPack.ts         members, statuses, wishlist, AI matches, map positions
  hooks/
    usePackState.ts     central reducer with localStorage persistence
  utils/
    events.ts           typed event helpers, format/colour lookups
    time.ts             clock formatting, day labels, relative times
    calendar.ts         minute math, 10-min snap, keyword similarity for the Day Timeline
  layout/
    MobileFrame.tsx     mobile-aspect frame for desktop
    BottomNav.tsx       5-tab nav, only "Pack" enabled
  screens/
    JoinScreen.tsx      landing with pre-filled join code
    PackScreen.tsx      header + tab content + bottom nav
  features/pack/
    PackHeader.tsx      join code card, packmates row
    TabBar.tsx          Events | Status | Map | AI Match
    EventsTab.tsx       overlap list + Day Timeline + browse-all-events modes
    CalendarView.tsx    Day Timeline screen (day chips + timeline + slot picker)
    TimelineCanvas.tsx  scrollable 8AM–10PM grid, wishlist blocks, selection handle
    CandidateSheet.tsx  ranked slot-picker list (overlap fit + keyword similarity)
    StatusTab.tsx       live status panel + activity feed
    MapTab.tsx          floor plan + pins + zone picker
    AIMatchTab.tsx      ranked picks with "Why this match?"
    EventCard.tsx       shared card with overlap pill + bookmark
    FilterSheet.tsx     format filter bottom sheet
    QuickStatusBar.tsx  5 preset pills
    FloorPlan.tsx       stylised SVG of the venue

What's not in v1

These are explicit non-goals for the hackathon MVP (the design leaves room for them to slot in later):

• Real-time sync. usePackState is a single hook backed by localStorage. Replacing the reducer with a Supabase channel would make this multiplayer without changing any UI.
• Claude API for AI Match. Reasoning text is pre-computed. The shape is set up so currentAiMatches could be replaced with a live API call.
• Vision-based location. The map supports tap-to-pin and named-zone selection. Auto-detection from a photo (Claude Vision on the venue's signage) is the natural next layer.
• Other bottom-nav tabs. Home, Schedule, Scan and Profile are disabled in the nav so the demo focus stays on the new pack feature.

Credits

• Event data scraped from https://vancouver.websummit.com/sessions/van26/
• Avatar placeholders served by https://pravatar.cc/
• Icons by Lucide