https://github.com/MatheusAndrade23/coffee-delivery

Um site de delivery de cafés desenvolvido com React + Typescript para a trilha de React do Ignite, Rocketseat.
https://github.com/MatheusAndrade23/coffee-delivery

autocomplete react react-hook-form react-icons react-toastify rocketseat typescript zod

Last synced: 2 months ago
JSON representation

Um site de delivery de cafés desenvolvido com React + Typescript para a trilha de React do Ignite, Rocketseat.

• Host: GitHub
• URL: https://github.com/MatheusAndrade23/coffee-delivery
• Owner: MatheusAndrade23
• License: mit
• Created: 2022-08-18T00:32:58.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-08-29T15:26:02.000Z (about 3 years ago)
• Last Synced: 2025-04-04T20:51:16.068Z (7 months ago)
• Topics: autocomplete, react, react-hook-form, react-icons, react-toastify, rocketseat, typescript, zod
• Language: TypeScript
• Homepage:
• Size: 12.1 MB
• Stars: 18
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
🥤 Coffee Delivery ☕




 



Um site de delivery de cafés desenvolvido com React + Typescript para a trilha de React do Ignite, Rocketseat.


---

Demonstração 🎥


_
Um pequeno tour pelo Projeto 💻
_




_
Adicionando e removendo cafés do carrinho 🛒
_




_
Completando Pedidos 📦
_




_
Vendo o Histórico 📄
_







---

Fui além do desafio! 🚀





- ✔️ Fiz o website ser `responsivo`

- ✔️ Adicionei um `tema escuro`

- ✔️ Coloquei `auto complete da cidade e do UF` baseado no CEP

- ✔️ Desenvolvi uma página para ver o `histórico de pedidos`

- ✔️ Adicionei `mensagens` para notificar o usuário

- ✔️ Desenvolvi uma `validação do formulário` em tempo real




---

Mas, o que eu aprendi? 🤔





- Aprendi a utilizar `reducers` para manusear estados mais complexos

- Aprendi a utilizar o `React Hook Form e Zod` para os formulários

- Aprendi a usar o `Date-Fns` para manipular datas

- Aprendi a criar `variáveis auxiliares` para deixar o `código mais limpo e legível`




---

Tecnologias Utilizadas 🛠


#### FrontEnd: `ReactJS!`

- Axios

- React Icons

- React Toastify

- React Hook Form

- Zod Resolver

- Typescript

- Context API

- Uuidv4

- Date-fns

- React Router Dom






  

  

  

  

 





---