We need to create a web catalog with some dog breeds in order to help some pet shop customers to choose their dogs. For this, we need a list of names and images, being able to filter the results.
- Create a web app using the Create React APP.
- Create a page, that fetches primary dog breeds from the API below and displays their names and images.
- Cache the API responses to prevent extra data consumption.
- Add a filter, that displays only selected breeds by comma-separated values.
- Create a readme file and leave some basic instructions explaining how to run and test the project.
- Upload your project on some hosting service, like Now, Netlify, Heroku etc.
- Upload the codebase in your GitHub account.
- Send the app and repository links to fabio@ae.studio.
- Upload the codebase in your GitHub account.send the link to fabio@ae.studio.
- You have 1 day to achieve it.
- The CSS styles should follow the mobile-first approach, CSS frameworks (Bootstrap, Material UI etc) aren't permitted.
- You MUST cover at least one Use Case with Unit or Integration tests.
- Define a scalable architecture, if possible, following the Clean Architecture (from Uncle Bob) or any similar.
- KISS (Keep it Simple, Stupid), avoid over-engineering.
It's a mainly front-end test but we'll check your back-end skills too. Don't forget to write a "clean code", defining a good architecture and covering at least 1 use case with tests.
- https://reactjs.org/docs/hooks-intro.html
- https://usehooks.com/useLocalStorage/
- https://jestjs.io/docs/en/tutorial-react
- https://medium.com/@rickhanlonii/understanding-jest-mocks-f0046c68e53c
- https://github.com/ryanmcdermott/clean-code-javascript
- https://github.com/jbuget/nodejs-clean-architecture-app
- https://www.interaction-design.org/literature/article/kiss-keep-it-simple-stupid-a-design-principle