Code Monkey home page Code Monkey logo

coffee-delivery's Introduction

lang-en lang-pt-br

Repository language count Repository size Commit activity Last commit Project license Layout designer

Screenshot of the application initial page

Go to the web application β†—

πŸ“’ Table of Contents

πŸ“ Overview

This project is a web application developed in React and TypeScript for buying coffee for delivery, which allows users to search among the available coffees and add them to their orders to be delivered to their homes.

The application offers features such as a shopping list, to add the products you want, and a checkout to enter your personal information and finalize the purchase (front-end only). With an easy interface, the ordering process is more convenient, as the cart is saved in a local browser storage.

✨ Features

β˜• Navigate through the different kinds of coffees available to choose from

πŸ›’ Add the quantity you want of the selected products to your cart

πŸ”„ Your cart is stored until you close the order, so you can refresh the page with no worry

πŸ’³ Validate your purchase and complete it securely

πŸ›΅ Wait for delivery to be made (only symbolic)

πŸ€– Demo

coffee-delivery.mp4

🎨 Layout

The layout of the application was designed by Rocketseat and is available on Figma.

Web application layout image cover

πŸ›  Technologies

The following tools were used to build the project:

Website

Vite React TypeScript ESLint Rocketseat ESLint config

React Router React Hook Form Zod Immer

styled-components Phosphor Icons

* See the package.json file

Utils

Git Node.js Figma Google Fonts VSCode

πŸš€ Getting Started

βœ”οΈ Prerequisites

Before you begin, ensure that you have the following tools installed on your machine: Git, Node.js. It's also good to have an editor to work with the code, such as VSCode.

πŸ“¦ Installation

  1. Clone the repository:
git clone https://github.com/guipmdev/coffee-delivery/
  1. Change to the project directory:
cd coffee-delivery
  1. Install the dependencies:
npm install

βš™οΈ Usage

  1. Start the web application:
npm run dev
  1. Access https://localhost:5173/ to view the application

πŸ“„ License

This project is licensed under the terms of the MIT license. See the LICENSE file for additional info.

πŸ‘ Acknowledgments

  • Many thanks to Rocketseat for the layout and tips when putting this project together

Made with πŸ’™ by @guipm.dev - Feel free to contact me!


↑   Return to the top   ↑

coffee-delivery's People

Contributors

guipmdev avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.