https://github.com/codelikeagirl29/dog-api-img
Welcome to The Woof Guide, the ultimate destination for dog lovers and curious canines alike!
https://github.com/codelikeagirl29/dog-api-img
api dog-ceo-api react react-bootstrap react-dom vercel vite
Last synced: 3 months ago
JSON representation
Welcome to The Woof Guide, the ultimate destination for dog lovers and curious canines alike!
- Host: GitHub
- URL: https://github.com/codelikeagirl29/dog-api-img
- Owner: CodeLikeAGirl29
- Created: 2024-11-19T09:07:41.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-21T04:37:58.000Z (over 1 year ago)
- Last Synced: 2025-01-21T15:31:38.064Z (over 1 year ago)
- Topics: api, dog-ceo-api, react, react-bootstrap, react-dom, vercel, vite
- Language: JavaScript
- Homepage: https://dog-api-img.vercel.app
- Size: 493 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **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](https://dog-api-img.vercel.app/)
---
## **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:
```bash
git clone https://github.com/CodeLikeAGirl29/dog-api-img.git
```
2. Navigate to the project directory:
```bash
cd dog-api-img
```
3. Install the dependencies:
```bash
npm install
```
4. Start the development server:
```bash
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.
---