Unetto is an interactive e-commerce project for a food delivery pizza shop. This project is a fully functioning interactive application that allow users to order and pay food online.
The site provides all the functionality for a common shopping experience, such as: browsing the menu, providing a shopping cart to save chosen items, have a secure checkout payment and have a personalised emailed message. Backed inside the app there are admin, user and database funtionalities.
Please note: This site is purely for educational purposes only. The payments use a real API but remain in test mode, so no real payment will be taken. Please do not enter real credit card details when using this site.
- UX Design
- Design Choices
- Technologies
- Features
- Project Management
- Version Control
- Testing
- Bugs
- Deployment
- Credits
The goal of this project is to build a fully functioning e-commerce website for a delivery pizzeria business, allowing the user to browse and order products to be delivered at home.
The features of the website will be:
- Display a Menu or search for products by category, or type.
- Sort items by name or price.
- Inform the user about allergens.
- Select items to purchase, select a quantity, and place the order in the shopping cart.
- Checkout. The user inserts personal detail along with delivery details and pay with a secure transaction. Payment integration with Stripe.
- Registration through a personal user profile, a private user page that shows order history and delivery details.
- Email order confirmation and registration confirmation.
I achieve this by:
- Purchases can be made whether the user is registered with an account or not.
- Each product is associated with a list of allergens, that are linked to external medical informations about their properties.
- Providing a registration form with username and password for users to create a personal account and relative account page.
- Providing a log in page for existing users.
- Utilising Stripe online payments infrastructure to permit purchasing of products.
- Email functionality are connected with Google Gmail, so that our checkout system send the order confirmation by email.
- As a shopper, I want to be able to view a list of products so that I can choose some items to purchase.
- As a shopper, I want to be able to filter products that I am interested in without searching through all the products.
- As a shopper, I want to be able to select individual products to see more detailed information and add the item to my shopping cart.
- As a shopper, I want to be able to see items I have placed in my shopping cart, and keep track of what I am buying.
- As a site user, I want to be able to register for an account and save persona informations to speed up future purchases
- As a site user, I want to be able to receive and email to verify my email account and complete the registeration.
- As a site user, I want to be able to save and update my delivery information on my personal profile page.
- As a site user, I want to be able to log in and have a personal profile page containing my delivery details and order history
- As a shopper, I want to be able to sort the available products by price, category type and name
- As a shopper, I want to be able to see the allergens in the food
- As a shopper, I want to be able to add a product to the shopping cart and select the quantity
- As a shopper, I want to be able to view the items in my shopping cart, seeing the sub-total, delivery costs and total price.
- As a shopper, I want to be able to update the items in the shopping cart. Change quantities or remove the products from the cart.
- As a shopper, I want to be able to checkout securely, enter my delivery and credit card payment details with no worries.
- As a shopper, I want to be able to view the order confirmation, and receive an email order confirmation letting me know the transaction has succeeded.
- As a store owner, I want to be able to add new products to my store
- As a store owner, I want to be able to edit product details, uploads a product image file
- As a store owner, I want to be able to delete a product that is no longer for sale.
- As Admin, I want to be able to create and delete categories, deals, list of allergens and products
I've chosen worm and light colors. As background site a light bisque and a more white flour tone for each card element. Mainly all the colours have a white, yellow and orange character. I used a strong orange accent color for buttons and element of focus. Green is the color of the logo and the color of basilicum. All this palette draws the color of a pizza!
The mock-ups are made using Figma. I used rounded corner and smooth compositions. Cards define structural divisions between elements and hierarchies. I tryed to avoid depth and I used color to diversify the user interaction.
- Home Page
- User Registration
- User Log In
- Menu Category
- Product Details
- About Page
- Shopping Cart
- Checkout
- Product Management
- Python3
- Used to create the main application functionality
- HTML5
- Used as the main markup language for the website content.
- CSS3
- Used to style the individual webpages.
- JavaScript
- Used to create the interactive functionality of the website
- PostgreSQL
- A powerful, open-source object-relational database.
- sqlite3
- Default database created with Django used for app development on localhost.
- Bootstrap5
- Used to design a mobile-first responsive website layout.
- Django
- A high-level Python Web framework.
- Django-Allauth
- Python user authentication and login plugin for Django.
- Stripe
- Online payments platform used for the shopping basket functionality.
- Green Unicorn (gunicorn)
- Python WSGI HTTP Server for Unix used on the Heroku deployment.
- psycopg2-binary
- PostgreSQL database adapter for Python.
- Pillow
- Python Image Library image processing capabilities.
- Boto3
- AWS SDK for Python (Boto3) used to create, configure, and manage AWS S3 services.
- jQuery
- Used for the initialisation of the Bootstrap components functionality and enhance the shopping bag functionality.
- Git
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub.
- GitHub
- Used to store, host and deploy the project files and source code after being pushed from Git.
- Gitpod
- An online IDE linked to the GitHub repository used for the majority of the code development.
- Font-Awesome
- Icon library toolkit
- Heroku
- Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
- AWS S3
- Amazon Simple Storage Service (Amazon S3) is an object storage service used to store the site static files
- Django Secret Key Generator
- Used to generate new secret keys for environment variables.
- Adobe Photoshop
- Modify photo, resizing, color correction and exporting for web
- Adobe Illustrator
- Used to create the Unetto logo and favicon
- Navbar
-
Unetto Icon, and Name logo.
-
The Bootstrap Navbar is responsive. For small screen size there is a burger icon that opens the lateral menu.
-
Search form integrated in the navbar
-
For visitors to the site who are not logged in, is available the list of all the food-products and the links for these pages:
- Browse the Menu and all the categories, you can see all products and all single product details page
- Order and purchase your food to the delivery. Email confirmation
- Log In (form -username -password)
- Register (form -username -password -email)
- About page
- Contact Page
-
For users who are logged in:
- Browse the Menu and all the categories, you can see all products and all single product details page
- Order and purchase your food to the delivery. Email confirmation
- Have a personal page in which you can modify your pesonal detail info and see order history
- Log In (form -username -password)
- Register (form -username -password -email)
- About page
- Contact Page
-
For superusers/admin
- Add/Edit/Delete products, access to the product management page
- In the Admin dashboard is possible to add Categories, Deals and list of Allergens too
-
- I easily loaded my products, categories, deals and allergens into the database using fixtures JSON files. This method is handy when you need to create or remove large quantity of data, because avoid to manually do it by hand for each element via the site admin page.
Site Page | Create | Read | Update | Delete |
---|---|---|---|---|
Menu | All Products | |||
Menu | Delete Single Product | |||
Product Detail | Single Product | |||
Product Detail | Delete Single Product | |||
Add Product | Add New Product | |||
Edit Product | Single Product | |||
Edit Product | Update Single Product | |||
Shopping Cart | All Products | |||
Shopping Cart | Update Product Quantity (Session) | |||
Shopping Cart | Remove Product (Session) | |||
Checkout | All Products | |||
Checkout | Create Order | |||
Checkout | Create Order Items | |||
Checkout | User Delivery Details | |||
Checkout | Update User Details | |||
Checkout | Update Product Quantity (Session) | |||
Checkout | Remove Product (Session) | |||
Sign Up | Add New User | |||
Log In | User Details | |||
My Profile | User Details | |||
My Profile | User's Orders | |||
My Profile | Update Delivery Details |
I used the Django provided session-based messages functionality. The messages framework allows you to temporarily store messages in one request and retrieve them for display in a subsequent request. Every message is tagged with a specific level that determines its priority (e.g., success, info, warning, or error).
- Errors - messages are displayed within the bootstrap Toast and havea a red border on top
- Info - messages are displayed within the bootstrap Toast and havea a blue border on top
- Success - messages are displayed within the bootstrap Toast and havea a green border on top
- Warning - messages are displayed within the bootstrap Toast and havea a yellow border on top
- Defensive programming is used to prevent "brute force" opening of restricted pages, in order to maintain the site security.
- Certain pages are removed from view unless a user is authenticated.
- Python views functions are modified by Django
@login_required
decorators to restrict user access to inappropriate pages. - Add/Edit/Remove a products is restricted only to superusers or admins. I ensure this by using if/else conditions to check the user authentication.
-
A system of likes or favorite for each user. Handy for sorting products
-
Account user registration using popular social media accounts.
-
Add extra ingredients in the selection of products.
- Testing information can be found in a separate testing.md file.
- Version control allows you to keep track of your work and helps you to easily explore the changes you have made.
- This repository is hosted by Github and the workspace is managed with Gitpod.
- Branch Main is the dafault branch in Git.
- In your GitHub repository click on the Gitpod button to start the workspace.
- Gitpod loads the online IDE editor window, you are ready to code.
- To update the repository inside GitHub, use these commands in the Gitpod terminal
- git add .
- git commit -m "your commit message"
- git push (default to the master branch)
The website was developed using Git pushed to GitHub, which hosts the repository. I deployed the site to Heroku, here the passages:
Ensure you have installed these locally on your computer:
- Python 3.6 or higher
- PIP3 Python package installer
- Git Version Control
You will also need a Stripe account in order to use the payment processing for the checkout app. An amazon AWS account, and a s3 bucket.
- Navigate to NicolaLampis/ms4-unetto-pizza GitHub repository.
- click the Code button, then "download zip" to have a copy stored in you machine.
- Unzip the repository into the chosen folder, open with your favourite IDE.
- click the Code button, copy the URL.
- Having Git installed on your system, you can clone the repository with the following command.
git clone https://github.com/NicolaLampis/ms4-unetto-pizza
- Using your favourite IDE open up your preferred terminal.
- Navigate to your desired file location.
Note: The process may be different depending upon your own OS Use this Python help guide to understand how to create a virtual environment.
- Install all the dependencies listed in the requirements.txt file. In your IDE terminal window run the following command:
pip3 install -r requirements.txt
sqlite3 will be initialized locally after the installaton of the requirements.txt.
Run the following commands to create the database tables:
- Check which migrations will be applied.
python3 manage.py migrate --plan
- Apply the migrations.
python3 manage.py migrate
Load the fixtures files into the database in the following order:
python3 manage.py loaddata categories
python3 manage.py loaddata deals
python3 manage.py loaddata allergens
python3 manage.py loaddata products
-
Setting up the required environment variables can be achieved in two ways.
- If you have chosen Visual Studio Code as your IDE, locate the
settings.json
file in the .vscode directory. Navigate toFile
,Preferences
,Settings
andsettings.json
file. Enter the environment variables as follows:
"terminal.integrated.env.linux": { "DEVELOPMENT": "True", "SECRET_KEY": "<your key here>", "STRIPE_PUBLIC_KEY": "<your key here>", "STRIPE_SECRET_KEY": "<your key here>", "STRIPE_WH_SECRET": "<your key here>", "AWS_ACCESS_KEY_ID": "<your key here>", "AWS_SECRET_ACCESS_KEY": "<your key here>", "AWS_STORAGE_BUCKET_NAME": "<your bucket name here>", }
- Alternatively, create a file called
env.py
in the root directory of your project. - In the
env.py
file, set your environment variables as follows:
import os os.environ["AWS_ACCESS_KEY_ID"] = "<your key here>" os.environ["AWS_S3_REGION_NAME"] = "<your AWS S3 region name here> os.environ["AWS_SECRET_ACCESS_KEY"] = "<your key here>" os.environ["AWS_STORAGE_BUCKET_NAME"] = "<your AWS S3 bucket name here>" 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"
- If you have chosen Visual Studio Code as your IDE, locate the
-
Ensure that your virtual environment is activated
-
The Stripe keys can be found in the Developers section under API Keys and Webhooks of your Stripe Account
-
Important: Add the
.env
file to your.gitignore
file before pushing your files to any public git repository.
- To run the application, enter the following command into the terminal window:
python3 manage.py runserver
To access the admin panel, add /admin
to the end of the app's url in the browser and log in using your superuser details
Please ensure you have an account created at Heroku in order to deploy the app.
- Log in to your Heroku account dashboard and create a new app.
- Enter the App name.
- Choose a geographical region closest to where you live.
- Select the Resources tab on your Heroku app dashboard
- Select
Heroku Postgres
as a new add-on with a Plan name ofHobby Dev - Free
- Heroku will build the PostgresQL database instance and add a config variable automatically.
- Add the following variable to the
.env
file:
DATABASE_URL=[YOUR POSTGRESQL DATABASE URL FROM HEROKU CONFIG VARS]
- Apply the migrations to the Heroku PostgreSQl database tables.
python3 manage.py migrate
- Load the fixtures files into the PostgreSQL database in the following order:
python3 manage.py loaddata categories
python3 manage.py loaddata deals
python3 manage.py loaddata allergens
python3 manage.py loaddata products
- In the Heroku App page, open Settings > Config Vars
- Add all the environment variables from your local
.env
file into the Heroku Config Vars:
Key | Value |
---|---|
SECRET_KEY | <"your key here"> |
STRIPE_PUBLIC_KEY | <"your key here"> |
STRIPE_SECRET_KEY | <"your key here"> |
STRIPE_WH_SECRET | <"your key here"> |
AWS_ACCESS_KEY_ID | <"your key here"> |
AWS_SECRET_ACCESS_KEY | <"your key here"> |
USE_AWS | "True" |
EMAIL_HOST_PASS | <"your app password as generated by Gmail for example"> |
EMAIL_HOST_USER | <"your email address that is used to send emails"> |
Set also your AWS settings in settings.py
- In the Heroku App Deploy page:
- Select GitHub from the Deployment Method options.
- Select Connect to GitHub.
- Log in to your GitHub account from Heroku.
- Link the Heroku app to the correct GitHub repository for the project
- Select Connect.
- Select Enable Automatic Deployment from the GitHub Main/Master branch.
- Perform a
git push heroku main
to push the project to Heroku for the first time - In Heroku > Activity the build process starts.
After the successful deployment, click on Open App to view the deployed site
I used this link for design and layout ideas for pizza website:
Most of the images I used were taken from unsplash.com, license free to use. Photo by the artist amirali-mirhashemian, Pizza photos and homepage Photo by the artist joice-kelly, Lasgna photos Photo by the artist mink-mingle, Cheesecake photos Photo by the artist nik-owens, Pizza and oven photos Photo by the artist juan-manuel-nunez-mendez, handmaking pizza photos Photo by the artist priscilla-du-preez, tomatoes photos
- Code Institute Course material - Django Boutique Ado project was source of inspiration
- Anna Greaves code snippets and README.md format ideas
- Simon Vardy code snippets and README.md format ideas
- wondrousWebWorks code snippets and project ideas
- Stack Overflow safe place for every developers in search of answers
- Django documentation widget, models, forms, admin...
- W3Schools Html and CSS guide
- Bootstrap v5 Guide to use the workframe to built a template
This site is intended for educational purposes only, is a submission project for Code Institute.