Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,5 @@
/static/bundle.js
/static/bundle.js.map
.DS_Store
.env
.send_sms.js
105 changes: 44 additions & 61 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,77 +1,60 @@
# Delivereat
# DeliverEATs
---
![Screenshot](./static/images/Screenshots.png)
---
## Order your food online with DeliverEATs!
This is a simple app based on my favourite dishes from Wagamama. Customers are able to add and remove items from the basket and place their order either by loggin in or as a new customer. When the order is placed, the customer receives a text message confirming it whilst the app displays a modal with the order number.

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

A few notes before we get started
## Installation and set up

* 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
- Clone the project and run `npm install`
- Create your own local PostreSQL database instance and create the tables by running `pgweb` navigating to localhost:8081 and running the query in the `database.sql` file.
- Create a `.env` file with the following variables

## 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
```
DB_HOST=localhost
DB_NAME=
DB_USERNAME=
DB_PASSWORD=

**Closures**
```
- In order to receive confirmation texts from the app, also add the following variables to `.env` file:

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

**Own feature**
- Run `npm start` to launch the app and navigate to localhost:8080
- Use `npm run dev -- --watch` to build React
- Navigate to `localhost:8080` in your browser to view

* Design and implement a feature of your choosing
---

## Technical notes
### Tech stack

* 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.
- React
- PostgreSQL
- Node.js
- Express
- Handlebars
- SCSS
- Classnames
- Git
- Twilio

```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
});
```
### Build tools

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

## 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.
### Functionality and features

## README
- Menu items can be added, removed from the basket and increase/decreased in quantity
- Added menu items can be viewed in the basket menu with a breakdown of costs
- An order can be placed with order ID output and text message confirmation
- Return customers are able to log in

* 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
52 changes: 52 additions & 0 deletions database.sql
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
create database delivereat;

create table transaction (
id serial primary key,
order_time timestamp NOT NULL
)

create table menu (
id serial,
item_name varchar(50) not null,
item_price numeric(5, 2),
primary key (id)
);

create table basket (
id serial primary key,
transaction_id int,
menu_id int,
quantity smallint not null,
foreign key (transaction_id) references transaction(id),
foreign key (menu_id) references menu (id)
)

alter table menu add column image varchar(50)

insert into menu (id, item_name, image, item_price) values (1, 'chilli squid', 'squid.png', 6.75);
insert into menu (id, item_name, image, item_price) values (2, 'pulled pork qyoza', 'gyoza.png', 5.95);
insert into menu (id, item_name, image, item_price) values (3, 'bbq beef steamed hirata', 'hirata.png', 6.55);
insert into menu (id, item_name, image, item_price) values (4, 'chicken ramen', 'ramen.png', 9.95);
insert into menu (id, item_name, image, item_price) values (5, 'yaki udon', 'udon.png', 9.95);
insert into menu (id, item_name, image, item_price) values (6, 'chicken katsu curry', 'curry.png', 10.75);
alter sequence menu_id_seq restart with 7 increment by 1;


-- "timestampz" type did not work for some reason
alter table transaction add column order_time timestamp with time zone;


-- did not set username and user_password to not null required, because this table was added later in the project.
create table customer (
id serial,
username varchar(50),
user_password varchar(50),
primary key (id)
)

alter table transaction add column customer_id int, add constraint fk_customer foreign key (customer_id) references customer (id)

alter table customer
add column name varchar(50),
add column address varchar(200),
add column mobile varchar(15)
Loading