Dogs have always been more than just pets. They become our companions, our walking partners, our stress relievers, and sometimes the reason we smile after a difficult day.
For International Dog Day, I wanted to build something that celebrates that connection.
I built PawMatch, an interactive dog breed discovery experience that helps people explore different dog breeds based on their personalities, traits, and lifestyles.
Most people choose dogs because they see a cute picture and think, "I want this one."
Some dogs need hours of exercise. Some are calm apartment companions. Some are playful chaos machines. Some are independent explorers.
PawMatch tries to make discovering breeds feel less like browsing a database and more like meeting different companions.
Users can browse through a collection of dog breeds displayed as interactive cards.
Each breed shows: Personality traits Energy level Size Lifespan Lifestyle compatibility
The goal was to make every breed feel like a character rather than just a data entry.
Users can save breeds they connect with and create their own personal shortlist.
Favorites are stored using localStorage, allowing users to keep their choices even after refreshing the page.
The Surprise Me feature randomly introduces users to a breed they might have never explored before.
This helps narrow down choices and discover breeds that fit different lifestyles.
The project is divided into components like: BreedCard BreedGrid BreedModal SearchBar CompareBar DogFact
Each component has a specific responsibility, making it easier to maintain and extend the project.
The project uses structured breed data containing: Breed information Personality traits Energy levels Lifestyle recommendations
Instead of showing users a wall of information, I focused on creating interactions around the data.
I used Framer Motion to add subtle interactions: Card hover animations Modal transitions Smooth UI movement