GetACat Frontend

❓ What is this

This application is modern styled cat focused application.

You can find breed specific properties like:

• name
• lifespan
• average weight
• colors
• characteristics
• and an image

Click here 👉 to navigate to user features
Click here 👉 to navigate to developer features

💻 About this project

This is the frontend code of GetACat. I built this web page as a portfolio project because I wanted to test my frontend skills, mainly focusing on React. This page provides information about cats, such as their lifespan and images. This information comes from the backend, which you can find here 👉 GetACat_Backend.

⚡️ Core Features

This application contains several functions, like:

• 🌇 Images – These images come from Imgur but are fetched by the backend
• 💿 CatDetails – You can request data about a specific cat breed.
• 🩱 CostumeAPI – Availability to make your own API version.

This project is mainly UI heavy. So I rather deal with UI than functionality.

📦 How to access

Access in this 👉 link

🤔 How to use

You are greeted by this navigation bar.

Just click on the intended option like:

• Images
• Cat Datails
• API

...and it will take you to that section.

Heres the images.

---

Click on the arrows to see another cat image.

---

This one is about the mentioned cat details.

Just select the desired cat breed right below the title.

---

This section is for the self-made API variations.

You can select:

• Images: This option provides a single URL that returns all the images you can see above.
  Here's an example:

https://getacat-backend.onrender.com/get-a-cat-info/Sphynx

• Cat Datails: Here you can customize your own API request with your desired parameters:
  • Breed: le.g., Ragdoll
  • Property: e.g., lifespan
    Here's an example:

  https://getacat-backend.onrender.com/get-a-cat-info/Ragdoll/lifespan
  

Although it's not explicitly mentioned on the page, clicking on the URL will automatically copy it to your clipboard.

---

This one is the yarn ball.

Although it's not explicitly mentioned on the page, clicking on the skein will automatically scroll the page back to the top.

---

🛠️ Developer Guidance

Just a heads up: like 99% of developers out there, I used AI and premade code during development.

🤬 Design problems

I am aware of all of this.

• ↕️ Cursor: At certain page widths, the custom yarn ball cursor overlaps the left arrow of the image carousel.
• 🧪 Testing: Automated tests are currently missing. 😀😕

📚 Tech Stack

• Bun (the package manager, and JS/TS runtime):

  • React (for the UI)
  • framer-motion: A powerful animation library for React
  • Vite (for fast building)
  • TypeScript (Used programming language)

• Netlify as a hosting service for the web page.

🌳 File tree

├── READMEonlyAssest
│   ├── APIDescription.png
│   ├── CatCarosel.png
│   ├── CatDatails.png
│   ├── NavBar.png
│   └── Skein.png
├── public
│   ├── _redirects
│   ├── favicon.svg
│   └── icons.svg
├── src
│   ├── Components
│   │   ├── APIDescription
│   │   │   ├── APIDescription.css
│   │   │   └── APIDescription.tsx
│   │   ├── CatDatails
│   │   │   ├── CatDatails.css
│   │   │   └── CatDatails.tsx
│   │   ├── Footer
│   │   │   ├── Footer.css
│   │   │   └── Footer.tsx
│   │   ├── Header
│   │   │   ├── Header.css
│   │   │   └── Header.tsx
│   │   ├── ImageCarosel
│   │   │   ├── Carosel.css
│   │   │   └── Carosel.tsx
│   │   ├── ScrollIndicator
│   │   │   ├── ScrollIndicator.css
│   │   │   └── ScrollIndicator.tsx
│   │   └── CatSelect.tsx
│   ├── assets
│   │   └── cat.png
│   ├── styles
│   │   ├── App.css
│   │   ├── Responsive.css
│   │   └── index.css
│   ├── App.tsx
│   └── main.tsx
├── .gitignore
├── README.md
├── bun.lock
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

👨‍💻 Actual Development

To start development just clone this repository.

git clone https://github.com/6gDav/GetACat_Frontend.git

Or download the ZIP.

---

Start dev server with this command.

bun run dev

Build the project.

bun run build

---

May be needed to download all necessary dependencies.

bun install

🪪 License

This project is licensed under the MIT License - see the LICENSE file for details.