Cafe Manbo - Project Portfolio 4 - Full Stack

Cafe Manbo is a family restaurant located in England, Wakefield. Guests are able to visit restaurant after they have placed a booking via the website. The website itself has been designed with a "real world application" in mind, therefore the website has been designed in two parts. First, users will see a visually appealing front-end website which shows users information about the restaurant, allows users to create an account, make a booking, write a review, contact the restaurant and more. The other half of the website acts as a management system for staff members that work at Cafe Manbo. If an account has the correct permissions, the staff member will be able to see a staff dashboard which will allow them to manage everything related to Cafe Manbo such as bookings, reviews, payments and also see informative statistical data about the restaurant.

You can view the live site here - Cafe Manbo

Contents

• Objective
• User Experience UX
  • User Stories
  • Design Prototype
  • Site Structure
  • Design Choices
  • Typography
  • Colour Scheme
  • Project Management
• Existing Features (Site User)
  • Site Navigation Bar
  • Dynamic Reviews
  • Hours & Location
  • Footer
  • Our Menu
  • Gallery
  • Book Now
  • My Reservations
  • Account Creation
  • Write A Review
  • 404 & 500 Pages
• Existing Existing Features (Staff Member)
  • Staff Dashboard
  • Staff Navigation Bar
  • Bookings
  • Check In
  • Payments
  • Reviews
  • Staff Help
  • Automatic Emails
• Future Features
  • Improved Booking System
  • Contact/Enquiry
  • Dedicated User Profile Page
• Technologies Used
• Python Packages
• Testing
• Deployment To Heroku
• Cloning This Project
• Credits
  • Content
  • Media
• Acknowledgments

Objective

For my fourth project, I intend to create an authentic, practical and useful restaurant website which could potentially be used in a real world environment. The main objective is to demonstrate a strong level of competency in HTML, CSS, JavaScript, Python and the Django Framework alongside showcasing high attention to detail and the importance of robust testing throughout.

Back to top

User Experience (UX)

User Stories

Site User

Site Staff Member

Design Prototype

The very first design prototype was created using Balsamiq. I created a very basic wire frame which so I could visually understand where elements could sit and to also get a general feel of how the website would look before I had started to develop it. This is an extremely important part of the design process as it allows me to understand what I need to do to achieve the final end product. Spending a couple of hours doing this saves a lot of time in the development process and I will continue with this approach throughout any project I work on.

Back to top

Site Structure

As mentioned above, the website for Cafe Manbo has been designed to be a fully encompassing website that acts as a central hub for both users and staff members.

• Main Website

  • Home, Our Menu, Gallery, Book Now, My Reservations and Write A Review.
  • Visually appealing, minimalistic and welcoming design.
  • Simple, easy and fast booking with strong form validation.
  • All bookings are easily manageable for the user in the 'My Reservations' page.

• Staff Dashboard

  • Home, Dashboard, Bookings, Check In, Payments, Reviews, Staff Help.
  • A separate, detached part of the website theme for staff members to manage everything at Cafe Manbo.
  • Informative dashboard panel which showcases a vast range of statistical data about Cafe Manbo.
  • A simple and logical booking flow system.
  • A staff help modal to aid staff members.

Booking Flow Logic Diagram

Design Choices

• Typography

  The fonts chosen were 'Oswald' for the golden headings and I decided to use the standard 'sans-serif' for the body text however different font-weights and font-sizes were used to give further clarity. All fonts fall back to sans-serif respectively if the 'Oswald' font can't be loaded.

  • 'Oswald' was chosen primarily to give a touch of style and elegance to the website. The font-style is very modern, stylish, clean and gives a professional and inviting feeling to the website.

• Colour Scheme

  The colour scheme chosen is one based on a rich gold, eerie-black and off-white. This colour scheme gives off a warm, clean, minimalistic and positive feeling to the website.
  
  

Project Management

• Trello

  I used an excellent application called Trello which greatly improved organisation and productivity. This tool allows the individual to properly plan and create a systematic work flow so you are always aware of what needs to be done next.

  I would first create a very basic overview of what I wanted to achieve and then break it down into smaller more manageable steps. Before finishing for the day, I would spend at least 15 minutes planning for the next day so that when I came back to developing I could open my Trello board and instantly get back developing since I would know immediately what I need to be working on. I highly recommend this tool to any developer or development team.
  
  

• GitHub Project Board

  Additionally to Trello, I utilised the GitHub project management tool to breakdown, organise and plan my user stories. I decided to do this to give me further experience when working within an Agile environment. Although this project was built entirely by myself, I can fully appreciate and understand the importance of using a tool like this as each ticket has the ability to have multiple users assigned, comments can be made, labels can be added and so much more.
  
  

Database

• Database Schema

  To create the database schema, I used an excellent graph modelling tool Graph Models which shows the entire relationship between all models in the database. After following the steps required to install Graph Models, I then used dreampuf to present the data in a clear and professional way.
  
  

• Table Plus

  To aid myself when needing to work with the database, I downloaded an external program called TablePlus which allows me to access and manipulate the project databases very easily and quickly. This vastly increased development time as I could change the values in the database and see the effect that it would have on the website.

Existing Features For Site User

• Site Responsive Navigation Bar

  • The navigation bar is an extremely important and integral part of any website so I decided to spend a lot of time trying to make one that is very user friendly that would promote a positive emotional response for the user.
  • Using a mixture of both CSS, JavaScript and Bootstrap, I've created a dynamic, responsive and animated navigation bar.
  • Upon initial visit, the entire navigation bar will be transparent but upon scrolling 50px, the navigation bar will then apply a dark background. The dark background will also be applied when the navigation bar becomes responsive.
  • I decided to create 2 navigation bars for the main website. navbar.html is the home page navbar which is transparent at first then transitions to dark after 50px and navbar_2.html is a non-transparent navbar which is used for all subsequent pages
  • If a user has not logged in then the navigation bar will show the 'Account' option. After they have signed in, it will then display their username. To mitigate any responsive design issues, I have decided to slice the first 10 characters of their name and display that to the user.
  • When the navigation bar hits the breakpoint, it will then collapse into a hamburger which I have made animate into a red cross when clicked.
    
    

• Dynamic Reviews

  • Reviews from other guests can be the deciding factor when it comes to new guests deciding whether to dine at the restaurant, therefore I had decided that being able to display dynamic reviews to the user was important and worth the development time.
  • 4 Reviews will be displayed at random given that they have been approved and verified by a member of staff.
  • Each review is housed in it's own card, showing the guests name, the star rating the guest selected, the first 80 characters (including spaces) of their review and then a Read More button.
  • Clicking the Read More button will trigger a modal that will show the user the full review
    
    

• Hours and Location

  • Informing the user where the restaurant is located is extremely important, therefore I decided to have clean, decisive information regarding the whereabouts of Cafe Manbo.
  • Integrated Google Maps so the user can visually see the location.
  • The address, location and phone number used are completely made up for security purposes.
    
    

• Footer

  • A simplistic yet elegant design, used to naturally end the page and provide the user with some quick links so they can navigate the website faster if they wish to.
    
    

• Our Menu

  • I decided that it was a lot more practical and also I think professional to design the menu on an external PDF and then host that for the user to view.
  • The menu was designed using Canva and then hosted on Cloudinary
    
    

• Gallery

  • The gallery page is used as way to showcase images of the restaurant to users. As the saying goes, a picture paints a thousand words and being able to show appealing images will greatly increase the chances of guests visiting Cafe Manbo.
    
    

• Book Now

  • The book now page will only be accessible if the user has logged in with an account. If they have not logged in and they click the Book Now link, they will be redirected to the log in page
  • I have spent a lot of development time working on form validation since Cafe Manbo is a restaurant website, each booking needs to be unique and fully validated before a staff member needs to spend time processing it.
  • Alongside the standard input field validation, I have also added some additional validation which checks if the user is booking in the past. For example, if the time is 19:00 and they are trying to book for 17:00, then it will throw an error informing the user that they can't book in the past. The same goes for the date, if they try book for a date that isn't either today or in the year 2022, it will inform the user accordingly.
  • Additionally I have accounted for double bookings. When the user submits the form, I then collect all that data, check if the database holds a booking with very similar data and if so, inform the user that the booking was unsuccessful because we appear to already have this booking in the database.
    
    

• My Reservations

  • The My Reservations page was created so that a user can manage all of their bookings in one distinct place.
  • If a user does not have any bookings stored in the database, then they will be prompted with a "no bookings found" page.
  • Each booking is displayed individually for the user with some informative data about that booking and also a blue Details button which will load even further information about that users booking.
  • I decided that a user would have only a few pending bookings, however if a customer really enjoys Cafe Manbo then they could potentially have multiple completed bookings and therefore I decided to place all completed bookings within a collapsible bootstrap accordion to help with the page space and presentation
  • There are currently 5 different states that a users booking can be in. They are the following:
    
    
    • Awaiting Approval - Booking has been submitted, awaiting staff members approval
    • Booking Approved - Staff member has approved the booking but the guest has not yet attended
    • Booking Attended- Booking has been approved and the guest has attended
    • Booking Denied - Booking has been submitted but a staff member denied the booking
    • Booking Not Attended - Staff member has approved the booking but the guest did not attend
      
      
  • If a user clicks the blue details booking to load the additional information about their booking, if the booking has not been completed then they will have the option to Edit or Cancel the booking. Clicking the edit booking will launch a modal that will allow the user to submit new information for that booking. If it passes the form validation requirements then the booking state will be set back to "Awaiting Approval" and a staff member will need to approve this booking.
  • Alternatively if they click cancel booking, a separate modal will pop up and prompt the user asking them if they wish to cancel this booking. Doing so will completely delete this booking from the database.
    
    

• Account Creation

  • To enable users to be able to create an account on the website, I used a brilliant package called Django AllAuth and then customised the html pages to fit the theme of the website.
    
    

• Write A Review

  • If a user has logged in, they are able to submit a review for the restaurant.
  • This review then has to be approved by a member of staff before it gets rendered on the home page for other users to view.
  • Standard form validation applies to all fields with the additional form validation on the body field asking the user to submit a review that is at least 80 characters long. This is done for two reasons, firstly it helps with the presentation of the preview cards and secondly, it can can prevent users submitting very small reviews that don't give a very insightful look at what it's like to dine at Cafe Manbo.
  • When a user has successfully submitted a review, they will be presented with a thank you page, thanking the user for their review and also provide them with a preview of how their review will look like on the home page if their review is approved by a member of staff.
    
    

• 404 and 500 Error Pages

  • If a user navigates to a page that does not exist, they will be presented with a custom 404 error page
  • If a user navigates to a page and they encounter an issue which is server side related, they will be presented with a custom 500 error page
    
    

Existing Features For Staff Member

• Staff Dashboard

  • The staff dashboard was created to give staff members a visually appealing but more importantly, an insightful way of viewing statistical data about Cafe Manbo.
  • 4 bootstrap cards are located at the top of the page giving information about Total Bookings, Total Guests, Total Reviews and Total Income. All this data is completely dynamic and is gathered from the database.
  • I have used a brilliant piece of third-party software from ChartJS which allows me to display data in a visually appealing way such as a bar or pie chart. Using this software I am able to immediately display to staff members how many bookings and how many guests have attended given a 12 month period.
  • To complete the staff dashboard, I have created a 'Quick Statistics' section which gives additional fast and basic information about Cafe Manbo. All the data is completely dynamic
    
    

• Staff Responsive Navigation Bar

  • The navigation bar for the staff dashboard is positioned on the left hand side to give an administrative feel to this part of the website.

  • 7 available links for a staff member to click. Home, Dashboard, Bookings, Check In, Payments, Reviews and Staff Help
    
    

    • Home - Returns the staff member back to the home page of the main website
    • Dashboard - Loads the staff dashboard page
    • Bookings - Loads the bookings page
    • Check In - Loads the check in page
    • Payments - Loads the payments page
    • Reviews - Loads the reviews page
    • Staff Help - Loads a modal to aid staff members
      
      

  • Bookings, Check In, Payments and Reviews have a red notification number that will be rendered to the side of the link if there is any form of information that is required for a staff member to deal with. For example, if there is a new booking that has come in from a guest, the Booking link will show a (1) next to it informing the staff member that there is a booking that requires attention.
    
    

• Bookings

  • This is the first part of the booking flow system. When a guest makes a booking, it will then be displayed here for a staff member to either approve or deny. When a staff member has approved or denied a booking, it will be removed from this page and a flash message will appear giving the staff member additional feedback that their action has been submitted
  • A staff member can click the "All bookings View Here" which will render a new page which utilises DataTables. I've decided to use Data Tables to help with presentation and aid staff members in locating specific bookings. If and when the restaurant has hundreds, even thousands of bookings, a staff member can use the search feature to quickly identify and navigate to that booking.
  • I have integrated automatic email sending which will send an email to the users booking email informing them that their booking has either been approved or denied.
    
    

• Check In

  • This is the second part of the booking flow system. After a staff member has approved a booking, the booking will then be displayed here if the booking in question is on todays date. For example if a booking is made and approved for 15/05/2022, that booking will only be displayed on the check in page on 15/05/2022. This is done to aid staff members when it comes to checking guests in.
  • If a staff member checks a guest in, the booking will then be removed from the check in page and then it will be sent to the third and final stage of the booking flow system which is the payments page.
  • If a staff member marks a guest as no show then the booking will not be sent to the payments stage.
  • Additionally, if a staff member is too busy and doesn't "no-show" a guest because they didn't turn up, the following day when the staff member clicks the 'Check In' link on the navigation bar, the system will send an automatic email out to the guest informing them that they did not show up.
  • An email will be sent out to the guest for both 'Check In' and 'No Show'. This is sent out for security measures.
    
    

• Payments

  • This is the third and final part of the booking flow system. After a staff member has checked the booking in, the booking will then be displayed here.
  • When the staff member clicks the yellow Payment button, it will then render a new page which will display additional information about that booking along with 2 input fields where a staff member can submit payment information.
  • To prevent staff members submitting payments that have not been settled, I have included some simple form validation that will check if the amount paid is equal or more than the amount owed.
  • When a staff member has successfully submitted payment details for that booking, the payment form will be removed and the details page will be updated.
  • This is then the end of the booking flow system however a staff member will still be able to access this booking through the Bookings > All Bookings page
    
    

• Reviews

  • This is the section which will present all reviews that have been submitted by guests.
  • Upon clicking the Reviews link on the navigation bar, the reviews that have not yet been actioned by a staff member will be presented here. At the top of the page is a link that will take the staff member to a page that will render all reviews. Here they can reset a review which will send it back to pending so they can either re-approve or re-deny the review.
    
    

• Staff Help

  • This is a simple link that will pop a modal up which is aimed to help and aid the staff member when navigating the staff dashboard.
    
    

• Automatic Email Sending

  • I decided that integrating automatic email sending to users would be beneficial as it acts as a further form of confirmation for the user about the status of their booking.
  • I originally used GMail as the email provider to send the emails however I encountered multiple '500 server errors'. These errors would be caused due to Google having a security measure that would prevent "less secure apps" from accessing the google account. There was an option that was available which allowed users to "Allow less secure apps" but this was removed May 30th 2022. Since then, I had looked into multiple different Email providers and after much configuration and consideration, I found that using Outlook was best suited for my current requirements.
    
    

Back to top

• Future Features

• Improved Booking System

  • The booking system does have good form validation and also a way that prevents double bookings, however I do believe that I could improve the system to perform more advanced criteria checking. For example, if a user books for 17:00 on 05/05/2022, they will not be able to book again for 17:00 on 05/02/2022 however they would be able to book again for a different time on that same day given it is a time in the future.

• Contact/Enquiry

  • Although guests can contact the restaurant via phone or email, I think it would make for a better user experience if a user could fill in a contact or enquiry form. This could work in tandem with the other future feature 'Dedicated User Profile Page' and any enquiries or replies could be sent there for the guest to see.

• Dedicated User Profile Page

  • At the moment when a guest creates an account, all the functionality needed for the guest to operate the website, make bookings, see details is there however I would like to make a dedicate profile page which would give the ability for users to do the following

    • Change profile details
    • View profile details
    • View reservations
    • View submitted reviews
    • View data about the guest in relation to Cafe Manbo
    • Message centre for the guest to communicate with staff members

Technologies Used

• Django - A model-view-template framework used to create Cafe Manbo
• Bootstrap - A CSS framework used to aid in front-end development
• HTML5 - Provides the content and structure for the website.
• CSS3 - Provides the styling for the website.
• JavaScript - Provides interactive elements of the website
• Python - Provides the functionality of the website.
• a11y - Used to test the contrast and accessibility.
• Favicon - Used to create the favicon.
• Compressor - Used to compress the images.
• VSCode - Used to create and edit the website.
• GitHub - Used to host and deploy the website.
• GitBash - Terminal used to push changes to the GitHub repository.
• removebg - Used to remove background images.
• Google Chrome DevTools - Used to test responsiveness and debug.
• Responsive Design Checker - Used to test responsiveness.
• Balsamiq - Used to create the wire-frame.
• Trello - Used as a project management tool to organise my work flow.
• Canva - Used to design the menu.
• Cloudinary - Used to host all static files .
• ChartJS - Used to present data in a bar and pie chart.
• DataTables - Used to provide extra functionality for All Bookings.
• TablePlus - Used to view databases in a clean, simple way.
• Heroku - Used to deploy the website
• PEP8 Validation - Used to validate Python code
• HTML Validation - Used to validate HTML code
• CSS Validation - Used to validate CSS code
• JSHint Validation - Used to validate JavaScript code
• Virutal Environment - Used to create a virtual environment
• Graph Models - Used to generate a .dot file for all apps and models
• dreampuf - Used to present the .dot file in the form of a database diagram
• Microsoft Paint - Used to add "Food with a smile" to golden menu stand image

Libraries

All the libraries used for this project are located in the requirements.txt file which has been created in a virtual environment. These libraries have been documented below.

• asgiref - ASGI is a standard for Python asynchronous web apps and servers to communicate with each other.
• autopep8 - Automatically formats Python code to conform to the PEP 8 style guide.
• black - Black makes code review faster by producing the smallest diffs possible.
• certifi - Certifi provides Mozilla’s carefully curated collection of Root Certificates for validating the trustworthiness of SSL certificates while verifying the identity of TLS hosts.
• cffi - Foreign Function Interface for Python calling C code.
• charset-normalizer - A library that helps you read text from an unknown charset encoding.
• click - It aims to make the process of writing command line tools quick
• cloudinary - Cloudinary is a cloud service that offers a solution to a web application’s entire image management pipeline.
• colorama - Makes ANSI escape character sequences
• coverage - Used to measure code coverage, typically during test execution.
• crispy-bootstrap-5 - Bootstrap5 template pack for django-crispy-forms.
• cryptography - cryptography includes both high level recipes and low level interfaces to common cryptographic algorithms such as symmetric ciphers, message digests, and key derivation functions.
• defusedxml - Contains several Python-only workarounds and fixes for denial of service and other vulnerabilities in Python's XML libraries.
• dj3-cloudinary-storage - Used to facilitate integration with Cloudinary by implementing Django Storage API.
• Django - Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design.
• django-allauth - Integrated set of Django applications addressing authentication, registration, account management as well as 3rd party (social) account authentication.
• django-crispy-forms - Used to integrate Django DRY forms.
• django-extensions - Django Extensions is a collection of custom extensions for the Django Framework.
• django-phone-field - Lightweight model and form field for phone numbers in Django.
• gunicorn - Gunicorn ‘Green Unicorn’ is a Python WSGI HTTP Server for UNIX.
• idna - Support for the Internationalised Domain Names in Applications (IDNA) protocol.
• mypy-extensions - The “mypy_extensions” module defines experimental extensions to the standard “typing” module that are supported by the mypy typechecker.
• numpy - NumPy is the fundamental package for array computing with Python.
• oauthlib - OAuthLib is a framework which implements the logic of OAuth1 or OAuth2 without assuming a specific HTTP request object or web framework.
• pandas - Used to provide fast, flexible, and expressive data structures designed to make working with "relational" or "labeled" data both easy and intuitive.
• pathspec - pathspec is a utility library for pattern matching of file paths.
• pep8 - pep8 is a tool to check your Python code against some of the style conventions in PEP 8.
• platformdirs - A small Python module for determining appropriate platform-specific dirs, e.g. a "user data dir".
• psycopg2 - Psycopg is the most popular PostgreSQL database adapter for the Python programming language.
• pycodestyle - pycodestyle is a tool to check your Python code against some of the style conventions in PEP 8.
• pycparser - It parses C code into an AST and can serve as a front-end for C compilers or analysis tools.
• PyJWT - A Python implementation of RFC 7519.
• python-dateutil - The dateutil module provides powerful extensions to the standard datetime module
• python3-openid - OpenID support for modern servers and consumers.
• pytz - This library allows accurate and cross platform timezone calculations using Python 2.4 or higher.
• requests - Requests is a simple, yet elegant, HTTP library.
• requests-oauhlib - OAuthlib authentication support for Requests.
• six - Six is a Python 2 and 3 compatibility library. It provides utility functions for smoothing over the differences between the Python versions.
• sqlparse - sqlparse is a non-validating SQL parser for Python.
• toml - A non-validating SQL parser.
• tomli - Tomli is a Python library for parsing TOML.
• urllib3 - HTTP library with thread-safe connection pooling, file post, and more.

Back to top

Testing

• Code Validation

  • Cafe Manbo has been validated by using online validation tools W3C HTML Validator, W3C CSS Validator, JSHint JavaScript Validator and the PEP8 Online Validator.

• HTML Validation Image

  

• CSS Validation Image

  

• JSHint map.js Image

  

  • The JavaScript code for map.js was taken from the Code Institute Resume Project which shows students how to integrate google maps on a website.

• JSHint nav.js Image

  

• PEP8 Validation Image (accounts/apps.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (accounts/tests.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (accounts/urls.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (accounts/views.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (bookings/apps.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (bookings/forms.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (bookings/models.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (bookings/tests.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (bookings/urls.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (bookings/utils.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (bookings/views.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (cafe/asgi.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (cafe/settings.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (cafe/urls.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (cafe/wsgi.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (home/apps.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (home/tests.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (home/urls.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (home/utils.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (home/views.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (reviews/apps.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (reviews/forms.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (reviews/models.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (reviews/tests.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (reviews/urls.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (reviews/utils.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (reviews/views.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (staff/apps.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (staff/forms.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (staff/tests.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (staff/urls.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (staff/utils.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (staff/views.py)

  PEP8 Validation Image

  

  
  

• PEP8 Validation Image (manage.py)

  PEP8 Validation Image

  

  
  

• Lighthouse Testing

  • Furthermore the website has been through the Chrome Dev Tools Lighthouse Testing which tests the website for the following:

    • Performance - How the page performs whilst loading.
    • Accessibility - Is the site accessible for all players and how can it be improved.
    • Best Practices - Site conforms to industry best practices.
    • SEO - Search Engine Optimisation. Is the site optimised for search engine result rankings.

  • The lighthouse tests were conducted in incognito/private windows due to extensions interfering with the results.
    
    

• Chrome Desktop Lighthouse Result - Home Page

  

• Chrome Mobile Lighthouse Result - Home Page

  

  • Performance is at 77 due to Google Maps blocking the main thread for 440ms. I've decided that this is not something that is too severe however if it did become a significant problem then I would disable Google Maps for mobile users.

• Chrome Desktop Lighthouse Result - Gallery Page

  

• Chrome Mobile Lighthouse Result - Gallery Page

  

• Chrome Desktop Lighthouse Result - Book Now Page

  

• Chrome Mobile Lighthouse Result - Book Now Page

  

• Chrome Desktop Lighthouse Result - My Reservations Page

  

• Chrome Mobile Lighthouse Result - My Reservations Page

  

• Chrome Desktop Lighthouse Result - Write A Review Page

  

• Chrome Mobile Lighthouse Result - Write A Review Page

  

• Chrome Desktop Lighthouse Result - Signup Page

  

• Chrome Mobile Lighthouse Result - Signup Page

  

• Chrome Desktop Lighthouse Result - Login Page

  

• Chrome Mobile Lighthouse Result - Login Page

  

• Chrome Desktop Lighthouse Result - Logout Page

  

• Chrome Mobile Lighthouse Result - Logout Page

  

• Chrome Desktop Lighthouse Result - Staff Dashboard - Dashboard Page

  

• Chrome Mobile Lighthouse Result - Staff Dashboard - Dashboard Page

  

• Chrome Desktop Lighthouse Result - Staff Dashboard - Pending Bookings Page

  

• Chrome Mobile Lighthouse Result - Staff Dashboard - Pending Bookings Page

  

• Chrome Desktop Lighthouse Result - Staff Dashboard - All Bookings Page

  

• Chrome Mobile Lighthouse Result - Staff Dashboard - All Bookings Page

  

• Chrome Desktop Lighthouse Result - Staff Dashboard - Check In Page

  

• Chrome Mobile Lighthouse Result - Staff Dashboard - Check In Page

  

• Chrome Desktop Lighthouse Result - Staff Dashboard - Payment Page

  

• Chrome Mobile Lighthouse Result - Staff Dashboard - Payment Page

  

• Chrome Desktop Lighthouse Result - Staff Dashboard - Submit Payment Page

  

• Chrome Mobile Lighthouse Result - Staff Dashboard - Submit Payment Page

  

• Chrome Desktop Lighthouse Result - Staff Dashboard - Pending Reviews Page

  

• Chrome Mobile Lighthouse Result - Staff Dashboard - Pending Reviews Page

  

• Chrome Desktop Lighthouse Result - Staff Dashboard - All Reviews Page

  

• Chrome Mobile Lighthouse Result - Staff Dashboard - All Reviews Page

  

• Accessibility Testing

  • I also put the website through a11y to further test the contrast and found no issues.
    
    

  

• Responsiveness Testing

  • I conducted responsive tests manually with Google Chrome DevTools and Responsive Design Checker.
    
    

  

  

• Compressing Images

  • All images that are displayed within the website have been compressed with Compressor and I managed to save a total of 12.82 MB.
    
    

  

  

• Automated Testing

  • During this project I have found the benefit of automated testing to be extremely beneficial. Automated testing as highlighted many minor discrepancies that would have been missed had it not been highlighted when conducting automated testing.

  • I currently have 34 individual tests which provide 91% coverage as shown in the below image.

  • To run the automated tests, type the command - python manage.py test

  

  

• Manual Testing

In addition to the other tests, I have conducted a manual check list for myself to carry out to make sure that everything is working as intended.

• Browser Compatibility

  • The website has had manual and responsive tests conducted on the below browsers with additional Lighthouse testing on Google Chrome and Microsoft Edge and I was presented with no issues.
    • Google Chrome
    • Microsoft Edge
    • Safari
      
      

Back to top

• Bugs Fixed

  Uncaught DOMException

  • When a staff member was navigating the staff dashboard through the staff navigation bar, I noticed that I would receive the below console error. This error would appear when a staff member would click between two links.
    
    

  

  • To solve this error, I figured out that removing the standard .nav-link class from each link and targeting each link through a href and adding margin bottom to give spacing completely resolved this issue. The navigation bar remained fully responsive and now has zero console errors.

  Uncaught (in promise)

  • Upon loading the home page, sometimes (not often) I would see the below error message.

  

  • To solve this error, I noticed that it was being caused due to the map.js file which has the initMap function which powers the google maps API and this file was being rendered after the google maps API was making the call. Therefore to fix this issue, I moved the maps.js file further up the code tree so that this file would be loaded first before the google maps API made the call to launch the initMap function.

  Google Billing Error

  • Because I had not enabled billing on my google cloud project, the below error started showing.

  

  • To solve this error, I simply entered my billing details to my google cloud project account. This was for security reasons only and I have not been charged.

  HTML Validation Error (Duplicate attribute defer)

  • When validating my HTML code through the HTML Validation website, I was presented with the below error.

  

  • To fix this issue, I had to remove the duplicate 'defer' attribute.

  HTML Validation Error (Section lacks heading)

  • When validating my HTML code through the HTML Validation website, I was presented with the below warning.

  

  • To fix this issue, I changed the <'section'> tag to a <'div'> tag because I tried using all the different H1-6 tags however this warning kept appearing. Changing the <'section'> tag to a <'div'> tag fixed this warning.

  HTML Validation Error (Bad value false)

  • When validating my HTML code through the HTML Validation website, I was presented with the below error.

  

  • I found an article online which mentioned that setting async="false" would fix my "Uncaught in promise" console error however I later found at that this has been deprecated. Additionally I solved the "Uncaught in promise" error as mentioned above. To fix this HTML Validation Error, I simply removed the async="false" attribute.

  Gallery Page Lighthouse Results

  • When testing the entire website with Chrome Dev Tools Lighthouse tool, I was not satisfied with the performance score.

  

  • After attempting many different methods to fix this issue and increase the performance, I decided to implement a Bootstrap 5 carousel which greatly increased the performance of this page. I also think it makes the page more user friendly and more appealing to the eye.

  

• Bugs Unresolved

  navigator.userAgent/appVersion and platform

  • When inspecting the website with Google Chrome DevTools, the website is showing a navigator.userAgent issue. Throughout developing all of my projects this issue has always been present so I am familiar with it.
    
    

  

  • I've done some research and apparently this is a Google Chrome issue as per this source and has been reported here. Additionally, I have tested this website with Microsoft Edge and the issue doesn't show.

Back to top

Deployment To Heroku

The project was deployed to Heroku. The deployment process is as follows:

1. Create a new GitHub repository from CI template:

• Firstly we need to create a new GitHub repository. Head over to this link and click 'Use this template'
  
  

• Fill in the appropriate details and then click 'Create repository from template'
  
  

• Click 'Code' and then copy either the HTTPS or SSH link. I used SSH.
  
  

• Open up Command Prompt, navigate to where you wish your project to be stored and then type the following commands:
  
  
  • git clone HTTPS or SSH link - This will clone your project to your local machine
  • cd name of project - This will cd into your project
  • code . - This will launch your project in VSCode
    
    

• It is good practice to initialize a virtual environment when working on any project. A virtual Environment provides the facility to work on a specific project without affecting other projects. It allows a unique working environment for avoiding dependencies. I followed this brilliant article by medium.com to setup my virtual environment.

• When you have successfully installed a virtual environment, type the following commands into the VSCode terminal:
  
  

  • virtualenv env - This will create a new virtual environment for your project
  • source env/scripts/activate - This will activate your virtual environment
  • Don't forget to add env to your .gitignore file
  • You can tell if your virtual environment is working by looking for (env) above your PC name in the terminal
    
    

2. Installing Django and supporting libraries:

• Now it's time to install Django and it's supporting libraries. In the terminal, type the following commands:
  
  

  • pip3 install 'django<3.2' gunicorn
  • pip3 install dj_database_url psycopg2
  • pip3 install dj3-cloudinary-storage
    
    

• After you have successfully installed the above, type the following command:
  
  

  • pip3 freeze --local > requirements.txt
    
    

• This will create a requirements.txt file as show below
  
  

• Now we need to create our Django project and the applications. In the terminal type the following command:
  
  

  • django-admin startproject PROJ_NAME .
  • django-admin startapp APP_NAME .
    
    

• You then need to add your application to the INSTALLED_APPS section in your settings.py as shown below
  
  

• Then type the following commands in the terminal:
  
  
  • python manage.py migrate
  • python manage.py runserver
    
    

3. Deploying an app to Heroku:

• After you have successfully navigated to Heroku, created an account and logged in, click 'New' and then click 'Create new app'
  
  

• Pick a suitable app name and choose your preferred region. Since I live in the United Kingdom, I have chosen Europe as my region
  
  

• Inside your application, click the 'Resources' tab and then search for 'Heroku Postgres'. Attach this to your project as a database by clicking 'Submit Order Form'. If done correctly, you should see the below image.
  
  

• If you click the Heroku Postgres link, it will then open a new page which has all the information about your new Heroku Postgres database. This is where we will find our credentials. Click 'Settings' and then click 'View Credentials' and you will then see the below image (with your details not mine)

• The piece of information that we are particularly interested in, is the URI.
  
  

• Since we are in Heroku, navigate to your project settings and click 'Reveal Config Vars'. Add your Heroku config vars to your project as shown below

  • DISABLE_COLLECTSTATIC = 1 is a temporary step for the moment and it will be removed before deployment
    
    

• Back in VSCode, create a new file called env.py and ensure this is added to your gitignore file. Copy the below code but change the variable content to your specific details.
  
  

• In settings.py, look for the line that says 'from pathlib import Path' and then insert the code below.
  
  

• Replace the default random security key that Django provides with your SECRET_KEY that you created in your env.py file.
  
  

• Set DEBUG = 'DEVELOPMENT' in os.environ. This allows you to have DEBUG set to True when developing locally, however DEBUG will be set to False when deployed to Heroku.
  
  

• Additionally, copy the below code to enable use of both the PostgreSQL and SQLite databases. We will use the SQLite database for local development and then the PostgreSQL database for the deployed application.
  
  

• Add the cloudinary application to the INSTALLED_APPS in settings.py. Take notice of the order, this is important.
  
  

• Find STATIC_URL = '/static/' in your settings.py file and copy the below code. This tells Django to use Cloudinary to store media and static files.
  
  

• Add the below code to your settings.py file. This links the file to the templates directory in Heroku
  
  

• Add your allowed hosts to ALLOWED_HOSTS. For example, I have linked my pp4-deployment-process application and also linked both 127.0.0.1 and localhost to allow me to launch the application locally.
  
  

• Now we need to create 3 new folders and 1 new file on the top level directory
  
  

  • media (folder)
  • static (folder)
  • templates (folder)
  • Procfile (file)

• Within the Procfile, add the following line of code web: gunicorn PROJ_NAME.wsgi. PROJ_NAME is the name of your application. If done correctly, your project directory should look like the below image.

• Make sure to save all files and then type the following commands in the terminal:
  
  

  • git add .
  • git commit -m "Deployment commit"
  • git push

• The final step is to then deploy your application. My preferred way of deployment was to use the Heroku CLI.
  
  

  • heroku login - This will open a new window for you to log in
  • heroku git:remote -a PROJ_NAME - This will tell Heroku to build your application from this repo
  • git push heroku main - This will build your application
    
    

The live link to the Github repository can be found here - https://github.com/MikeR94/CI-Project-Portfolio-4

Back to top

Cloning and setting up this project

If you wish to clone and setup this project locally then the process is as follows:

• Go to the project repository and clone the project. Click 'Code' and then copy either the HTTPS or SSH link. I used SSH.
  
  

• Open up Command Prompt, navigate to where you wish your project to be stored and then type the following commands:
  
  
  • git clone HTTPS or SSH link - This will clone your project to your local machine
  • cd name of project - This will cd into your project
  • code . - This will launch your project in VSCode
    
    

• It is good practice to initialize a virtual environment when working on any project. A virtual Environment provides the facility to work on a specific project without affecting other projects. It allows a unique working environment for avoiding dependencies. I followed this brilliant article by medium.com to setup my virtual environment.

• When you have successfully installed a virtual environment, type the following commands into the VSCode terminal:
  
  

  • virtualenv env - This will create a new virtual environment for your project
  • source env/scripts/activate - This will activate your virtual environment
  • Don't forget to add env to your .gitignore file
  • You can tell if your virtual environment is working by looking for (env) above your PC name in the terminal
    
    

• Now it's time to install project requirements needed to run the project. In the terminal, type the following command:
  
  

  • pip3 install -r requirements.txt
    
    

• This will download all the necessary dependencies stated in the requirements.txt file which will enable the project to work.
  
  

• Now we need to create our env.py file which tells our project which variables to use. These variables are usually hidden for security purposes so make sure to not publicly share your .env file. As you can see I have set ["STATIC_FILES_STORAGE"] and ["CONTRIB_AUTH_PASSWORD"] in my .env file. This is not a secret variable, I have only done this as these variables were too long to pass PEP8 validation so I decided to parse them from the .env file so that the settings.py file is now fully PEP8 compliant.

• Any variables that you declare in your .env file, make sure you add them all (apart from ["DEVELOPMENT"] ) to your config vars when you deploy to Heroku.
  
  

• Now when we try to run the server by typing python manage.py runserver you will see that we have unapplied migrations. This is normal and expected.
  
  

• Type the command python manage.py migrate. This will apply all the migrations necessary for the project to work.
  
  

• After all the migrations have been successfully made, type the command python manage.py runserver.
  
  

• This will successfully launch the project locally and is ready for development.
  
  

Back to top

Credits

Content

• I used this brilliant tutorial by Denis Ivy on how to send emails with Django YouTube.
• This website was designed heavily utilising the Bootstrap framework and I referenced the Bootstrap Documentation when implementing features.
• The navigation bar toggler animation was from uknowhat and slightly modified to fit the website theme.
• The table styling was from AllThingsSmitty and was slightly modified to fit the website theme.
• The implementation of the google maps API was referenced from the Code Institute lesson.
• I relied heavily on the Django 3.2 Documentation when developing this website. The documentation is brilliant and goes in depth on how to implement features to the website.
• I've submitted and approved some reviews on the website already and the text used was from eatsleepwander.

Media

• The photos were compressed using Compressor.
• The favicon image came from encrypted-tbn0 and then turned into a favicon by Favicon.
• The golden menu image was from ForbesIndustries and I then used Microsoft Paint to add the "Food with a smile" text to it.
• The food hygiene label image was from Food Standards Agency.
• All the images used on the gallery page and also the hero image was from Pexels/Restaurant.
• The thank you image used on the write a review page came from Clipartmax.
• The unhappy duck image used on the my reservations page when the user does not have any bookings was from iStockPhoto.
• The menu PDF was designed using Canva.

Back to top

Acknowledgments

The site was completed as a part of a Full Stack Software Developer Diploma at the Code Institute and is my Portfolio Project 4. I would like to thank my mentor Precious Ijege, my educator Luke Walters, and my brother Jack Ralph, the Slack community, and all at the Code Institute for their help and support.

Mike Ralph 2022.

Back to top