Pet life does not stay inside one category. A person might need a community answer, a local service, an adoption listing, a donation flow, or a purchase. Korra starts from the messier reality that those activities overlap.
The hard part is not any individual screen. It is making a feed, chat, map, adoption flow, donations, profiles, and checkout feel like parts of the same place. Each feature has different data, urgency, and context; the product still has to feel legible when you move between them.
The product surface
| Surface | What it supports |
|---|---|
| Community | Posts, updates, and rescue/support content |
| Chat | real-time chat with image attachments and read receipts |
| Services | A pet-services map with filters, details, and directions |
| Marketplace | Stripe-powered checkout and order tracking |
| Adoption | Browsing with filters and clear contact paths |
| Donations | Giving flows for animal-welfare organizations |
| Profiles | User and pet profiles with activity history |
The system underneath
Korra is built with Next.js 15, React 19, TypeScript, and Tailwind CSS. Supabase handles auth, PostgreSQL, and real-time messaging. Stripe processes payments, Leaflet powers the map, and TanStack Query manages client-side data. Radix primitives and shadcn components keep the UI consistent, with dark mode included.
The breadth is the point. A product like this exposes the handoffs: permissions, state boundaries, real-time updates, transactions, and the moments when one user flow becomes another. It made me design the connections, not just the screens.