Live Demo: https://sneak-sneak.netlify.app/
- Creating an eCommerce site focused on selling the latest sneakers, initial spec:
Your solution should reflect the mockups supplied.
- We have supplied a JSON file with 24 items on it.
- When the user arrives at the page, the user should see 24 items in a row of 4 items for Desktop and large breakpoints and 2
items for Mobile and small breakpoints. ✔️
- When the user hovers on an item, an overlay should be displayed on top of the item. The overlay should contain all the product
information included in the JSON file. ✔️
- When the user clicks on an item, it should open the product page based on the provided url in a new tab. ✔️
- Any external data is in JSON file supplied. ✔️
- We are expecting you to use React. ✔️
- We are expecting to use the data (json) through a normal ES6 import ✔️
- We are expecting you to use Javascript even if you’re familiar with Typescript. ✔️
- Your solution should work nicely on mobile and desktop viewports. ✔️
Side notes
- You may use any JS libraries or frameworks you wish. ✔️
- You can use CSS, SASS, LESS, Styled components, Fela, or any other styling you like. ✔️
- We like to build mobile-first, so please keep this consideration in mind. ✔️
- Demonstrate that you can use the latest functionality available in React to achieve what you need. ✔️
Nice to haves
- Add documentation and/or instructions if required. ✔️
- Use React Hooks (useState, useEffect) if necessary. ✔️
- Set up and write unit tests.
- Use CSS animations/transitions on image to add a bit of design flare. ✔️
- Use a CSS design pattern (BEM, Smaccs, etc). ✔️
- Clone this repository
- At root level, run the following Node Package Manager commands:
npm installnpm start- View site in your browser at http://localhost:3000.