Description:
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 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.
Click here for the link to the test's page.
Added Features and Functionalities:
- Storybook for Vue: for component documentation.
- Back to top button.
- Empty input error modal.
- Custom 404 photo search not found.
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run start
# generate static project
$ npm run generateFor detailed explanation on how things work, check out Nuxt.js docs.