The Cat Gallery

A technical challenge using theCatAPI.com

Table of Contents

1. About The App
   • Built With
   • Roadmap
2. Getting Started
   • Installation
3. Contact
4. Acknowledgments

About The App

The acceptance criteria provided for me:

Listing the Cats

• Create a page at "/" that lists the first 20 cat images, in descending order.
• Display in a responsive way, up to a maximum of 4 cat images per row, it should neatly scale down to 340px wide viewport and ensure images are not stretched.

Voting the Cats

• On the listing at "/" add a "vote up" and "vote down" button below each of the cat images that calls the API saving the vote made on the Cat.

Scoring the Cats

• Display the score for each cat below the image using the API endpoint. The score is equal to (number of up votes - number of down votes).

(back to top)

Built With

• HTML
• CSS
• Javascript
• React (useState, useEffect, useContext)

(back to top)

Notes

• Whilst Redux is a much better state management tool for React, the demands of still being in full time education at CodeClan necessitate me to implement useContext here as it's something that I already know how to use.
• I have placed my API key in a git-ignored config file here. I contemplated making the API calls in a server.js using node-fetch but the API has CORS enabled so decided to keep it client side.
• I have started self-teaching about accessibility and have implemented some aria labels and tab indexes here.

(back to top)

Getting Started

Installation

1. Clone the repo

   git clone [email protected]:HelenLangers/TheCatApi.git

2. Install dependencies

   npm i

3. Create a config.js file in the src folder and enter your api key:

   const config = {
   api_key: {your thecatapi api key here}
   }
   export default config

4. Start the app

   npm start

5. View the app at localhost:3000 if it doesns't automatically open.

(back to top)

Contact

Helen Langridge - Twitter - LinkedIn - Personal Website

(back to top)

Acknowledgments

• theCatAPI
• FontAwesome

(back to top)