Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
056408e
hook up API to react view
joelamb Oct 11, 2018
94b5953
relocate assets
joelamb Oct 11, 2018
6dea10e
menu and order form
joelamb Oct 12, 2018
abb511f
update current order
joelamb Oct 12, 2018
0e445b3
key to reset order form quantity on new item select
joelamb Oct 12, 2018
81ff3a1
add to order basket and update quantity if already ordered
joelamb Oct 12, 2018
13ec4ad
update orders from bsket submit
joelamb Oct 13, 2018
76573b6
conditional rendering of order steps
joelamb Oct 13, 2018
af41a0f
review and amend basket before submitting order
joelamb Oct 13, 2018
5947390
refactoring
joelamb Oct 13, 2018
300c353
refactoring
joelamb Oct 13, 2018
8e10305
clean up
joelamb Oct 13, 2018
f22e7a0
UX
joelamb Oct 13, 2018
a85aec2
debug remove item from order basket
joelamb Oct 13, 2018
b433988
clean up console.logs
joelamb Oct 13, 2018
4173bfe
customer order tracking
joelamb Oct 13, 2018
bc58b07
menu item details endpoint
joelamb Oct 13, 2018
e218a1d
refactoring and simplifying
joelamb Oct 13, 2018
d9b9ea5
tests
joelamb Oct 13, 2018
7aefd3f
order tests
joelamb Oct 13, 2018
2adec54
basic order style
joelamb Oct 13, 2018
89f9db4
styling, refactoring and menu updates
joelamb Oct 13, 2018
8ac8aad
menu
joelamb Oct 13, 2018
c679347
menu by category
joelamb Oct 13, 2018
c542647
2 decimal places for all prices and totals
joelamb Oct 13, 2018
1af9740
styling
joelamb Oct 14, 2018
9546940
end-to-end ordering journey style
joelamb Oct 14, 2018
911f63f
desktop layout
joelamb Oct 14, 2018
0eecfe2
desktop styling
joelamb Oct 14, 2018
63360d1
iPad basket reposition
joelamb Oct 14, 2018
bca54e4
free delivery on orders over £40 and 10% discount on orders over £30
joelamb Oct 14, 2018
b2d1852
image assets
joelamb Oct 14, 2018
c3827c2
refactoring css to simplify UX
joelamb Oct 14, 2018
c88349c
larger desktops styling
joelamb Oct 14, 2018
41b0d12
tests
joelamb Oct 14, 2018
cb2e9d5
modal transition
joelamb Oct 15, 2018
a2aacb8
return order ref to customer
joelamb Oct 16, 2018
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 43 additions & 39 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,74 +4,78 @@ 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
- 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

## 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

<!-- * 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
<!-- - 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.
- 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
- Design and implement a feature of your choosing

## Technical notes

* 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.
- 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.

```js
fetch('http://localhost:8080/api/order', {
method: 'post',
body: JSON.stringify(order),
headers: {
'Content-Type': 'application/json'
}
}).then(function(response) {
method: 'post',
body: JSON.stringify(order),
headers: {
'Content-Type': 'application/json'
}
})
.then(function(response) {
return response.json();
}).then(data => {
})
.then(data => {
// handle response
});
```

* 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.
- 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.

## Next steps

* We will continue working on this project the following weekend where we will add database storage using Postgres and implement authentication using passport.
- We will continue working on this project the following weekend where we will add database storage using Postgres and implement authentication using passport.

## README

* 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
- 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
11 changes: 5 additions & 6 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
module.exports = {
"testURL": "http://localhost/",
setupFiles: [
'<rootDir>/tests/setup.js'
],
"moduleNameMapper": {
"^.+\\.(css|less|scss)$": "identity-obj-proxy"
testURL: 'http://localhost/',
verbose: true,
setupFiles: ['<rootDir>/tests/setup.js'],
moduleNameMapper: {
'^.+\\.(css|less|scss)$': 'identity-obj-proxy'
}
};
Loading