Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/spreston4/order-food
Populate a shopping cart with food items. Built in React.js.
https://github.com/spreston4/order-food
ecommerce firebase firebase-realtime-database html-css-javascript jsx react responsive-web-design restaurant-menu shopping-cart
Last synced: about 1 month ago
JSON representation
Populate a shopping cart with food items. Built in React.js.
- Host: GitHub
- URL: https://github.com/spreston4/order-food
- Owner: spreston4
- Created: 2022-01-13T21:32:16.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-01-31T23:44:16.000Z (almost 3 years ago)
- Last Synced: 2023-07-17T22:40:41.272Z (over 1 year ago)
- Topics: ecommerce, firebase, firebase-realtime-database, html-css-javascript, jsx, react, responsive-web-design, restaurant-menu, shopping-cart
- Language: JavaScript
- Homepage: https://spreston4.github.io/order-food/
- Size: 5.97 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [Order Food](https://spreston4.github.io/order-food/)
## Description
Order Food is a responsive, mobile friendly, mock front end application for a restaraunt's ordering service. Customers can browse the restaraunt's menu and add items to their cart. Customers can view their cart at anytime to see all items that have been placed in the cart, and the total amount of their order. Customers can adjust the quantity of items from their cart, or choose to empty their cart alltogether. After placing their order, customers are prompted to enter their delivery address & asked to confirm their order. After confirming their order, customers are presented a confirmation message containing their delivery & order details. Menu items are populated from a Firebase Realtime Database. All confirmed orders are sent to the Firebase Realtime Database.
- [Deployed Order Food Application](https://spreston4.github.io/order-food/)
- [GitHub Repo for the Order Food application](https://github.com/spreston4/order-food)
## Table of Contents
- [Intallation](#installation)
- [Usage](#usage)
- [Technologies Used](#technologies-used)
- [Finished Product](#finished-product)
- [Contact Me](#contact-me)
## Installation
1. Download the project to the location of your choice.
2. Navigate to the project directory.
3. From the root of the directory, install the project with the following command:
```
npm install
```
## Usage
1. Navigate to the the project directory.
2. To run locally, run the following command from the root of the directory:
```
npm start
```
3. The user is presented with the restaraunt's menu and an empty cart.
4. The user can select an amount of each item and press the 'Add to Cart' button to add items to their cart.
5. To view the cart, select the 'Your Cart' button in the top right corner
6. Users can adjust the amount of each item in their cart by selecting the '+' and '-' buttons next to their items.
7. Users can clear their entire cart contents by selecting the 'Empty Cart' button.
8. Select the 'Close' button to close the cart and continue shopping.
9. Selecting the 'Order' button will display an order form, prompting the user to enter their delivery information.
10. The user can select 'Cancel" to return to their cart, 'Reset Form' to reset all fields of the form, or 'Confirm Order' to place their order - the 'Confirm Order' button is disabled until all fields have valid input.
11. After confirming their order, the user is presented with a confirmation message containing their delivery & order details. Pressing the 'Close' button will clear the cart contents & return the user to the homepage.
## Technologies Used
Built in Visual Studio with:
- React.js
- JavaScript
- CSS Modules
- Firebase Realtime Database
## Finished Product
- [Deployed Order Food Application](https://spreston4.github.io/order-food/)
### Desktop Version
### Mobile Version
## Contact Me
Questions, comments, or concerns about this project? Contact via e-mail or checkout my GitHub!
- GitHub: [spreston4](https://github.com/spreston4)
- E-mail: [[email protected]](mailto:[email protected])