First, install fake API dependencies and run:
# Enter on API folder:
cd api
# Install dependencies:
yarn
# or
npm install
# Run API:
yarn start
# or
npm run startThen, install project dependencies and run (make sure you are in the root folder of the project):
# Install dependencies:
yarn
# or
npm install
# Run project:
yarn dev
# or
npm run devFinally, open http://localhost:3000 with your browser to see the result.
- Project creation:
I created the project using create next-app (https://nextjs.org/docs/api-reference/create-next-app). The Next version used was 13, and the project uses the new concepts and features of this version.
- Architecture
I divided the project in a way that it could be scalable. I preferred to leave the styling files inside their respective folders (with the exception of the global and home styles), so that later maintenance would be easier. To make requests to the API, was used libraries like tanstack/react-query (to manage the cache and the states of the requests) and axios (to make the HTTP request).
- Styles:
For the styling of the project, I used the styled-components library. I really like using this library because I think it keeps the code organized, and makes it much easier to style using cascade.
- Code styling:
For pattern of project's code, I used the eslint and prettier libraries, so that coding rules and patterns could be implemented.
Product list:
Product information:
Cart image:
