Italianissimo - Booking Website

Overview

This is a project designed and developed to create a complete experience for the clients of Italianissimo Restaurant. The users are given the possibility to create a booking, post a review and mark their favourite meals, and the staff members dispose of an online system for managing all the bookings. All these functionalities can be accessed by any user with an account, considering that the staff members have special permissions for controlling the data.
The website was created for real-life situations, but the restaurant's name is fictive.
Italianissimo - booking website was developed using Python (Django), HTML, CSS and JavaScript by storing the data in a PostgreSQL database.

The fully deployed project can be accessed at this link.

UX

This site was created respecting the Five Planes Of Website Design:

Strategy

User Stories:

EPIC	ID	User Story
CONTENT AND NAVIGATION
	1A	As a user, I want to see a menu so I can easily navigate through website content
	1B	As a user, I want to see relevant information about the restaurant
	1C	As a user, I want the website to have a nice and intuitive design that will match the restaurant's theme
USER REGISTRATION/AUTENTHICATION
	2A	As a user, I want to be able to register on the website
	2B	As a user, I want to be able to authenticate using only email and password
	2C	As a user, I want to be able to log out at any time
BOOKING
	3A	As a logged-in user, I want to be able to find the available tables for a specific date and time
	3B	As a logged-in user, I want to be able to select the table that I want to reserve
MENU
	4A	As a user, I want to see the restaurant's menu with details about ingredients and price, so that I can be completely aware of everything I want to order
	4B	As a logged-in user, I want to be able to mark my favourite dishes on the menu
USER PROFILE
	5A	As a logged-in user, I want to view a list of my upcoming bookings
	5B	As a logged-in user, I want to be able to cancel my bookings
	5C	As a logged-in user, I want to see a list of my favourite dishes from the restaurant
STAFF MANAGE BOOKINGS
	6A	As a logged-in staff member, I want to see the restaurant's upcoming bookings for the current day sorted by time
	6B	As a logged-in staff member, I want to be able to filter bookings by date
	6C	As a logged-in staff member, I want to be able to cancel bookings
REVIEWS
	7A	As a user, I want to see the restaurant's customer reviews on the website
	7B	As a logged-in user, I want to be able to post and edit a review
CONTACT
	8A	As a user, I want to see the restaurant's opening and closing hours
	8B	As a user, I want to see location information on the website
	8C	As a user, I want to see contact information on the website

Project Goal:
Create a website for the Italianissimo restaurant that is useful for clients and staff members as well.

Project Objectives:

To create a website with a simple and intuitive User Experience;
To add content that is relevant and helps create a better image of the restaurant;
To differentiate between client and staff member accounts;
To implement fully functional features that will ease the staff members' tasks and upgrade clients' experience with the restaurant services;
To make the website available and functional on every device.

Scope

Simple and intuitive User Experience

Ensure the navigation menu is visible and functional at every step;
Ensure every page has a suggestive name that fits its content;
Ensure the users will get visual feedback when navigating through pages;
Create a design that matches the restaurant theme and does not confuse the users.

Relevant content

Add information about restaurant name, location and contact data;
Make a clear and beautiful designed presentation of the menu elements;
Create a section with the most ordered dishes;
Create a section with customer reviews for full transparency.

Features for upgraded experience

Create a Booking feature that allows the users to see all the tables available for a specific date and time:
Create a Menu feature that displays all the menu information and gives the possibility for the user to mark his favourite dishes;
Create a Review feature that displays all the reviews added and gives the possibility for the user to add and edit his review;
Create a Profile page for the user to see his upcoming bookings and favourite meals;
Create a page for the staff member to manage all the bookings for all the users;

Different client and staff member Accounts

Permit the client to add/edit reviews and the staff member only the option to read them;
Give the client permission to mark favourite meals and remove the option for staff members;
Allow access to Profile page only for client type of users;
Allow access to Manage Bookings page only for staff members type of users;

Responsiveness

Create a responsive design for desktop, tablet and mobile devices.

Structure

The structure of the website is divided into nine pages but with content depending on authentication and client/staff status
-Register/Login pages give the user the possibility to create an account and authenticate for accessing different features.
-Logout feature is a modal that helps user exit their current account;
-The Home page is visible for both types of users and includes details about the restaurant, most appreciated dishes and top reviews;
-The Menu page displays menu details and the "Add to favourite" option only for logged-in clients;
-The Booking page is only available for logged-in users, both clients and staff members;
-Where to find us contains information visible to all users;
-The Reviews page displays all existent reviews and the "Add/Update review" option only for logged-in clients;
-Profile page is only visible for the logged-in clients and displays "Upcoming bookings" and "Favourite dishes" sections;
_Manage Bookings page gives access only to staff members and displays all the bookings registered, grouped and filtered by day.

FLOWCHARTS The Flowchart for my program was created using LucidChart and it visually represents how the system works.

Skeleton

Wireframes
The wireframes for mobile and desktop were created with Balsamiq tool and can be viewed here

Database
The project uses the PostgreSQL relational database for storing the data.
There were created two diagrams to represent the relation between the tables, the initial one and the final one. The first one was created before the actual development of the website which led to some changes to the attributes and tables for finding the most relevant and useful ones to be kept.

Initial Schema

Final Schema

Surface

Color Scheme

All the colours were selected with the eyedropper plugin from the website cover, to maintain chromatic harmony.

The primary colour scheme was used for most of the text existent on the website, in either dark or bright colours for creating a good contrast.

The secondary colour scheme was used for buttons, warnings, errors or for highlighting important information.

Fonts

The fonts I used for this site were imported from Google Fonts:
Body: Tiro Devanagari Marathi, serif
Navbar: Courgette, cursive
Logo: Cinzel, serif
Slogan: Marck Script, cursive

Visual Effects

Box shadows
Multiple box shadows were used for the cover, buttons and images. They were inspired from css-box-shadow-examples
Animation
Some animations were used for creating a dynamic and attractive design

View Moving arrows animation

View Authentication links Pulse animation

Hover effects

View NavBar elements hover

View Buttons hover

View Footer elements hover

Agile Methodology

This project was developed using the Agile methodology.
All epics and user stories implementation progress was registered using Trello. As the user stories were accomplished, they were moved in the Trello board from To Do, to In-Design, Testing and Done lists.

Sprints Details

Sprint 1 - SETUP
-Setup Django
-Deploy on heroku
Sprint 2 - CONTENT AND NAVIGATION
-Create a navigation menu
-Add restaurant name, slogan and description
-Choose colors, fonts and decorative images
Sprint 3 - USER REGISTRATION/AUTENTHICATION
-Implement the Register page using the django-allauth module
-Implement the Login page using django-allauth module
-Implement Logout modal using django-allauth module
Sprint 4 - BOOKING
-Create Booking page
-Implement a feature to display available tables
-Implement booking form validation
Sprint 5 - USER PROFILE
-Create user Profile page
-Implement Upcoming bookings section
Sprint 6 - STAFF MANAGE BOOKINGS
-Create a Manage Bookings page to display all bookings for today
-Implement filtering by date form
Sprint 7 - REVIEWS
-Create a Reviews page to display all reviews
-Implement form for adding and updating review
-Complete Home page and add Top Reviews section
Sprint 8 - MENU
-Create a Menu page to display menu details
-Implement a feature for adding meals to favourites
-Complete the Profile page and add the Favourite dishes section
-Complete Home page and add Most appreciated dishes section
Sprint 9 - CONTACT
-Create Where to find us page
-Add timetable
-Add location address and map
-Add contact details
Sprint 10 - TESTING
-Create unit tests for Home App
-Create unit tests for Booking App
-Create unit tests for Menu App
-Create unit tests for Reviews App
-Create unit tests for Contact App

Features

Existing Features

Create bookings

Every user that is authenticated can access the Bookings page for making a reservation. This feature provides a form with multiple sections that appear successively, as steps in completing the booking.

The first section is for selecting the date and time interval of the booking
The inputs are validated after the following rules:
- The Date value should not be less than the current day;
- For the current day the Start hour can't be less than the current hour;
- End Hour should be greater than Start hour;
- Start and End hours must be between 9:00 AM - 11:00;
The next section appears only if the previous one is valid and it displays the tables existing in the restaurant in the colour that matches their availability status. The user can now choose a table from the dropdown, considering that it only contains the free tables. Also, there is a read-only input with a value that represents the number of seats for each selected table, as an informative element.
Another part of the form is displayed with the contact details to be filled in. A better alternative available for the users that are not staff members is to check the Book it on my name option. This means that the form will automatically register the authenticated user's name and email as contact details.
The last section contains an overview of the booking. If the reservation is submitted, a success message will appear

Reviews

On the Reviews page there is a list of all the reviews posted on the website and it is visible to all types of users. All the reviews have the same design and type of content. Important details are displayed such as Name, Date and time, Stars rating and the Message posted.
When a user is authenticated and he never posted a review, a form is provided for leaving a message and a star rating.
For authenticated users that already posted a review, the page displays the values of their review and the possibility to update it.
The form for editing the review already contains the corresponding message value and the star ratings in the initial state.

On the Menu page there is a list with all the menu elements. Every item represents a meal with details such as Name, Image, Price, and Ingredients. The list design is simple and attractive.
An interactive feature has been added that is only available for logged-in users that are not staff members. A user has the possibility to mark his favourite meals through a form that uses a heart icon as a button. The heart shape defines the state of the meal, which can be marked or unmarked as a favourite dish.

Profiles

The users' accounts have been created using the django allauth module. This way, information about the current user can be accessed from the template and displayed for confirming that the authentication was successful.
Considering that the website is created for a restaurant, the profile of the user is created to display essential information such as name and email.

Also, the profile page contains two features that are created for giving the user a better experience with the website.

One of the features is called Your upcoming bookings and is represented by a list of the bookings created by the currently authenticated user.
Every booking has a visual representation of a note with the details of the reservation written on it.

Also, for giving the user the ability to manage his bookings, every element in the list comes with a Delete Booking button.
The button triggers a modal for confirmation, that being a part of the defensive programming.
Another user-friendly feature is Your favourite dishes. This feature displays to the user all the meals that he has added to Favourites from the Menu page. The menu items contain the meal image and name, as it was not considered necessary to display all the details from the menu.

Staff bookings management

The staff account was created as a superuser account from the terminal and also has access to the admin panel.
There is a page created especially for staff members to keep a better tracking of all the reservations that are being made for the restaurant.

The bookings are displayed on a custom-designed table, grouped by day and ordered by time. The page renders by default the reservations for the current day and their number.
A form is provided for filtering the bookings by date for a better user experience.
A booking also has a delete button that triggers a confirmation modal.

If the bookings list is empty, a suggestive message is displayed.

Future Feature Considerations

Updating the booking feature with a more complex algorithm and design for generating the available tables. The current algorithm sets a table as busy even if it is registered as booked only for a small part of the interval requested by the user for the reservation. Also, the Start and End time are restricted to accept only zero hundred hours. By changing the limit to even zero-thirty hours, the tables algorithm will be more efficient.
Another possible feature would be the implementation of a Reward system. Every time a client leaves a good review, a discount would appear on his profile page to use on his next visit. Also, a user should be given the status of Loyal customer when he registers on a system every time he eats at Italianissimo if that happens regularly. Different discounts should apply to loyal customers in order to recompensate and encourage their habit.

Responsive Layout and Design

The project design has been adapted to all types of devices using Bootstrap predefined breakpoints. For intermediate devices where the design didn't fit accordingly, custom breakpoints were used.

Breakpoints:

- max-width:280px
- max-width:768px
- max-width:992px
- max-width:1024px

Tested devices:

- Moto G4 
- iPhone SE 
- iPhone XR 
- iPhone 11 
- iPhone 13
- iPhone 5/SE 
- iPhone 6/7/8 
- Ipad
- Ipad Air 
- Ipad Mini
- Ipad Pro 
- Pixel 5 
- Surface Duo 
- Surface Pro 7 
- Nest Hub 
- Nest Hub Max
- Samsung Galaxy S20 Ultra 
- Samsung Galaxy S8 
- Galaxy Note 2 
- Galaxy Tab S4
- Asus Vivobook

Tools Used

GitHub - used for hosting the source code of the program
Visual Studio - for writing and testing the code
Heroku - used for deploying the project
TablePlus - for managing the database entries
Balsamiq - for creating the wireframes
LucidChart - used for creating the Flowchart and Database relational schema
Favicon.io - used for generating the website favicon
Diffchecker - used for comparing the code
TinyPNG - for compressing the images
Grammarly - for correcting text content
Font Awesome - for creating atractive UX with icons
Bootstrap5 - for adding predifined styled elements and creating responsiveness
Google Fonts - for typography
JsHint - used for validating the javascript code
PEP8 Validator - used for validating the python code
HTML - W3C HTML Validator - used for validating the HTML
CSS - Jigsaw CSS Validator - used for validating the CSS
Chrome Del Tools - for debugging the project
W.A.V.E. - for testing accessibility
Cloudinary - for storing static data
LightHouse - for testing performance

Python packages

django
gunicorn
dj-database-url
psycopg2
dj3-cloudinary-storage
pylint-django
whitenoise
jinja2
django-allauth
django-crispy-forms
django-braces
django-filter
django-annoying
coverage
pylint
python-dotenv
dateutils
autopep8

Testing

The testing documentation can be found at TESTING.MD

Deployment

Deploy on Heroku

Create Pipfile

In the terminal enter the command pip3 freeze > requirements.txt, and a file with all requirements will be created.

Setting up Heroku
- Go to the Heroku website (https://www.heroku.com/)
- Login to Heroku and choose Create App
- Click New and Create a new app
- Choose a name and select your location
- Go to the Resources tab
- From the Resources list select Heroku Postgres
- Navigate to the Deploy tab
- Click on Connect to Github and search for your repository
- Navigate to the Settings tab
- Reveal Config Vars and add your Cloudinary, Database URL (from Heroku-Postgres) and Secret key.
Deployment on Heroku
- Go to the Deploy tab.
- Choose the main branch for deploying and enable automatic deployment
- Select manual deploy for building the App

Fork the repository

For creating a copy of the repository on your account and change it without affecting the original project, useFork directly from GitHub:

On My Repository Page, press Fork in the top right of the page
A forked version of my project will appear in your repository

Clone the repository

For creating a clone of the repository on your local machine, useClone:

On My Repository Page, click the Code green button, right above the code window
Chose from HTTPS, SSH and GitClub CLI format and copy (preferably HTTPS)
In your IDE open Git Bash
Enter the command git clone followed by the copied URL
Your clone was created

Credits

Content

The content of the website is fictive.

Media

All .png images used on the site were taken from pngegg

Code

The code for creating a custom user model was taken and adapted from [here](https://www.codingforentrepreneurs.com/blog/ how-to-create-a-custom-django-user-model/)
The validation for the booking form was inspired from here
The method of inserting data into HTML for javascript was inspired from here
Django pagination was taken and adapted from here
Pagination with a query set was inspired from stackoverflow
Custom arrows for input type number were taken and adapted from stackoverflow

Acknowledgements

Code Institute for all the material and support offered
My mentor Ben Kavanagh for great tips and his willingness to help me as much as possible with the problems encountered during the development of the project
Slack community for great involvement in helping each other

Name		Name	Last commit message	Last commit date
Latest commit History 381 Commits
.vscode		.vscode
booking		booking
contact		contact
home		home
italianissimo		italianissimo
menu		menu
review		review
static		static
templates		templates
users		users
.gitignore		.gitignore
Pipfile		Pipfile
Pipfile.lock		Pipfile.lock
Procfile		Procfile
README.MD		README.MD
TESTING.MD		TESTING.MD
db.sqlite3		db.sqlite3
manage.py		manage.py
requirements.txt		requirements.txt

useriasminna/italianissimo-booking-website

Folders and files

Latest commit

History

Repository files navigation