← Projects

Cat

10/2023 - 10/2023

Tech Stack:

https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/css3/css3-original.svg
https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg
https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/react/react-original.svg

Description: A website that finds cat images based on your preference


Web Development Project 4 - Cat The Lover

This web app: This website is for anyone who enjoys and has a cat.

Time spent: 5 hours spent in total

Required Features

The following required functionality is completed:

  • Clicking a button creates a new API fetch request and displays at least three attributes from the returned JSON data
  • Only one item/API call is viewable at a time
  • API calls appear random to the user
  • At least one image is displayed per API call
  • Clicking on a displayed value for one attribute adds it to a displayed ban list
  • Attributes on the ban list prevent further images/API results with that attribute from being displayed

The following optional features are implemented:

  • Multiple types of attributes can be added to the ban list
  • Users can see a stored history of their previously viewed items from their session

The following additional features are implemented:

  • List anything else that you added to improve the site's functionality!

Video Walkthrough

Here's a walkthrough of implemented user stories:

Notes

Describe any challenges encountered while building the app.

The challenges that I encountered were trying to pass handlers from parent to child components. Understanding usestate and updating the state properly for each component and making each component modular were something I learned the most from this app.