The Pizza Place

Pizza place is the solution to a new kind of food delivery/collection business; the artisan micro-seller. These businesses focus on simplicity, are usually the work of one person and put a lot of work into creating a small output of super high quality products, which in turn creates a very high demand. There is minimal customisation available for the customer (no different sizes, minimal topping options) due to time constraints on the service provider.

To make sure they can prepare correctly for their customers the process for ordering is a bit different to how a normal food delivery app/site would work because the delivery slot comes first. While the customer should be able to get an idea of what products are available they must always book a delivery slot before proceeding with an order. Thus creating demand for the delivery slot and getting a chance to try the food and also demand for the food itself.

These businesses typically only work a few days a week and release all their delivery slots on one day, due to the small number of slots these typically sell out quite quickly if they have done their social media marketing correctly! The Pizza project aims to create an app/site which creates a simple and elegant solution to this situation.

Access the live project here

UX

User Stories

Navigation

As a	I want to be able to	So that I can
Customer	View list of available delivery slots	Book a time that suits me
Customer	View list of available menu items	Order some food
Customer	See a list of the ingredients and prices	Narrow down my menu choice

User Accounts

As a	I want to be able to	So that I can
User	Register for an account	See my Order History and save my personal information
User	Receive email confirmations	See if my registration has been successful
User	Log in easily	Aee my order history and see/update my personal details
User	Recover access to my account if I forget my password	Retreive my information

Menu Item location

As a	I want to be able to	So that I can
User	Sort a list of available menu items	See the menu items sorted by category
Customer	Search by name for a specific menu item	Quickly find the one I want to purchase
Customer	Add an item to basket as soon as I see it	Get to the checkout as soon as possible

Purchasing

As a	I want to be able to	So that I can
Customer	Easily select the quantity of the item	Purchase the right quantity for my needs
Customer	Make purchases easily using my credit or debit card	Just think about my food after I have ordered
Customer	View summary of my order before completing my purchase	Make sure I have selected the right items
User	Get an email confirming my purchase	See the process has worked correctly

Site Owner Goals

As a	I want to be able to	So that I can
Site Owner	Let customers see the menu even if this week is sold out	Let them see what they are missing and create demand for next week
Site Owner	Allow customers to book a time slot for delivery	Make sure I have the order ready for that time
Site Owner	Create, read, update or delete menu items	Easily manage the items on the menu
Site Owner	Create, read, update or delete timeslots and timeslot information	To give me control over opening times and slots and increase my flexibility
Site Owner	See a record of the order history sort by date	Check previous orders to make sure they are correct

Wireframes

Wireframes Repository

Home wireframes

Time Slot Page wireframes

Menu Page wireframes

Menu Item Detail wireframes

Shopping Cart wireframes

Checkout wireframes

User Profile wireframes

Admin Profile wireframes

Contact Form Page wireframes

Fonts

Noto sans jp for the logo for a clean bold style. Montserrat for the body for contrast but still an easily readble sans-serif style.

Colour Scheme

Colour scheme was taken from the cartoon pizza image and analysed using the Coolors site to find the exact colour matches. Cream was chosen as the main background colour dues to it's contrast with the mainly black body text. This was done to enhance user experience for visually impaired users.

Fon

Features

Navbar

Easily navigate the website on all screens and use it to search for products.

Footer

To show relevant customer information that whould be availabel on all screens.

Timeslot App

For Users to select and find information on timeslots if available.
For Admins to be able to create, read, update and delete timeslots.
User feedback success message displayed when timeslot is booked.

Menu App

For users to select and find information on menu items if available.
For admins to be able to create, read, update and delete timeslots.
Users can get detailed information about menu items and choose quantity by clicking on the item image.
User feedback success message displayed when item added to cart.

Cart App

For users to be able to see items in their shopping cart, check them and make amendments before moving to checkout.
Actions give the user suitable feedback.

Checkout App

For users to be able to put in their details for delivery and if logged in to be able to save these details.
To get a brief summary for the their order and timeslot.
Payment information so they can pay for their order.
To see relevant user feedback if they have successfully processed an order or if there are any errors.

Features not implemented

API for looking up address from just postcode
Login via social media
An option to collect the order rather than have it delivered
The ability to sign up for alerts when time slots are released
For the user to have more than 1 address

Technologies Used

Django An amazingly powerful framework on which the project is built. It has been love at first sight.

HTML5 for the structure of the website

CSS 3 for the look of the website

Python 3 Language to write code for data manipulation at the back end of the app within the flask framework.

Bootstrap 4 website framework with html, css and javascript.

Fontawesome for icons.

Javascript for the logic of the game. To manipulate the HTML and CSS on the screen.

jQuery to manipulate the HTML and CSS on the screen.

JShint to validate javscript code.

Coolors for help with colours and colours scheme

Webformatter for formatting HTML, CSS and javascript code.

Asana for project management

Balsamiq Wireframes for creating Wireframes for initial visual development

Visual Studio Code

Gitpod for writing and testing code.

GitHub for storing code.

Crispy Forms for quick easy forms based on user models.

Boto3 to configure amazon web services s3 bucket.

Dj Database URL to create a dictionary of the database info

Stripe for making debit and credit card payments on the site.

Psychopg postgresql driver used in deployment.

Green Unicorn as a python wsgi http server.

Google Fonts for fonts used in the project.

Google Chrome Development Tools for testing code on various device sizes during development and debugging.

Amazon Web Services S3 for cloud based static files.

Google Lighthouse for testing code health, accessibility, speed and search engine optimisation.

Information Architechture

Data Models

Checkout App

Order Model

Name	Field Type	Validation
order_number	CharField	max_length=32, null=False, editable=False
user_profile	ForeignKey	on_delete=models.SET_NULL, null=True, blank=True, related_name='orders'
full_name	CharField	max_length=50, null=False, blank=False
street_address1	CharField	max_length=80, null=False, blank=False
street_address2	CharField	max_length=80, null=True, blank=True
town_or_city	CharField	max_length=40, null=False, blank=False
county	CharField	max_length=80, null=True, blank=True
postcode	CharField	max_length=20, null=False, blank=False, default='XXX XXX'
email	EmailField	max_length=254, null=False, blank=False
delivery_info	CharField	max_length=256, null=True, blank=True
timeslot	ForeignKey	on_delete=models.CASCADE, null=True, blank=True, editable=False
phone_number	CharField	max_length=20, null=False, blank=False
date	DateTimeField	auto_now_add=True
delivery_cost	DecimalField	max_digits=6, decimal_places=2, null=False, default=0
order_total	DecimalField	max_digits=10, decimal_places=2, null=False, default=0
grand_total	DecimalField	max_digits=10, decimal_places=2, null=False, default=0
original_cart	TextField	null=False, blank=False, default=''
stripe_pid	CharField	max_length=254, null=False, blank=False, default=''

OrderLineItem Model

Name	Field Type	Validation
order	ForeignKey	null=False, blank=False, on_delete=models.CASCADE, related_name='lineitems'
item	ForeignKey	null=False, blank=False, on_delete=models.CASCADE
quantity	IntegerField	null=False, blank=False, default=0
lineitem_total	DecimalField	max_digits=6, decimal_places=2, null=False, blank=False, editable=False

Menu App

Category Model

Name	Field Type	Validation
name	CharField	max_length=254
friendly_name	CharField	max_length=254, blank=True, null=True

Allergens Model

Name	Field Type	Validation
name	CharField	max_length=254
friendly_name	CharField	max_length=254, blank=True, null=True

MenuItem Model

Name	Field Type	Validation
category	ForeignKey	max_length=254, blank=True, null=True, on_delete=models.SET_NULL
name	CharField	max_length=254
description	TextField	max_length=254, blank=True, null=True
price	DecimalField	max_digits=6, decimal_places=2
image_url	URLField	max_length=1024, null=True, blank=True
image	ImageField	null=True, blank=True
spicy	BooleanField	null=True, blank=True
vegetarian	BooleanField	null=True, blank=True
allergens	ManyToManyField	blank=True

Profiles App

User Model

The model used was the Django standard user model from django.contrib.auth.models

Name	Field Type	Validation
user	OneToOneField	User, on_delete=models.CASCADE
default_full_name	CharField	max_length=20, null=True, blank=True
default_street_address1	CharField	max_length=80, null=True, blank=True
default_street_address2	CharField	max_length=80, null=True, blank=True
default_town_or_city	CharField	max_length=40, null=True, blank=True
default_county	CharField	max_length=80, null=True, blank=True
default_postcode	CharField	max_length=20, null=True, blank=True
default_phone_number	CharField	max_length=20, null=True, blank=True

Timeslot App

Day Model

Name	Field Type	Validation
name	Charfield	max_length=32
date	Datefield	null=True, blank=True

Timeslot Model

Name	Field Type	Validation
day	ForeignKey	null=True, blank=True, on_delete=models.CASCADE
start_time	TimeField	null=True, help_text= Time Format
end_time	TimeField	null=True, help_text= Time Format
available_slots	PositiveSmallIntegerField	null=True, min value = 0, max value = 10

Logical Data Model

Data Schema

Testing

See separate testing file here

Deployment

Run Locally

Ensure that you have an IDE of your choice installed:

An example is Visual Studio Code, which was used for the development of this project

Ensure that the following is installed on your machine.

Please click the links below for documentation on how to set up the following requirements and retrieve the necessary environment variables.

Python 3 as the site's backend is written in Python
PIP for installing Python packages
Git for version control

You will also need to create free accounts with the following services:

AWS and set up an S3 bucket
Stripe

Instructions

Using Git, clone the repository as follows.

git clone https://github.com/markj0hnst0n/pizza-delivery-place

Open your preferred IDE and open a terminal session
Using a virtual environment is recommended. virtualenv can be installed as follows:
```
pip3 install virtualenv
```
Create and navigate to a project folder of your choice
Create a virtual environment using the following command:
```
virtualenv venv
```
Activate your virtual environment as follows:
```
source venv/bin/activate
```
Install all required modules with the following command:
```
pip3 -r requirements.txt
```
Set up the required environment variables
- Create a file called env.py in the root directory of your project and open it your IDE for editing
- In the env.py file, set your environment variables as follows:
```
    import os
    os.environ["SECRET_KEY"] = "<your secret key here>"
    os.environ["STRIPE_PUBLIC_KEY"] = "<your key here>"
    os.environ["STRIPE_SECRET_KEY"] = "<your key here>"
    os.environ["STRIPE_WH_SECRET"] = "<your key here>"
    os.environ["DEVELOPMENT"] = "True"
```
NOTE: Ensure that the filename env.py is added to the .gitignore file in your project's root directory. Instructions on how to set up a postgres database are found in the heroku deployment information below.
Ensure that your virtual environment is activated using the command in step 6
From the terminal in your IDE, migrate the database models to your database using the command:
```
python3 manage.py migrate
```

Load data into the database using the following commands:

python3 manage.py loaddata timeslot/fixtures/initial_data.json
python3 manage.py loaddata menu/fixtures/initial_data.json

Create a super user to access the admin panel using the following command and follow the instructions:
```
python3 manage.py createsuperuser
```
Run the app locally using the following command:
```
python3 manage.py runserver
```
To access to the admin panel, add /admin to the end of the app's url in the browser and log in using your super user details.
The app should now be running.

Using Heroku

Github address for the project: https://github.com/markj0hnst0n/pizza-delivery-place

Log in to or create a Heroku account and create a new app by clicking ‘New’ then ‘Create New App’ then choose a name and the relevant region for the app.
Click on the resources tab and in the search bar type heroku postgres, select this add-on and makes sure it is using the the free plan and click on provision. This provides a database for the app to use.
Use the command below to apply migrations to the new database:
```
python3 manage.py migrate
```
You can manually add database records in the site admin on the site itself or django admin. Just follow the below command to add a superuser and follow the instructions on the command line. Then once all other deployment steps are done login in at the site address /admin or on the site itself and use the site admin tab.
```
python3 manage.py createsuperuser
```
n.b. Even if you use the fixtures instead of manually adding records it is important that you create a superuser as you will still need this.

If you want to now use the fixtures to load the data using the commands below:

python3 manage.py loaddata timeslot/fixtures/initial_data.json
python3 manage.py loaddata menu/fixtures/initial_data.json

Make sure the app web address is in 'ALLOWED HOSTS' in settings.py in the project folder and push to git.

On the Heroku app page click the ‘Settings’ tab and then the ‘Reveal Config Vars’ button and the following variables need to be set as key value pairs:

NOTE: Wherever text is surrounded by <> (angle brackets), you will need to provide your own values without the angle brackets as determined by your Stripe account, mail server, secret key, AWS etc.

Key	Value
AWS_ACCESS_KEY_ID	<"your key here">
AWS_SECRET_ACCESS_KEY	<"your key here">
AWS_STORAGE_BUCKET_NAME	<"your bucket name here">
DEFAULT_FROM_EMAIL	<"the email address you'd like the email to be sent from, e.g. ">
DEVELOPMENT	"False"
EMAIL_HOST_PASSWORD	<"your app password as generated by Gmail for example">
EMAIL_HOST_USER	<"your email address that is used to send emails">
SECRET_KEY	<"your key here">
STRIPE_PUBLIC_KEY	<"your key here">
STRIPE_SECRET_KEY	<"your key here">
STRIPE_WH_SECRET	<"your key here">
USE_AWS	"True"

Click the ‘Deploy’ tab and in the ‘Deployment Method’ section select GitHub then search for markj0hnst0n/pizza-delivery-place by markj0hnst0n.
In the ‘Automatic deploys’ section click on the ‘Enable Automatic Deploys’ button the in the ‘Manual deploy’ section click the ‘Deploy Branch’ button as long as ‘master’ is the selected branch.
Once the app has been successfully built you should receive a message saying ‘Your app was successfully deployed’ you can then click on the ‘View’ button or the ‘Open app’ button at the top of the page to go to the deployed app.

Credits

Content

Written content by Mark Johnston.

Stripe payments js and functionality from https://stripe.com/

Media

Background cartoon pizza images from pngtree used with permission.

Pizza images from piguyni used with permission.

Sides images from pixabay used with permission.

Dessert images from fruitshop used with permission.

Drink images from dominos

Influences

Dominos website:

https://www.dominos.co.uk/

Pizza Loader code from:

https://codepen.io/arcs/pen/pbPkPL

JS Timer in minutes and seconds from:

https://stackoverflow.com/questions/41035992/jquery-countdown-timer-for-minutes-and-seconds

Acknowledgements

Thanks to the following people for making the project happen:

My truly great mentor Can Suncullu for his advice, patience and motivation.
The Code Institute Slack Community with special thanks to the gentleman Thomas Muat.
The Code Institute tutors and instructional material. Especially tutors Igor and Jo.
My Wife Joanna Johnston for her (constructive) criticism and understanding when I lock myself away in the attic for hours on end

Disclaimer

This site is intended for educational purposes only, and is not intended for use in any other capacity.

Name		Name	Last commit message	Last commit date
Latest commit History 206 Commits
.theia		.theia
.vscode		.vscode
README		README
cart		cart
checkout		checkout
home		home
htmlcov		htmlcov
media		media
menu		menu
pizza_place		pizza_place
profiles		profiles
static/css		static/css
templates		templates
timeslot		timeslot
.coverage		.coverage
.gitignore		.gitignore
.gitpod.dockerfile		.gitpod.dockerfile
.gitpod.yml		.gitpod.yml
Procfile		Procfile
README.md		README.md
custom_storages.py		custom_storages.py
db_data.json		db_data.json
manage.py		manage.py
requirements.txt		requirements.txt

markj0hnst0n/pizza-delivery-place

Folders and files

Latest commit

History

Repository files navigation

The Pizza Place

UX

User Stories

Navigation

User Accounts

Menu Item location

Purchasing

Site Owner Goals

Wireframes

Fonts

Colour Scheme

Features

Features not implemented

Technologies Used

Information Architechture

Data Models

Checkout App

Order Model

OrderLineItem Model

Menu App

Category Model

Allergens Model

MenuItem Model

Profiles App

User Model

Timeslot App

Day Model

Timeslot Model

Logical Data Model

Testing

Deployment

Run Locally

Instructions

Using Heroku

Credits

Content

Media

Influences

Acknowledgements

Disclaimer

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages