Create a product collection page using this Nuxt project, to the best of your ability. Try and implement as many best practices as possible. Using the figma file, try and replicate the design as accuratly as possible. There is also a JSON file to replicate a response from an API. Once you are done, submit a pull request to this repo.
We will be looking for your knowledge in the following areas:
- Well formed HTML (bonus for HTML5)
- Responsive design, the page should look good on mobile and desktop (bonus for pure css)
- Javascript, use Vue and Nuxt where best applied.
- SEO friendly
- Accessibility (WCAG)
- Performance (load time, weight, etc.)
Nice to haves:
- Animations / transitions where applicable (eg: a nice hovering effect on a button).
- Reusable components that make sense.
- A site layout that can be used on multiple pages
- Translations (i18n)
- Functionality to filter products
- Live version we can test online
Do not display products with errors, in this case a product is in error if there is no image available.
Approx: 2h
Design : https://www.figma.com/file/8htFugcxG2KaKG2dAdU5RJ/dev-inte?node-id=0%3A1
Data: ./assets/products.json
Please feel free to ask any questions that you have!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent