This test aims at checking the following in your implementation:
- Attention to detail in implementing mockups and interfaces
- Proficiency with the Vue component lifecycle
- Handling API calls and responses using an API client, axios etc
- Using new CSS paradigms like grid, css variables
- Responsive design thinking
- Writing clean component-based "non-hacky" SCSS
- Understanding of CSS animations and transitions
Instructions and Mockups
Using the Unsplash API, you're to create a mini unsplash clone using the mockups and design below as a guide.
- The design uses a staggered grid to present photos from the API, note the first row containing the photos overlap the backdrop behind the search bar.
- The names of the author and photo location should be fetched from the API
- Use a tint overlay on top of the images to give the text good contrast, should an image have a light background.
- Implement loading placeholders to provide feedback to users while fetching data from the API
- On clicking an image, show a modal of the image in the best resolution that doesn't take too long to download
1. Landing Screen: Shows 7 - 8 latest "African" photos from the API