Roland's DeliverEat: Lovely Grubbly

.gitignore

@@ -1,5 +1,7 @@
 /node_modules
+.env
 /dist
+/static/images-local
 /static/bundle.js
 /static/bundle.js.map
 .DS_Store

Procfile

@@ -0,0 +1 @@
+web: node server.js

README.md

@@ -1,83 +1,76 @@
-# Delivereat
+![Screenshot](./static/images/lovely-grubbly-screen-shots.png) 
 
-In this project we will create a database backed version of Delivereat. We will build it as a new project, but feel free to use your original Delivereat project as reference. Be aware that because the data structures we will be working with here are likely to be different, it may not be possible to directly re-use your UI components.
+# Lovely Grubbly
 
-A few notes before we get started
+## Order takeaway food online for delivery
+**Lovely Grubbly** is an online restaurant which brings the best local food to your doorstep. It allows you to browse the menu and add dishes to the shopping basket which shows a full breakdown of costs including dellivery. To place your order you enter your details and immediatly receive confirmation by text with an order ID.
 
-* Fork and clone this repo
-* 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
-* 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
+> [View the live demo](https://lovely-grubbly.herokuapp.com)
 
-## Features
+> [View the repo on Github](https://github.com/rolandjlevy/lovely-grubbly)
 
-**Database and API**
+--- 
 
-* Design a database that will allow you to store a menu and orders. Start out with pen and paper first sketching out the tables and columns you will need, as well as the relationships between the tables.
-* The database will need to store a menu which will contain item name and price. We will also need to store orders. Each order can have multiple menu items and each menu item can appear in multiple orders. Each menu item ordered will also need to have a quantity.
-* Store the SQL commands used to create database and populate with initial data in a `database.sql` file in your repo. It will allow us to review your database code and also make it easy for you to rebuild database.
-* Create a RESTful API that will allow you to get the menu and save new orders
-* Test the API using Postman
-
-**Menu**
-* Design and build a front end UI that will load the menu from the API and display it to the user
-
-**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 functionality to submit orders to the API and display a notification to the user with order id
-
-## Stretch goals
-
-**Own feature**
-
-* Design and implement a feature of your choosing
-
-**SMS notification**
-
-* Add a phone number input to your UI and a column in orders table to store it.
-* Update the API to receive the phone number as part of the order
-* Sign up for an account with Twilio. It's an API that allows you to send SMS messages and do lots of other cool things with phones. Use the signup code WELOVECODE to receive $20 credit.
-* Implement SMS notification using Twilio to send an SMS notification to a user letting them know that the order has been received.
-
-**Unit tests**
-
-* Add unit tests to your application where appropriate
-
-## Technical notes
-
-* Run `npm install` after cloning to download all dependencies
-* Use `npm run dev -- --watch` to build React
-* You will need to create a `.env` file to store your database credentials. Make sure you add it to `.gitignore` file so that the credentials do not get commit to git and end up in public.
-* 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) {
-    return response.json();
-  }).then(data => {
-    // handle response
-  });
+## Installation and set up
++ 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
+```
+DB_HOST=localhost
+DB_NAME=
+DB_USERNAME=
+DB_PASSWORD=
+TWILIO_SID_TEST=
+TWILIO_AUTH_TEST=
+TWILIO_SID_LIVE=
+TWILIO_AUTH_LIVE=
 ```
 
-* Check out [Nodemon](https://nodemon.io/) to automatically rebuild and restart your server when changes are saved.
-
-## 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
++ 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
+
+### API Keys needed
++ [Twilio API](https://www.twilio.com/docs/libraries/node) - for sending booking confirmation by text
+
+---
+
+### Tech stack
++ React
++ PostgreSQL
++ Node.js
++ Express
++ Handlebars
++ SCSS
++ Classnames
++ Flex-box
++ Git
+
+### Build tools
+- Webpack
+- Babel
+
+### Stages of development
++ Planned structure of the database tables and their relationships
++ Created database tables, sourced text and image data, entered data into database tables
++ Set up and created the core functionality in React
++ Used SCSS and Flexbox to style the UI
++ Implemented functionality for:
+> + menu listing page
+> + shopping basket
+> + viewing an order
+
+### Functionality and features
++ Food courses, Startes / Mains / Desserts can be filtered 
++ 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
++ Each item has an image icon which is a tooltip showing a preview of the menu item
++ A booking can then be make by adding your name and number 
++ You receive a booking confirmation by text with your booking ID
++ You can view your order by clicking on the member icon entering your order ID
+
+### Desired features with more time
++ To have a responsive layout for tablet and desktop screen sizes
++ To calculate the estimated time of delivery based on the customer's location
++ To enable customers to track their order on their phone
++ Allow customers to amend their order within a limited time period 

basket-layout.txt

@@ -0,0 +1,16 @@
+Your Basket
+==============
+
+- 1 +   Grilled Mexican Chicken
+- 1 +   Vegetarian - Tastiest Grilled Fajita 
+- 1 +   Veggies to Ever Grace Your Burrito Meal
+- 1 +   Southwest, BBQ, Diet Coke, Sprite, Guacamole
+
+Subtotal        £39.99
+Delivery Fee    £2.99
+Total           £42.97
+
+Name:           ____________
+Tel:            ____________
+
+[ Place Order ]

database.sql

@@ -0,0 +1,51 @@
+CREATE database cafe
+
+DROP TABLE menu_purchase
+
+-- create tables
+
+CREATE table menu (
+  id serial PRIMARY KEY,
+  item text NOT NULL,
+  price numeric(4,2) NOT NULL,
+  img text NOT NULL,
+  course text NOT NULL
+);
+
+-- DROP TABLE menu_purchase
+-- DROP TABLE purchase
+
+CREATE table purchase (
+  id serial PRIMARY KEY,
+  name text NOT NULL,
+  telephone text NOT NULL,
+  created_at TIMESTAMP NOT NULL
+);
+
+CREATE table menu_purchase (
+    id serial PRIMARY KEY,
+    quantity numeric default 0,
+    menu_id smallint,
+    purchase_id smallint,
+    FOREIGN KEY (menu_id) REFERENCES menu (id),
+    FOREIGN KEY (purchase_id) REFERENCES purchase (id)
+);
+
+-- insert items into menu table
+
+INSERT INTO menu (item, price, img, course) VALUES ('Mixed Salad', 6, 'mixed-salad.jpg', 'starter');
+INSERT INTO menu (item, price, img, course) VALUES ('Fried Chicken', 7, 'fried-chicken.jpg', 'starter');
+INSERT INTO menu (item, price, img, course) VALUES ('Vegetable soup', 5, 'vegetable-soup.jpg', 'starter');
+INSERT INTO menu (item, price, img, course) VALUES ('Beef stew', 9, 'beef-stew.jpg', 'main');
+INSERT INTO menu (item, price, img, course) VALUES ('Fish & chips', 11, 'fish-chips.jpg', 'main');
+INSERT INTO menu (item, price, img, course) VALUES ('Pork chops & vegetables', 9, 'pork-and-veg.jpg', 'main');
+INSERT INTO menu (item, price, img, course) VALUES ('Chocolate cake', 4, 'chocolate-cake.jpg', 'dessert');
+INSERT INTO menu (item, price, img, course) VALUES ('Blueberry cheesecake', 3.50, 'blueberry-cheesecake.jpg', 'dessert');
+INSERT INTO menu (item, price, img, course) VALUES ('Trifle', 3, 'trifle.jpg', 'dessert');
+
+-- update for any changes
+-- UPDATE menu SET item = 'Pork chops & vegetables', price = 10, img = 'pork-and-veg.jpg'  WHERE id = 6
+
+-- alter columns for any changes
+-- ALTER TABLE purchase DROP COLUMN time;
+-- ALTER TABLE purchase ADD COLUMN time TIMESTAMP NOT NULL;

multiple-promise-jim.js

@@ -0,0 +1,32 @@
+const purchases = {
+    "items": {
+        "1": { 
+            "id": 1, 
+            "quantity": 2 
+        },
+        "2": { 
+            "id": 2, 
+            "quantity": 3 
+        }
+    },
+    "name": "Matt",
+    "tel": "07901 972 811"
+}
+
+app.post("/order", (req, res) => {
+  // 1. insert into "order" table
+  db.one("INSERT INTO order (id) VALUES (DEFAULT) RETURNING id")
+  .then(result => {
+      const orderId = result.id;
+      const { items } = req.body;
+      // 2. insert into "order_item" table for each item
+      return Promise.all(items.map(item => {
+        return db.none(
+          "INSERT INTO order_item (menu_id, order_id, quantity) VALUES ($1, $2, $3)",
+          [item.menuItemId, orderId, item.quantity]
+        );
+      })).then(() => orderId);
+    })
+  .then(orderId => res.json({ orderId: orderId }))
+  .catch(error => res.json({ error: error.message }));
+});