Welcome to the second test, may the pug be with you 👋🏼
This time you will have to code the following responsive grid:
https://projects.invisionapp.com/d/main/#/console/18958536/395028718/inspect
Use the following credentials if needed:
- email: [email protected]
- password: Testfront
Using the preview mode you can check how the screen should look and using the inspect mode you'll be able to find about the implementation details (margins, font sizes, etc).
The idea is to load a random set of 10 images using a fanstastic free-to-use API called Lorem Picsum: https://picsum.photos/
- Read the docs and discover Lorem Picsum's API.
- Connect the API to your frontend code.
- Use the list endpoint to get a list of 100 elements.
- Show those images in the list and display the author's name on the card as showed in the design.
- The app has to have some filters:
- An input that filter by author
- Some buttons to change the blur and the grayscale. If one of these is on, the other has to be desactivate.
Feel free to use any client side JS framework/library but we recommend you to use React.
Focus on performance and readability. Consider any corner cases.
Write down any assumption you make.
You can share your code with us using a github repository or a google drive link. You can even deploy they project using something like github pages if you want.
Happy coding 🤓