Dog Breeds Explorer

A React web application for exploring dog breeds and viewing random images of different dog breeds. Built with Vite and React, this application fetches data from the Dog CEO API to provide an interactive dog breed browsing experience.

Features

• Browse all available dog breeds in a grid layout
• View sub-breeds for breeds that have them
• Click on any breed to see random images
• Refresh to get new random images of the selected breed
• Responsive design for desktop and mobile devices
• Fast development and build with Vite

Technologies used

• React 19 - UI library for building the interface
• React Router DOM 7 - Client-side routing
• Vite 7 - Build tool and dev server
• Dog CEO API - Free API for dog breed information and images
• Netlify - Deployment platform with SPA support

Installation

1. Clone the repository:

git clone https://github.com/netlify-templates/dogs-explorer
cd dogs-explorer

2. Install dependencies:

npm install

Development

Run the development server:

npm run dev

The application will be available at http://localhost:5173 (or the port shown in your terminal).

Available scripts

• npm run dev - Start the development server
• npm run build - Build the production-ready application
• npm run preview - Preview the built application locally
• npm run lint - Run ESLint to check code quality

How it works

1. Home page: Fetches and displays all available dog breeds from the Dog CEO API in a responsive grid layout. Shows sub-breeds if available.

2. Breed detail page: When a breed is selected, displays a random image of that breed. Users can refresh to get new random images.

3. Routing: Uses React Router for seamless navigation between the home page and individual breed pages.

API usage

This application uses the Dog CEO API:

• /api/breeds/list/all - Get list of all breeds
• /api/breed/{breed}/images/random - Get random image of a specific breed

Deployment

The application is configured for deployment on Netlify with:

• Automatic builds from the main branch
• SPA routing support (redirects all routes to index.html)
• Production build output to the dist folder

To deploy:

1. Push your code to GitHub
2. Connect your repository to Netlify
3. Netlify will automatically build and deploy using the configuration in netlify.toml

License

ISC License - See package.json for details

Acknowledgments

• Dog CEO API for providing the free dog breed API
• Vite for the fast build tooling
• React for the UI library