🐶 Dog Image Gallery

A Flask web application that fetches and displays dog images by breed using the Dog CEO API. Users can browse through different dog breeds and view random images of their selected breed.

📋 Project Overview

This Flask application integrates with the Dog CEO API to fetch and display dog images based on breed selection. The project demonstrates API integration, dynamic routing, form handling, and template rendering with Jinja2.

Key Features

• API Integration: Fetches data from Dog CEO API
• Breed Selection: Form-based breed selection interface
• Dynamic Routing: Flask routes handle breed-specific requests
• Random Dog Images: Displays random images for selected breeds
• Jinja2 Templating: Dynamic content rendering
• Responsive Design: Mobile-friendly interface

🛠️ Technologies Used

• Backend: Python, Flask
• API: Dog CEO API (https://dog.ceo/dog-api/)
• Templating: Jinja2
• Frontend: HTML5, CSS3
• HTTP Requests: Flask's built-in request handling

📚 Learning Outcomes

This project demonstrates:

• Making HTTP requests to external APIs
• Processing JSON responses from APIs
• Working with Flask forms and user input
• Dynamic routing with URL parameters
• Passing data from Flask routes to templates
• Error handling for API requests
• Template rendering with dynamic data

🚀 Installation & Setup

Prerequisites

Check if Python is installed:

On Mac:

python3 --version

On Windows:

python --version

Ensure you have Python 3.8 or higher installed (3.11 recommended). If you need to install Python on Windows, see this guide.

Step 1: Clone the Repository

git clone https://github.com/CatYoung018/dog-image-gallery.git
cd dog-image-gallery

Step 2: Create Virtual Environment

On Mac:

python3 -m venv venv

On Windows:

python -m venv venv

Step 3: Activate Virtual Environment

On Mac:

source venv/bin/activate

On Windows:

source venv/Scripts/activate

Once activated, you'll see (venv) at the beginning of your terminal prompt.

Step 4: Install Dependencies

pip install flask flask-sqlalchemy

Step 5: Run the Application

Without debugger:

flask run

With debugger (recommended for development):

flask run --debug

The app will run at: http://127.0.0.1:5000/

Step 6: Use the App

1. Open your browser and navigate to http://127.0.0.1:5000/
2. Select a dog breed from the dropdown menu
3. Submit the form to view random images of that breed
4. Refresh to see different random images

Stopping the Application

• Press Ctrl + C to stop the server
• Run deactivate to close the virtual environment

Note: When not using the debugger, you'll need to stop and restart the server after making code changes. Remember to hard refresh your browser (Ctrl + F5 or Cmd + Shift + R).

📁 Project Structure

dog-image-gallery/
├── static/              # Static assets
│   ├── css/            # Stylesheets
│   │   └── style.css   # Main stylesheet
│   └── images/         # Local images (if any)
├── templates/           # HTML templates (Jinja2)
│   ├── index.html      # Homepage with breed selection
│   └── breed.html      # Breed-specific image display
├── app.py              # Main Flask application
├── .gitignore          # Git ignore file
├── README.md           # Project documentation
└── venv/               # Virtual environment (after setup)

🎯 How It Works

1. Homepage (Breed Selection)

• User visits the homepage
• Form displays available dog breeds
• User selects a breed and submits

2. API Request

# Flask makes request to Dog CEO API
response = requests.get(f'https://dog.ceo/api/breed/{breed}/images/random')
data = response.json()

3. Image Display

• Flask processes the JSON response
• Extracts image URL from API data
• Passes URL to template via Jinja2
• Template displays the dog image

4. Dynamic Routing

@app.route('/breed/<breed_name>')
def show_breed(breed_name):
    # Fetch and display images for specific breed

💡 Usage Examples

View a specific breed:

http://127.0.0.1:5000/breed/husky
http://127.0.0.1:5000/breed/beagle
http://127.0.0.1:5000/breed/corgi

Homepage:

http://127.0.0.1:5000/

🌐 API Reference

This project uses the Dog CEO API:

• List all breeds: https://dog.ceo/api/breeds/list/all
• Random image by breed: https://dog.ceo/api/breed/{breed}/images/random
• Multiple images: https://dog.ceo/api/breed/{breed}/images/random/{count}

🔮 Future Enhancements

• Add search functionality for breeds
• Display multiple images per breed
• Add breed information and descriptions
• Implement favorites/save feature
• Add pagination for large breed lists
• Include sub-breeds (e.g., retriever/golden)
• Add image download functionality
• Implement caching for faster loading

🎓 Acknowledgments

This project was created as part of a Skillcrush coding bootcamp, focusing on API integration with Flask and form handling.

API Credit: Dog images provided by Dog CEO API

📝 License

This project is open source and available for educational purposes.

📧 Contact

Cat Young
Email: cat@catyoungconsulting.com
Portfolio: catyoung018.github.io/Cat-Young-Dev
GitHub: @CatYoung018

---

⭐ If you found this project helpful, please consider giving it a star!