Conheça o projeto
O Coffee Delivery é o segundo desafio da formação React 2022, com foco em consolidar conceitos fundamentais do React aplicados em um fluxo real de e-commerce. O projeto consiste em desenvolver uma aplicação de cafeteria fictícia, permitindo ao usuário listar cafés disponíveis, gerenciar um carrinho de compras e finalizar pedidos.
A aplicação integra ContextAPI, useReducer, persistência de dados (LocalStorage) e bibliotecas de formulário/validação como React Hook Form e Zod, além de styled-components para estilização. O objetivo é praticar componentização, imutabilidade e manipulação de listas, criando uma base sólida para projetos maiores.
Recursos
Materiais para você usar como base para o desenvolvimento
Instruções
Estrutura, regras e requisitos do projeto
1. Regras principais do sistema
- O usuário deve visualizar a listagem de cafés disponíveis com nome, descrição, preço e opções de quantidade.
- O usuário pode adicionar uma quantidade específica de cafés ao carrinho.
- O usuário pode aumentar ou diminuir a quantidade de itens já no carrinho.
- O usuário deve conseguir remover itens individualmente do carrinho.
- No Header deve aparecer o total de itens adicionados ao carrinho.
- Deve existir um formulário de endereço de entrega, com campos validados (CEP, rua, bairro, cidade, UF, etc).
- O usuário deve escolher o método de pagamento (cartão de crédito, débito ou dinheiro).
- O sistema deve exibir o valor total da compra, calculado a partir da soma dos itens e suas quantidades.
- Após confirmar, deve ser exibida uma página de sucesso do pedido, contendo o resumo do endereço e pagamento.
2. Conceitos e ferramentas a praticar
- Estados e imutabilidade
- ContextAPI para gerenciamento global do carrinho
- LocalStorage para persistir itens do carrinho mesmo após atualizar a página
- Manipulação de arrays (
map,filter,reduce) - Componentização e propriedades
- Validação de formulários com
react-hook-form+zod - Estilização com
styled-components - Navegação com
react-router-dom
3. Estrutura esperada do desafio
- Página Home com listagem de cafés
- Página Carrinho/Checkout com formulário de entrega e resumo da compra
- Página de Confirmação com os dados do pedido finalizado
- Uso de ContextAPI para compartilhar o estado global do carrinho entre as páginas
4. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais ferramentas que utilizamos durante o desenvolvimento do módulo da formação.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além 🚀
5. Solução
Nós disponibilizamos também um código com uma possível solução para esse desafio.
Nesse repositório você vai encontrar o desafio implementado com diversos detalhes adicionais que melhoram a experiência do usuário. Vai lá dar uma olhadinha para ver o que você pode aprender de novo ou até para implementar na sua própria solução 🚀
💡 Não se sinta culpado caso precise olhar a solução para conseguir implementar partes do desafio. Esse projeto irá te desafiar, principalmente se você não tiver muita experiência com React, e isso faz completamente parte do aprendizado 💜
6. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github.
Além disso que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência?
É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar! Vai ser incrível acompanhar a sua evolução! 💜
Feito com 💜 por Rocketseat 👋
1. Regras principais do sistema
- O usuário deve visualizar a listagem de cafés disponíveis com nome, descrição, preço e opções de quantidade.
- O usuário pode adicionar uma quantidade específica de cafés ao carrinho.
- O usuário pode aumentar ou diminuir a quantidade de itens já no carrinho.
- O usuário deve conseguir remover itens individualmente do carrinho.
- No Header deve aparecer o total de itens adicionados ao carrinho.
- Deve existir um formulário de endereço de entrega, com campos validados (CEP, rua, bairro, cidade, UF, etc).
- O usuário deve escolher o método de pagamento (cartão de crédito, débito ou dinheiro).
- O sistema deve exibir o valor total da compra, calculado a partir da soma dos itens e suas quantidades.
- Após confirmar, deve ser exibida uma página de sucesso do pedido, contendo o resumo do endereço e pagamento.
2. Conceitos e ferramentas a praticar
- Estados e imutabilidade
- ContextAPI para gerenciamento global do carrinho
- LocalStorage para persistir itens do carrinho mesmo após atualizar a página
- Manipulação de arrays (
map,filter,reduce) - Componentização e propriedades
- Validação de formulários com
react-hook-form+zod - Estilização com
styled-components - Navegação com
react-router-dom
3. Estrutura esperada do desafio
- Página Home com listagem de cafés
- Página Carrinho/Checkout com formulário de entrega e resumo da compra
- Página de Confirmação com os dados do pedido finalizado
- Uso de ContextAPI para compartilhar o estado global do carrinho entre as páginas
4. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais ferramentas que utilizamos durante o desenvolvimento do módulo da formação.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além 🚀
5. Solução
Nós disponibilizamos também um código com uma possível solução para esse desafio.
Nesse repositório você vai encontrar o desafio implementado com diversos detalhes adicionais que melhoram a experiência do usuário. Vai lá dar uma olhadinha para ver o que você pode aprender de novo ou até para implementar na sua própria solução 🚀
💡 Não se sinta culpado caso precise olhar a solução para conseguir implementar partes do desafio. Esse projeto irá te desafiar, principalmente se você não tiver muita experiência com React, e isso faz completamente parte do aprendizado 💜
6. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github.
Além disso que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência?
É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar! Vai ser incrível acompanhar a sua evolução! 💜
Feito com 💜 por Rocketseat 👋
Tarefas
Use este checklist para ajudar a organizar a sua entrega