This is a submission for Weekend Challenge: Dog Days Edition

What I Built

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.

The idea came from a simple observation:

Most people choose dogs because they see a cute picture and think, "I want this one."

But every dog has a different personality.

Some dogs need hours of exercise. Some are calm apartment companions. Some are playful chaos machines. Some are independent explorers.

A dog is not just a breed. It is a personality.

PawMatch tries to make discovering breeds feel less like browsing a database and more like meeting different companions.

Demo

The experience includes:

🐕 Explore Dog Breeds

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.

❤️ Save Your Favorites

Finding a companion is not always an instant decision.

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.

🎲 Surprise Me

Sometimes people don't know what they are looking for.

The Surprise Me feature randomly introduces users to a breed they might have never explored before.

Because sometimes the perfect match is the one you weren't searching for.

🔍 Search and Filter

Users can explore breeds based on:

• Name
• Energy level

This helps narrow down choices and discover breeds that fit different lifestyles.

Code

GitHub Repository:

Konarksharma13 / Pawmatch

🐾 PawMatch - Find Your Perfect Dog Companion

PawMatch is an interactive dog breed discovery platform designed for International Dog Day. Explore diverse dog breeds, learn their unique personalities, and find the perfect companion that matches your lifestyle and preferences.

✨ Features

🔍 Intelligent Search & Filtering

• Search breeds by name in real-time
• Filter by energy level (Low, Medium, High)
• Responsive search results with instant feedback

❤️ Favorites Management

• Save your favorite breeds with a single click
• Favorites persist across sessions using localStorage
• Quick visual indicators for favorited breeds

🆚 Breed Comparison

• Compare up to 2 dog breeds side-by-side
• Analyze key differences in size, energy, lifespan, and traits
• Make informed decisions about which breed suits you best

📊 Comprehensive Breed Information

• Detailed breed profiles with:
  • High-quality images
  • Personality traits
  • Size and energy levels
  • Lifespan estimates
  • Best suited living conditions
  • Exercise requirements

🎯 Curated Selection

• 12+ popular dog breeds included
• Each…

View on GitHub

How I Built It

I built PawMatch using:

• React
• Tailwind CSS
• Framer Motion
• JavaScript

The main focus was creating a smooth and enjoyable browsing experience.

Component-Based Architecture

One of my goals was to keep the application modular and reusable.

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.

Making Static Data Feel Interactive

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.

A simple breed card became a discovery experience.

Animations and User Experience

I used Framer Motion to add subtle interactions:

• Card hover animations
• Modal transitions
• Smooth UI movement

The goal was not to add animations everywhere, but to make interactions feel natural.

Challenges

The biggest challenge was deciding what not to build.

Initially, I considered adding features like:

• AI-generated dog portraits
• User uploads
• Advanced breed recommendations
• More complex matching algorithms

But with limited time, I focused on creating one polished experience instead of many unfinished features.

Sometimes building less allows you to focus more on the details.

What I Learned

This project reminded me that even a simple idea can become interesting when you focus on the user's emotion.

A breed explorer could easily become another information website.

But when you think about the reason someone visits it, the goal changes.

People are not searching for a dog breed.

They are searching for a companion.

Prize Categories

Not submitting to any additional prize categories.

Final Thoughts

Building PawMatch was my small way of celebrating International Dog Day.

Dogs bring so much happiness into people's lives, and I wanted to create something that reflects that connection.

Every dog has a story, a personality, and a little bit of magic.

Hopefully, PawMatch helps people discover one they connect with. 🐾

Thanks for checking it out!