Sobre | Tecnologias | Layout
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.
Para essa aplicação foi fornecido um layout para que fosse possível seguir e implementar todas as funcionalidades desenhadas no #Figma.
| Cor | Hexadecimal |
|---|---|
| white | #FFFFFF |
| gray-100 | #D9D9D9 |
| gray-300 | #999999 |
| gray-500 | #333333 |
| gray-900 | #2F2E41 |
| blue | #009EDD |
| green | #039B00 |
- Open Sans, designed by Steve Matteson
- 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 |
