PawTalk
Pet adoption as three products that share one backend: a swipe-to-match mobile app, a dashboard for shelters and a landing page.
- For
- People looking to adopt, and the shelters caring for the animals. A personal product, built end to end.
- My role
- Sole designer and developer across all three.
- When
- Dec 2024
- Built with
- Expo, React Native, React, Vite, Firebase, TanStack Table, Next.js, Radix, Framer Motion
- Live at
The brief
Adoption sites feel like classified ads. PawTalk borrows the swipe-and-match pattern people already know, then lets them chat with the shelter straight away. Shelters need their own tool to list animals and answer people.
The app: swipe, match, chat
The mobile app is built with Expo and React Native, with React Navigation for the screens and Firebase for sign-in, data and real-time chat.
Swipe right on a pet you like. When it's a match, a chat with that shelter opens, so the next step is a conversation, not a form.
The dashboard for shelters
Shelters work in a React and Vite dashboard built with shadcn/ui on Radix. TanStack Table handles the long lists of animals and requests, with sorting and filtering.
Forms use react-hook-form, and photos upload to Cloudinary, so a shelter can list a new animal in a couple of minutes.
- React, Vite and TypeScript
- shadcn/ui and Radix for accessible controls
- TanStack Table for sortable, filterable lists
- Firebase for data, Cloudinary for photos
The landing page
The landing page is Next.js with Radix, Tailwind CSS and Framer Motion. It explains the idea in one screen and points people to the app.
What I'd keep
Agree the data model first. With three apps reading the same Firebase data, settling the shape of a pet, a match and a message early saved rework in all three.