luishenriquetp/fe-chall3

Frontend Developer Test - Cuponeria

This test aims to test the candidate's knowledge regarding the technologies used by the Cuponeria Frontend Developer Team.

Layout

• Layout desktop

• Layout mobile

• all the images and icons what you will need are in images folder inside references

Instructions

Clone this repository. Create a new branch with your name. Checkout to the branch of your name. Commit your workflow, you can check this article. After you're done, push to the origin and send a pull request of the branch with your name.

Skills Required

• You have to use Next Js as your framework.
• Use typescript.
• Use many reusable components as you can.
• Use Styled Components to style your components.
• You have to use Grid Layout for the structure of the pages and Flexbox for the Components.
• All content needs to be consumed through the Fake Store API.
• If the fake store API is out, you can consume alternative API.
• For the sign up page you have to use viacep API to get all address informations to pre populate other fields.
• Home page must be a static page.
• For the other pages, you have to use server side rendering avaliable in next js.
• Each category and product page must be a dinamic page in next js pages folder
• The app must be responsive for Web and Mobile but have to look good on all breakpoints like mobile, tablets, laptops, desktops widescreen and desktops ultrawidescreen.
• You can mock informations like the price on cart page if this doesn't exists in fake store api.
• Can we see your UI/UX skills? Surprise us with your best, you can change the layout theme schema the way you want, and please, add microinterations but without using external libs.
• Don't repeat yourself. Elements that are logically related must be changed predictably and uniformly and must be sync.

Not required (will earn more points)

• Create and Documenting your components using storybook. you can use as a little component library or a part of your project.
• Create tests for your components and services using react testing library, jest or any other test library.

GLHF (Good Luck and Have Fun!)