https://github.com/kauecdev/coffee-delivery
Coffee Delivery - Desafio 02 React - Rocketseat
https://github.com/kauecdev/coffee-delivery
context-api react react-hook-form styled-components typescript
Last synced: 2 months ago
JSON representation
Coffee Delivery - Desafio 02 React - Rocketseat
- Host: GitHub
- URL: https://github.com/kauecdev/coffee-delivery
- Owner: kauecdev
- Created: 2024-05-18T16:17:40.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-16T23:39:19.000Z (about 2 years ago)
- Last Synced: 2025-01-31T11:30:10.504Z (over 1 year ago)
- Topics: context-api, react, react-hook-form, styled-components, typescript
- Language: TypeScript
- Homepage:
- Size: 2.39 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Coffee Delivery
## Desafio 02 - Trilha de React - Rocketseat
## Sobre o projeto:
Uma aplicação para gerenciar um carrinho de compras de uma cafeteria fictícia onde o usuário poderá visualizar um catálogo com várias opções de café, adicioná-los ao carrinho e "efetuar" a compra preenchendo um formulário para o endereço de entrega e método de pagamento. O design foi desenvolvido pela própria Rocketseat e disponibilizado através de um link do Figma.
## Tecnologias usadas:
- React
- Typescript
- Styled Components
- Phosphor Icons
- Context API
- Immer
- React Router
- React Hook Form
- React Hot Toast
- Zod
## Indo além:
Como recurso extra além dos requisitos do desafio resolvi adicionar também um toast informativo para indicar erros na aplicação, como o formulário preenchido de forma incorreto ou o usuário tentando confirmar compra com o carrinho vazio. Além disso, também adicionei a funcionalidade de exibir bordas vermelhas para indicar qual campo do formulário está preenchido incorretamente.
## DIY
OBS: Para executar a aplicação na sua máquina você irá precisar ter instalado o node.
1. Baixe ou clone o projeto.
2. Instale as dependências usando o comando `npm install` ou `npm i` no diretório do projeto.
3. Use o comando `npm run dev` para inicar a aplicação.
## Screenshots
