Care.xyz
Caregiver booking with cascading location filters and middleware-level route protection.
Overview
Service marketplace for booking childcare and elderly care providers across Bangladesh. Location filtering cascades across three administrative tiers — division → district → upazila — loading each tier's options lazily on parent selection. This avoids the performance cost of exposing thousands of upazila records on initial load while keeping the UX responsive. Route protection runs in Next.js middleware before page render; unauthenticated users never receive protected HTML. Pricing adjusts dynamically per service type and care duration.
What it does
- Cascading location filter: Division → District → Upazila with lazy-loaded option sets per tier
- Dynamic pricing engine — base rate modified by service type, care duration, and location
- Firebase Authentication with Google OAuth and email/password providers
- Next.js middleware-based route protection — redirect at the edge before page HTML is served
- Service listings with availability status and caregiver profile pages
Problems and how I solved them
Problem
Loading all upazila options upfront caused a 3–4 second render delay on low-end Android devices
Fix
Switched to on-demand fetching per filter level — district options load only once a division is selected; each tier's dataset is small enough for a single fast fetch without pagination
Problem
Firebase auth state hydration on hard refresh caused a flash of the unauthenticated layout before the redirect fired client-side
Fix
Auth state is read from a cookie set on login; Next.js middleware checks the cookie server-side before rendering, eliminating the client-side auth flash entirely