PetsPaw — Experimental Web App (React.js)

My Role

Frontend Developer

I was responsible for the full development cycle:

• application architecture

• API integration

• routing and state handling

• UI logic and interactions

• refactoring from Vanilla JS to React

Key Features

Voting

Displays a random cat image fetched from the API.

Users can:

• Like

• Add to Favourites

• Dislike

After each action, a new image is loaded, and the previous one is stored in the corresponding section.

A real-time user activity log is shown at the bottom, displaying timestamps and image IDs.

Breeds

A full catalog of cat breeds with:

• filtering and sorting

• breed search

• individual breed pages with detailed information

Gallery

A gallery view of cat images with:

• breed-based filtering

• sorting options

• adjustable number of items per page

Additional

• global breed search

• separate pages for Likes, Favourites, and Dislikes

• dark / light mode support

Authentication Logic

Instead of traditional authentication, the app uses a sub_id:

• generated automatically for each user

• stored in localStorage

• passed with API requests to associate user actions (votes, likes, favourites)

This approach simulates user identity while keeping the app lightweight and fully client-side.

Technical Stack

• React.js

• Axios

• React Router

• Vite

• Sass (SCSS)

• The Cat API

• GitHub Pages

Why This Project

This project was created to:

• deepen understanding of API-driven applications

• practice transitioning from Vanilla JS to React

• experiment with routing, filtering, and client-side state

• build a realistic frontend app without backend dependencies