Hansel & Gretel

Inspiration

What it does Project Story

## Inspiration

Every parent knows the anxiety of letting their child take public transport alone for the first time. You don't know if they got on the right bus, whether it's running late, or if they actually got off at the right stop. Existing navigation apps like Google Maps are built for adults — they assume the user already knows how to read a route, handle a transfer, and make decisions under time pressure. We wanted to build something that removes all of that cognitive load for the child, while giving parents real-time peace of mind.

## What it does

Hansel & Gretel is a two-screen app for parents and children. The parent sets up a child profile — choosing allowed transport modes, maximum walking distance, and how much buffer time to add before departure — then saves a few frequent destinations like Home or School. They share a single link with their child.

The child opens that link on any phone browser (no download, no login) and sees only large destination buttons. One tap plans the entire journey, confirms the best route automatically, and shows a live map with a green walking line to the boarding stop and step-by-step directions. The child taps "I'm at the stop", then "I'm on the bus", then "Finished journey!" when they arrive.

Meanwhile the parent's dashboard updates in real time — showing the child's location on a map, the current state of the journey, and push notifications at every milestone. If no approved transport mode is available, the child can request parent approval for an alternative route directly from the app.

## How we built it

Frontend: React + Vite, deployed on Vercel. Two separate views — a parent dashboard and a child-facing journey screen — built as a single app with Mapbox GL JS for the live map.
Backend: Node.js + Express on Railway. Handles all trip planning, real-time state, and GPS relay between devices. An in-memory journey store keeps the active trip state without needing a round-trip to the database on every GPS ping.
Transport data: NSW Transport Open Data APIs for trip planning, stop search, live departures, and real-time vehicle positions via GTFS-RT feeds.
Mapping: Mapbox Directions API for road-snapped walking routes with turn-by-turn step instructions that update as the child walks.
Database: Supabase (PostgreSQL) for child profiles, preferences, and saved destinations. Supabase Auth for parent login.

## Challenges

NSW API mode filtering — The NSW Trip Planner API accepts mode restriction parameters but silently ignores them, returning all modes regardless. We had to implement a full server-side post-filter on every response to enforce the parent's allowed modes.

Real-time map stability — Our first attempt at adding walking step instructions caused the Mapbox GL map to disappear. The root cause was two separate React setState calls in an async callback, which triggered sequential re-renders that broke the map's internal state. The fix was merging both into a single state object so only one re-render fires per fetch.

Trip scoring — Getting the preference-based trip ranking right took several iterations. The first version had a buffer penalty that completely dominated all other factors, making familiarity and walk distance effectively meaningless. We rewrote the scorer so every preference contributes on the same proportional scale.