Cat Finder

Cat Finder is a React web application that allows users to search for cat images by breed or fetch random cat images using The Cat API.

The project demonstrates asynchronous API integration, environment variable management, and dynamic UI updates in a modern React + Vite development environment.

Features

• Search cat images by breed name
• Fetch random cat images
• Loading state indicator while fetching data
• API key handling through environment variables

Tech Stack

• React — Component-based UI library
• Vite — Development server and build tool
• The Cat API — External REST API for cat image data
• JavaScript (ES6+) — Asynchronous data fetching

Requirements

• Node.js 18+
• npm
• A free API key from The Cat API

Installation

Clone the repository and install dependencies.

npm install

Create a .env file in the root directory and add your API key.

VITE_CAT_API_KEY=your_api_key_here

If the development server is already running, restart it after creating the .env file.

Running the App

Start the development server:

npm run dev

Open the local URL shown by Vite (usually http://localhost:5173) in your browser.

Usage

Search by breed Type a breed name such as siamese, bengal, or maine coon and press Enter or click Search.

Random cat Click the Random button to fetch a random cat image from the API.

Available Scripts

npm run dev      # Start development server
npm run build    # Create production build
npm run preview  # Preview production build locally
npm run lint     # Run ESLint

License

This project is open source, feel free to use it.