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.

Key Features

• • 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

Tech Stack

Challenges

• • Loading all upazila options upfront caused a 3–4 second render delay on low-end Android devices
• • Firebase auth state hydration on hard refresh caused a flash of the unauthenticated layout before the redirect fired client-side

Solutions

• • 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
• • 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

Future Improvements

• • Real-time availability calendar per caregiver with booking slot management
• • In-app messaging between booker and caregiver before booking confirmation
• • Review and rating system accessible post-booking completion