lordoffreaks / example-tech-test

✨ Live Pairing Tech Test ✨

Intro 📣

• Test is 50 Min's Long
• You don't need to finish everything
• Work how you normally would
  • Use google/documentation
  • Ask questions

We know you are good 😉, relax and have fun!!!, we are here to help! 🎉

Goal 🏁

• Style as per the spec below the list of cards (Block 1 - 25m).
• Implement pagination based off the results from an API (Block 2 - 25m).

We will be looking out for:

• Clean CSS styles
• An understanding of state and data fetching

Where to Start 🌠

Get the dev environment up and running!

yarn install --frozen-lockfile

yarn dev

Might also be a good idea to start watching the tests!

yarn test

Block 1 (Styling) - 25m

Please use styled-components and CSS grid

Design 🎨

Card

• Card:
  • All padding/margin seen is 10px
  • Border Radius is 10px
  • Box shadow 0px 0px 15px -2px #e0e0e0
• Image:
  • Height is 200px
  • Full width.
• Title
  • font-family sans-serif
  • font-size 1.3rem
  • font-weight bold
• Description
  • font-family serif
  • font-size 1.1rem
• Price
  • font-family fantasy
  • font-size 1rem
  • underline color is rebeccapurple

Responsive Layout / Grid

• Achieve a responsive layout with up to 4 cards showing at 1200px width.
• Each card should get no smaller than 260px and no bigger than 600px.
• Spacing is 10px

Find below an example of the resulting grids based on different screen sizes.

Pagination

Pagination with < & > added and styled to buttons.

Block 2 (React) - 25m

Functionality 🤖

• Fetch all results from the API using getServerSideProps
• The API always returns 25 results you don't need to do multiple requests, the paginations needs to be done in-memory
• Render results with 12 per page
• Pagination should update displayed results