Info   |    Technologies   |    How to   |    Roadmap   |    Conclusion

This application simulates an e-commerce, featuring functions such as product listing, shopping cart manipulation, and a form for entering delivery addresses.

This is a project developed in React using the Vite.js builder.

This project was developed following this technologies:

• React
• react-router-dom
• react-hook-form
• styled-components
• Typescript
• Vite.js

## Clone this repo

# https
git clone https://github.com/glmchalita/lab-coffee-delivery

# ssh
git clone [email protected]:glmchalita/lab-coffee-delivery.git

## Access this folder
cd lab-coffee-delivery

## Install dependencies
npm install

## Run the application
npm run dev

In this way, the application will be running locally on the default port 5173 (http://localhost:5173).

Note: If you want to run the application on a different port, use the following command.

npm run dev -- --port 8000

Alternatively, if you prefer, configure the vite.config file for the desired port.

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 8000,
  },
})

• Add page to see orders history
• Add new buttons style
• Add CEP API to automatically fill the address form
• Add delivery fee calculator based on CEP
• Add API to change header location span automatically

Project designed by Rocketseat, the purpose of the project was to learn, in practice, router and form management.

I also learned a new way to format tags using grid-area, which greatly facilitated organizing the form on the Checkout page.

I also had to figure out how to use the useNavigate from react-router-dom, reading the documentation and testing to understand how this hook from the library worked.

And not least, always learning new ways to use CSS for various design-related issues.

(back to top)