🐶 Fetchy - Find Your Perfect Shelter Dog!

Fetchy is a web application built as part of a take-home assignment for Fetch Rewards. It helps dog lovers search for shelter dogs and find their perfect match. Users can browse, filter, and favorite dogs before generating a match.

🚀 Live Demo: https://fetchy.destin.io

✨ Features

• 🔍 Search & Filter: Users can filter dogs by breed and location.
• 📄 Pagination: Results are paginated for easy browsing.
• 📌 Sorting: Dogs are sorted alphabetically by breed by default, with options for ascending or descending order.
• ❤️ Favorites & Matchmaking: Users can favorite dogs and generate a match.
• 🖼 Detailed Dog Profiles: Each dog’s image, age, breed, and location are displayed.
• 🎉 Animated Match Result: Confetti animation celebrates when a user finds their match.

🛠️ Tech Stack

• ⚛️ React with TypeScript for a scalable and maintainable UI.
• ⚡ Vite.js for fast development and optimized builds.
• 🚏 React Router for client-side routing and navigation.
• 🎨 Tailwind CSS for modern, responsive styling.
• 📦 React Query for efficient API data fetching and caching.
• 🛠 ShadCN UI for reusable and accessible components.
• 🚀 Hosted on Vercel for seamless deployment and performance.

📥 Installation & Running Locally

1️⃣ Clone the repository

git clone https://github.com/destinio/fetchy.git
cd fetchy

2️⃣ Install dependencies

npm install
# OR
yarn install

3️⃣ Start the development server

npm run dev
# OR
yarn dev

This will start the app on http://localhost:5173/.

4️⃣ Build for production

npm run build

This compiles the app for production use.

5️⃣ Preview production build

npm run preview

🚀 Deployment

Fetchy is deployed on Vercel for seamless performance and scalability.

📜 License

This project was built for evaluation purposes as part of a take-home assignment for Fetch Rewards.