For this challenge I did a fully responsive web app where the user can search for cat breeds using thecatapi.com and pagination, click here to see the app in production enviroment.
Most of the data logic lies within the following files:
- src/components/Search: Responsable for rendering the data provide from the catService class.
- src/services/catService.js: Responsable for getting thecatapi data.
- Mobile-friendly/Responsive: The app is fully responsive for any device.
- Newest features of ECMAScript: I used modern JS practices, using only functional components, hooks and the ES6 features that makes the code more concise and readable.
In the project root dir we have the following scripts:
First is mandatory to run this script before any other, this will install all the project dependencies.
Runs the developer server in http://localhost:3000.
Builds the app bundle in production enviroment, ready do be deployed.
- Security: The .env file should be listed in the .gitignore, but I didn't do it because the .env is a mandatory file for running the app in dev mode, if it was a production app the api key would be in the .env file.