https://github.com/rodrigofontesdev/coffee

An online coffee shop built with React.
https://github.com/rodrigofontesdev/coffee

mobile-friendly react styled-components typescript

Last synced: about 1 month ago
JSON representation

An online coffee shop built with React.

• Host: GitHub
• URL: https://github.com/rodrigofontesdev/coffee
• Owner: rodrigofontesdev
• License: mit
• Created: 2024-04-27T14:02:15.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-05-30T17:34:36.000Z (9 months ago)
• Last Synced: 2024-11-11T06:19:58.727Z (3 months ago)
• Topics: mobile-friendly, react, styled-components, typescript
• Language: TypeScript
• Homepage:
• Size: 2.18 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![cover](https://github.com/rodrigofontesdev/coffee/assets/17281370/9da4e118-bb43-4017-b966-29c560c1e3b5)

# Coffee Delivery

An online coffee shop to buy and receive your coffee wherever you are, at any time.

The purpose of the project is to delve deeper into React features, to practice using ReactJS even more.

# Prerequisites

- Node.js

- Git

# Getting Started

- Clone the repository (`git clone [email protected]:rodrigofontesdev/coffee.git`)

- Install dependencies (`npm install`)

- Run application (`npm run dev`)

# Features

- List available products for purchase

- Filter products

- Add products to the cart

- Increase or decrease the quantity of individual products in the cart

- Remove products from the cart

- Form for users to fill their address and choose a payment method

- Create order

- Recover abandoned cart

# I've Learned

- Create components

- Share data between components (`props` and `Context API`)

- Render lists (lists and `key`)

- Maintain data persistence between renders (`useState()`)

- Immutability and techniques to avoid accidental mutations

- CSS-in-JS styling with Styled Components

- Create routes with React Router DOM

- Controlled and uncontrolled components

- Form validation with React Hook Form and Zod

- Store data in user's browser with localStorage

- Perform side effects in components (`useEffect()`)

- Build custom React hooks

- Manage complex states (`useReducer()`)

# Built With

- React

- TypeScript

- Styled Components

# License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details.