CoffeeLivery is a simple application to manage a shopping cart for a fictional coffee shop. Users can browse available products, add items to their cart, adjust quantities, input their address, and view the total items and their corresponding prices.
coffelivery.mp4
These instructions will allow you to get a copy of the project and run the application locally for development and testing purposes.
- First, you need to have NodeJS installed on your machine. To do this, access the official NodeJS website by clicking here and follow the installation instructions for your operating system.
-
Clone the repository using the command or download the .zip file and extract the contents:
git clone https://github.com/lukeskw/react-coffeelivery.git
-
Access the project folder
-
Install the project dependencies
npm install
-
Run the project in development mode
npm run dev
- Listing available products (coffees) for purchase
- Adding a specific quantity of items to the cart
- Increasing or decreasing the quantity of items in the cart
- Form for the user to fill in their address
- Displaying the total number of items in the cart in the Header
- Displaying the total value of the sum of items in the cart multiplied by the unit price
- TypeScript - A superset of JavaScript that adds static type definitions, enhancing code quality and developer productivity.
- ReactJS - A JavaScript library for building user interfaces, providing a component-based architecture and efficient rendering.
- Tailwind CSS - A utility-first CSS framework used for styling, providing a low-level utility approach for building custom designs.
- Tailwind Merge - A Tailwind CSS plugin that adds utilities for merging utility classes, enabling more flexible and concise styling.
- Vite - A blazing fast build tool for modern web development, offering instant server start and optimized build times.
- Axios - A promise-based HTTP client for making requests to APIs, used for handling asynchronous operations in web applications.
- Day.js - A lightweight and fast JavaScript library for parsing, validating, manipulating, and formatting dates.
- Phosphor React - A library of SVG icons as React components, offering a collection of customizable for use in web applications.