Cat-API + React

Explore the fascinating world of cat breeds with Cat-App crafted using React.js, React-DOM, Styled-Components, React Icons, Axios and Vite. Discover a wide variety of cat breeds, each with its own unique characteristics and traits.

Table of Contents

• Demo
• Features
• CatAPI
• Installation
• Usage
• Build
• Technologies
• Contributing

Demo

Features

• Browse through a diverse collection of cat breeds.
• Learn about the history, appearance, and temperament of each breed.
• Enjoy high-quality images showcasing the beauty of each cat.
• A user-friendly interface designed for an engaging experience.

CatAPI

the Cat API that returns information about speeds, their traits and images.

the main url of this API (that comes by default with json-server): https://api.thecatapi.com/v1

Endpoints

• All speeds: https://api.thecatapi.com/v1/breeds

• A specific breed, based on their unique ID: https://api.thecatapi.com/v1/breeds/breedId

• Cat images of specific breed, based on their unique ID: https://api.thecatapi.com/v1/images/search?limit=10&breed_ids=breedId&api_key=REPLACE_ME

Use it as either the x-api-key in the Header OR as the api_key Query Parameter

Installation

1. Clone the repository:

git clone https://github.com/emektarkubra/Cat-API.git
cd Cat-API

2. Install dependencies:

npm install

Usage

Before run the app, add the following information to the .env file in the root directory:

VITE_CAT_API_KEY = REPLACE_YOUR_API_KEY
VITE_CAT_API_BASE_URL = https://api.thecatapi.com/v1 

Run the app locally:

npm run dev

The app will be accessible at http://localhost:3000.

Build

Create a production build:

npm run build

Technologies

• Vite: A fast and minimalistic development build tool.
• React.js: A JavaScript library for building user interfaces.
• React-DOM: Provides DOM-specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements.
• Styled-Components: A CSS-in-JS library for styling React components.
• React Icons: A library of popular icon packs for React.
• Axios: Fetching data from the Cat API.

Contributing

Contributions are welcome! If you encounter issues or have suggestions for improvements, feel free to open an issue or create a pull request.

Show your support

If you find this project interesting, consider giving it a ⭐️ to show your support.

---