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

A simple coffee delivery for practicing routing, context, reducer, form management and Styled components on React.
https://github.com/rcrdk/coffee-delivery

react react-hook-form react-router styled-components typescript zod

Last synced: about 1 month ago
JSON representation

A simple coffee delivery for practicing routing, context, reducer, form management and Styled components on React.

• Host: GitHub
• URL: https://github.com/rcrdk/coffee-delivery
• Owner: rcrdk
• Created: 2024-01-18T19:14:37.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-08-29T13:30:21.000Z (4 months ago)
• Last Synced: 2024-08-29T14:57:29.015Z (4 months ago)
• Topics: react, react-hook-form, react-router, styled-components, typescript, zod
• Language: TypeScript
• Homepage: https://ignite-challenge-coffee-delivery-rcrdk.vercel.app
• Size: 1.87 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ☕️ Coffe Delivery

I developed this project as a challenge of my latest studies on React lessons at [Rocketseat](https://www.rocketseat.com.br).






  



## 🚀 Techs and Tools

- [React](https://reactjs.org)

- [TypeScript](https://www.typescriptlang.org/)

- [Styled Components](https://styled-components.com/)

- [Figma](http://figma.com/)

- [Figma](http://figma.com/)

- [React Router](https://reactrouter.com/en/main)

- [React Hook Form](https://react-hook-form.com/) + [Zod](https://zod.dev/)

## 💻 Project

This project was developed based on a Figma design provied by the school. The main practice was: states and it's immutability; Routing; Context API for managing global states; Reducer for managing all needed actions of coffees cart and form submiting; LocalStorage for saving data on browser; React Hook Form and Zod for validate and send checkout form; Used Styled Components for styling.

**It includes:** add, remove and change quantity of coffeees at cart; calculate prices relative to it's quantity and sum with a fixed shipping tax; Change values, validate and save data coming from form; Show a confirmation page containing information about the order tha was just sent.

## 🔗 Links

- [Design / Figma](https://www.figma.com/file/SBzX33B2kIwlxbnjRIgSZc/Coffee-Delivery-%E2%80%A2-Desafio-React?type=design&node-id=2%3A12&mode=design&t=ghh5cKEvi26mnKef-1)

- [Deploy](https://ignite-challenge-coffee-delivery-rcrdk.vercel.app)