https://github.com/jerp86/wefit-test-react
O desafio consiste na criação de um site de e-commerce simplificado do zero, onde foi criado um fluxo seguindo as telas apresentadas no protótipo.
https://github.com/jerp86/wefit-test-react
axios challenge immer json-server nextjs react stitches use-context-selector wefit
Last synced: 3 months ago
JSON representation
O desafio consiste na criação de um site de e-commerce simplificado do zero, onde foi criado um fluxo seguindo as telas apresentadas no protótipo.
- Host: GitHub
- URL: https://github.com/jerp86/wefit-test-react
- Owner: jerp86
- Created: 2023-02-04T04:58:46.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-07T00:02:39.000Z (over 2 years ago)
- Last Synced: 2025-03-11T21:41:36.996Z (over 1 year ago)
- Topics: axios, challenge, immer, json-server, nextjs, react, stitches, use-context-selector, wefit
- Language: TypeScript
- Homepage:
- Size: 565 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WeFit Test React
---
Sobre |
Tecnologias |
Layout
Cores |
Fonte |
Executar |
---
## :information_source: Sobre
O desafio consiste na criação de um site de e-commerce simplificado do zero, onde foi criado um fluxo seguindo as telas apresentadas no protótipo.
São elas:
* **Home**: Onde ele terá que fazer uma requisição na API, trazendo assim, a lista de filmes quem podem ser adicionados ao carrinho.
* **Carinho**: Onde ele poderá ver os itens que foram adicionados, somando o valor total com base em cada item adicionado, podendo remover um item do carrinho. Por padrão, se o carrinho tiver nenhum item adicionado, deverá aparecer a tela de **empty** com a opção de voltar para tela inicial.
* **Compra realizada**: Após confirmar o pedido na tela anterior, o usuário deverá ser encaminhado para a tela de pedido confirmado. Aqui o usuário também terá a opção de voltar para tela inicial.
Para simular o servidor, foi utilizado o JSON-server com o arquivo server fornecido.
## :rocket: Tecnologias Utilizadas
- [Next.js](https://nextjs.org/)
- [Axios](https://axios-http.com/)
- [ESLint](https://eslint.org/)
- [immer](https://github.com/immerjs/immer#readme)
- [JSON Server](https://github.com/typicode/json-server)
- [Stitches](https://stitches.dev/)
- [use-context-selector](https://github.com/dai-shi/use-context-selector#readme)
- [@rocketseat/eslint-config](https://github.com/rocketseat/eslint-config-rocketseat#readme)
## :art: Layout
Para essa aplicação foi fornecido um layout para que fosse possível seguir e implementar todas as funcionalidades desenhadas no [#Figma](https://www.figma.com/).
[Protótipo do Figma - WeMovie](https://www.figma.com/file/0ZyTELvPCSCnib16XG49YP/Teste-Front-React-WeFit---2022?node-id=0%3A1)
## :rainbow: Documentação de cores
| Cor | Hexadecimal |
| --------- | ----------- |
| white | #FFFFFF |
| | |
| gray-100 | #D9D9D9 |
| gray-300 | #999999 |
| gray-500 | #333333 |
| gray-900 | #2F2E41 |
| | |
| blue | #009EDD |
| green | #039B00 |
## :abc: Fonte utilizada
- [Open Sans](https://fonts.google.com/specimen/Open+Sans?family=Open+Sans&query=open+sans), designed by [Steve Matteson](https://fonts.google.com/?query=Steve%20Matteson)
## :zap: Como executar
- Clone o projeto:
```
git clone https://github.com/jerp86/wefit-test-react.git
```
- Acesse a pasta clonada:
```
cd wefit-test-react
```
- Instale as dependências:
```
npm ci
```
- Inicie a fake API e o projeto juntos:
```
npm run dev:start
```
Caso tenha interesse em rodar em terminais separados, você pode utilizar o seguinte:
| Para iniciar a fake API | Para iniciar o projeto |
| -------------------------- | ---------------------- |
| ```npm run dev:server ``` | ``` npm run dev ``` |
---
Feito por Jerp 👋️
Entre em contato!
