The Woof Guide 🐾

Features 📽️

• 🐶 Random Dog Generator: Get a surprise dog image and its breed with just a click.
• 🔍 Breed Lookup: Type a breed name and get its image instantly.
• 🧠 Autofill Suggestions: Smart breed name suggestions as you type.
• 🐕‍🦺 Sub-Breed Explorer: Check out sub-breeds for any specific breed.
• 📜 Comprehensive Breed List: Explore all available dog breeds in a neat, scrollable modal.

Live Demo 💻

Check out the app in action: The Woof Guide

---

Getting Started 🤔

Prerequisites

Before you get started, make sure you have:

• Node.js (v14 or higher) installed
• A package manager like npm or yarn

Installation 🛠

1. Clone the repository:

   git clone https://github.com/CodeLikeAGirl29/dog-api-img.git

2. Navigate to the project directory:

   cd dog-api-img

3. Install the dependencies:

   npm install

4. Start the development server:

   npm run dev

   Open your browser and navigate to http://localhost:5173.

---

Folder Structure 📁

src/
├── assets/         # Images, including the badass logo
├── components/     # Reusable React components
├── App.css         # Global styles
├── App.jsx          # Main application component
└── main.jsx        # Entry point for React

---

Technologies Used

• React.js: Frontend library for building dynamic UIs.
• React-Bootstrap: Pre-styled UI components for a sleek look.
• Dog CEO API: Fetches random dog images and breed data.
• CSS: Custom styles for a unique vibe.

---

Usage

1. Explore Random Dogs
   Click the "Show Random Dog" button for a random surprise!

2. Search by Breed

   • Type a breed name in the input field.
   • Autofill suggestions will guide you as you type.
   • Select a suggestion or press "Show Breed" to fetch its image.

3. Explore All Breeds
   Click the "Show All Breeds" button to view a full list of available breeds in a modal.

4. Discover Sub-Breeds
   Input a breed name and press "Show Sub-Breed" to explore its variations.

---