Skip to content

Latest commit

 

History

History
119 lines (84 loc) · 3.19 KB

README.md

File metadata and controls

119 lines (84 loc) · 3.19 KB
Raw

The Cat Gallery

A technical challenge using theCatAPI.com

Table of Contents
  1. About The App
  2. Getting Started
  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

(back to top)