PackPlay

you can see all the groups you are apart of.
User has a Tinder-Like Card swiping feature to agree to what items he is bringing to the activity
user can invite others with qr code or sharable link
creating a team uuser can set all the items they will need for the activity
can create a group for a specific activity
page after user has made the decision on what iteams he is going to bring to the gathering
overall groups progress where you can see what items are beeing brought by other group members
list of all the items brought by a specific member of the team.

Inspiration

Every athlete knows the frantic, pre-game panic. You're standing by the trunk of your car, gear in hand, rushing to get to the field. You assume someone brought the match balls; someone else assumes the first-aid kit is packed. You show up, and the game is stalled.

Traditional checklists fail teams because they are static and isolated, while group chats get buried. We were inspired to solve this specific, chaotic window of time — turning high-stress logistics into a lightning-fast, coordinated team flow.

What it does

PackPlay is a mobile-first, real-time coordination app that ensures sports teams never leave equipment behind.

Athletes easily join groups via shareable links or QR codes to manage both personal and shared gear.
During a time-pressured packing session, the app presents a distraction-free swipe interface.
If a teammate unexpectedly marks an item as forgotten, a live alert instantly interrupts other packing sessions, allowing another member to take over the missing gear with one tap — updating the group's readiness score in real time.

How we built it

We architected the frontend as a mobile-first React application built with Vite and Tailwind CSS, organized inside a highly scalable Nx monorepo.

To keep data perfectly synchronized across the squad without heavy local data replication, we paired TanStack Query with Socket.IO Client for real-time cache invalidation, letting the NestJS backend remain the absolute source of truth.

Zustand — strictly for ephemeral UI state (swipe indexes, undo buffers)
React Hook Form + Zod — strict validation
Framer Motion — responsive, low-friction mobile gestures

Challenges we ran into

Our biggest hurdle was managing fractional quantities and splitting responsibility among multiple members under volatile mobile network conditions. If a team requires several units of an item and multiple users claim different partial amounts, the UI has to accurately display the exact uncovered deficit rather than showing a generic, misleading checkmark.

Engineering the live takeover notifications was equally challenging; we had to ensure these real-time interruptions were completely non-destructive, accessible, and resilient against sudden socket disconnections mid-swipe — without losing the user's active progress.

Accomplishments that we're proud of

We are incredibly proud of achieving a true GitOps-driven deployment workflow using Terraform and Ansible to safely host our infrastructure via Google Cloud Identity-Aware Proxy (IAP).

On the application side, we successfully built a zero-collision UX where a live forgotten-item event immediately and cleanly reroutes to a teammate's device, successfully demonstrating our core goal: instant, real-time responsibility handoff under pressure without breaking the active user flow.

What we learned

We learned the immense value of mapping explicit backend error tokens into human-friendly UI alerts rather than throwing raw system messages:

SHARED_ITEM_ALREADY_COVERED → "This item is already fully covered by your team."

We also discovered that strict accessibility engineering — ensuring every fluid swipe gesture has accessible, tactile button equivalents (Packed / Not packed) and focus-trapped dialogs — drastically increases the overall resilience, testability, and desktop compatibility of a mobile-first application.

What's next for PackPlay

Offline-first syncing using service workers, so athletes can continue swiping their checklists even deep inside concrete locker rooms or remote fields with poor cell service.
Predictive equipment templates based on different sporting disciplines and weather forecasts — taking the guesswork out of packing entirely.