Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Project complete #12

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
73 changes: 10 additions & 63 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,77 +1,24 @@
# Delivereat

Let's create an app that allows customers to order food online.

A few notes before we get started

* Fork and clone repo at [https://github.com/constructorlabs/delivereat](https://github.com/constructorlabs/delivereat)
* Start by building the simplest thing that works. Add to it as you go along. Test your application as frequently as possible to make sure it does what you expect
* Create a RESTful API for your service. Think about a good way to organise your API into **nouns** and **verbs**, which correspond to **resources** and **HTTP methods**
* Split your code into an API on the server and render data from server in browser using React.
* Splitting out our application into an API and interface allows us to re-use the API. For example we could use it to create a native mobile app or allow third parties to place orders on our system
* Commit frequently and push to Github
* Implement features one at a time
* Make sure your app is responsive
* You may want to design the API first, before implementing the UI that uses and API
A webapp for ordering take away food utilising our own API

## Features

**Menu**
* Design a menu for a restaurant such as food items, prices etc. By providing each item with an id we can refer to it later. The first item has already been created for you. Feel free to amend it.
* Create an API endpoint that returns a menu of items with prices available to order
* Create a page that displays the menu to the user using the API

**Order**

* Update the menu page to make it an order page
* It should allow the user to specify quantities of items to order
* It should add a delivery charge and display the total order cost
* Create an API to receive and save the submitted order

## Stretch goals

**Closures**

* Rather than storing all data in global scope on the server, try to implement data manipulation and retrieval functionality using closures.

**Own feature**

* Design and implement a feature of your choosing
* Currently app fetches menu from a single restaurant, with a small selection of meals. Items can be added to order which is then posted.

## Technical notes
* Most popular feature. Currently displays any item that has been ordered more than 3 times, which is not ideal but works for proof of concept.

* Run `npm install` after cloning to download all dependencies
* Use `npm run dev -- --watch` to build React
* Use `node server.js` to run the Node server in another tab
* Place all static files such as images and CSS in the `static` folder. When requesting those files from the server use `/static` at the beginning of the URL. For example `<link rel="stylesheet" type="text/css" href="/static/styles.css">`
* `bundle.js` produced by webpack will be output in the `static` folder
* To send data server using a POST, PUT or PATCH request you can do something the example below, where `order` is an object we want to send to the server and `http://localhost:8080/api/order` is URL we want to send it to.
## Missed goals & difficulties

```js
fetch('http://localhost:8080/api/order', {
method: 'post',
body: JSON.stringify(order),
headers: {
'Content-Type': 'application/json'
}
}).then(function(response) {
return response.json();
}).then(data => {
// handle response
});
```
* Little to no styling, on either mobile or deskto versions

* Check out [Nodemon](https://nodemon.io/) to automatically rebuild and restart your server when changes are saved.
* Hint: keep menu data and order data separate. Rather than storing prices in orders, refer to the menu data. This prevents unnecessary data duplication and helps ensure we maintain a single source of truth for each data item.
* No function scoped closures in placeOrder

## Next steps
* Not sure if I've implemented most popular meals in best way, but found this quite a difficult process of flattening objects in order to loop through them propertly.

* We will continue working on this project the following weekend where we will add database storage using Postgres and implement authentication using passport.
* Due to not having an actual database to work from to implement the popular meals function, Jim helpfully provided some code to mock this. He has made me aware that this is not to be used in an actual production.

## README
* Was unsure how to use multiple endpoints when there is only one restaurant - can imagine the usage however if there were multiple restaurants and cuisines to choose from.

* Produce a README.md which explains
* what the project does
* what technologies it uses
* how to build it and run it
* any unresolved issues the user should be aware of
* unsure if I have implemented orders correctly.
295 changes: 295 additions & 0 deletions orders-db.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,295 @@
{
"fTwdsVqm4": {
"id": "fTwdsVqm4",
"order": {
"total": 14,
"items": {
"1": {
"quantity": 1,
"totalPrice": 10,
"menuItem": {
"id": 1,
"name": "Beefburger",
"price": 10
}
},
"5": {
"quantity": 1,
"totalPrice": 4,
"menuItem": {
"id": 5,
"name": "Chips",
"price": 4
}
}
}
}
},
"QCHVTHRbl": {
"id": "QCHVTHRbl",
"order": {
"total": 20,
"items": {
"4": {
"quantity": 1,
"totalPrice": 12,
"menuItem": {
"id": 4,
"name": "Lamb burger",
"price": 12
}
},
"5": {
"quantity": 1,
"totalPrice": 4,
"menuItem": {
"id": 5,
"name": "Chips",
"price": 4
}
},
"6": {
"quantity": 1,
"totalPrice": 4,
"menuItem": {
"id": 6,
"name": "Onion rings",
"price": 4
}
}
}
}
},
"jFfotpeuY": {
"id": "jFfotpeuY",
"order": {
"total": 13,
"items": {
"3": {
"quantity": 1,
"totalPrice": 13,
"menuItem": {
"id": 3,
"name": "Stiltonburger",
"price": 13
}
}
}
}
},
"jGvjgp_En": {
"id": "jGvjgp_En",
"order": {
"total": 13,
"items": {
"3": {
"quantity": 1,
"totalPrice": 13,
"menuItem": {
"id": 3,
"name": "Stiltonburger",
"price": 13
}
}
}
}
},
"xFpI_3tZr": {
"id": "xFpI_3tZr",
"order": {
"total": 7,
"items": {
"10": {
"quantity": 1,
"totalPrice": 7,
"menuItem": {
"id": 10,
"name": "Churros",
"price": 7
}
}
}
}
},
"OvTVJQwEb": {
"id": "OvTVJQwEb",
"order": {
"total": 7,
"items": {
"10": {
"quantity": 1,
"totalPrice": 7,
"menuItem": {
"id": 10,
"name": "Churros",
"price": 7
}
}
}
}
},
"R0sfclnIO": {
"id": "R0sfclnIO",
"order": {
"total": 13,
"items": {
"3": {
"quantity": 1,
"totalPrice": 13,
"menuItem": {
"id": 3,
"name": "Stiltonburger",
"price": 13
}
}
}
}
},
"EpbUcDhe1": {
"id": "EpbUcDhe1",
"order": {
"total": 4,
"items": {
"6": {
"quantity": 1,
"totalPrice": 4,
"menuItem": {
"id": 6,
"name": "Onion rings",
"price": 4
}
}
}
}
},
"gQgrJGs15": {
"id": "gQgrJGs15",
"order": {
"total": 17,
"items": {
"3": {
"quantity": 1,
"totalPrice": 13,
"menuItem": {
"id": 3,
"name": "Stiltonburger",
"price": 13
}
},
"6": {
"quantity": 1,
"totalPrice": 4,
"menuItem": {
"id": 6,
"name": "Onion rings",
"price": 4
}
}
}
}
},
"4cR6vI1SA": {
"id": "4cR6vI1SA",
"order": {
"total": 17,
"items": {
"3": {
"quantity": 1,
"totalPrice": 13,
"menuItem": {
"id": 3,
"name": "Stiltonburger",
"price": 13
}
},
"6": {
"quantity": 1,
"totalPrice": 4,
"menuItem": {
"id": 6,
"name": "Onion rings",
"price": 4
}
}
}
}
},
"pbHdsFYmK": {
"id": "pbHdsFYmK",
"order": {
"total": 17,
"items": {
"3": {
"quantity": 1,
"totalPrice": 13,
"menuItem": {
"id": 3,
"name": "Stiltonburger",
"price": 13
}
},
"5": {
"quantity": 1,
"totalPrice": 4,
"menuItem": {
"id": 5,
"name": "Chips",
"price": 4
}
}
}
}
},
"ISVgLYujC": {
"id": "ISVgLYujC",
"order": {
"total": 17,
"items": {
"3": {
"quantity": 1,
"totalPrice": 13,
"menuItem": {
"id": 3,
"name": "Stiltonburger",
"price": 13
}
},
"6": {
"quantity": 1,
"totalPrice": 4,
"menuItem": {
"id": 6,
"name": "Onion rings",
"price": 4
}
}
}
}
},
"QMTO7t5qQ": {
"id": "QMTO7t5qQ",
"order": {
"total": 21,
"items": {
"1": {
"quantity": 1,
"totalPrice": 10,
"menuItem": {
"id": 1,
"name": "Beefburger",
"price": 10
}
},
"2": {
"quantity": 1,
"totalPrice": 11,
"menuItem": {
"id": 2,
"name": "Cheeseburger",
"price": 11
}
}
}
}
}
}
Loading