- Overview
- UX
- Agile Methodology
- Features
- Responsive Layout and Design
- Tools Used
- Testing
- Deployment
- Credits
- Acknowledgements
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.
This site was created respecting the Five Planes Of Website Design:
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.
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.
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.
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.
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.
- 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
- 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
- Hover effects
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
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 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
-
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.
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.
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.
-
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.
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
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
- 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
The testing documentation can be found at TESTING.MD
- 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
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
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
- The content of the website is fictive.
- All .png images used on the site were taken from pngegg
- 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
- 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