Pizza Heaven - Resturant Booking

View the live project here.

This is the official page for Pizza Heaven. It is designed to be responsive and accessible on a range of devices, making it easy to navigate. The site offers a booking system on a fictive resturant, where the user can make a reservation and manage the booking by updating, or cancelling directly from the website. If the user is authenticated / logged in, it's possible make more than one booking vs. if the user is not logged in, it's limited to one booking only. Email's are sent to the email provided in the booking as well, when 1) creating a new booking 2) updating, or 3) cancelling. In addition to this, the user have a Bookings page where he/she can manage all the bookings.

User Experience (UX)

• User stories

  The user stories can be found here

• Design

  • Colour Scheme

    • The three main colours used are cyan darken-4, white, and black. The css uses the materializecss css library.

  • Typography

    • Uses the materializecss standard fonts.

  • Imagery

    • Theres one image, background image for all pages, this is an illustrative image of an italian pizza.

    Media

    • There are no particular media elements.

    Social Media

    • The footer has all social media links with icons making it easy for the user to click and follow. There is no added links to these, because this is a fictive site. But the icons are taken from fontawesome cdn. See base.html.

• Wireframes/Mockup

• 

Features

• Fully interactive booking form including data input validation. It's also including check of date/time. So it's not possible to book for a time in the past

• The booking form have date and time pickers for easy use/UX design from the materializecss library.

• The user will be informed by visual messages and landing pages if the booking was successful or not. This is also true if modifying or cancelling the booking. The user will also get an email for the booking, the email entered in the booking form. This is true for

  1. new bookings 2) modifyed a booking 3) cancelled a booking.

• Role based authentication including login with google account. If the user is not authenticated, it's only possible to make one single booking. If the user is authenticated, it's possible to make unlimited bookings.

• Superuser can login via the website, and manage all bookings and user accounts, when logged on. It's an extra available menu option "manage".

• A Bookings page displaying all the users current bookings. From this page, it's possible to manage all bookings. The page can be accessed via the dropdown menu in the main menu.

• The about and menu/booking sites is just fictive and illustrative for demonstration purposes only.

• The navbar is responsive, and uses side-nav functionality from materializecss during resizing to mobile/tablet devices.

• Error handling for all possible scenarios, if something goes wrong, the user is redirected to a dedicated error/landing page.

• Backend routines: The webpage will clear up all expired bookings, when one day old. Meaning if the booking data have expired, not the date the booking was created.

Features to be added/fixed

• Add more possible ways to login
• More information on the page, e.g a menu.

Technologies Used

Languages Used

• HTML5
• CSS3
• JavaScript
• jQuery
• Python

Frameworks, Libraries & Programs Used

1. django
   • Django is a high-level Python fullstack web framework that was used for implementing the MVC.
2. heroku:
   • Used for production, hosting service for the app with the postgresql
3. Cloudinary:
   • Cloudinary was used to host the static files, like custom css, javascript and images.
4. Materializecss:
   • Materializecss was used for css and date/time pickers.
5. Fontawesome:
   • Fontawesome was used for icons in the socials section in the footer
6. Google QAuth
   • Used for enabling Google login
7. Django-allauth
   • Used for authentication login/signup handling in django. Base template in allauth is modified to fit the site look and feel.
8. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
9. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
10. GitPod:
    • GitPod is used as the IDE for the project.
11. Chrome-DevTools:
    • Chrome DevTools was used to test responsiveness on all devices,to inspect html/css, and to debug the application.
12. Am I Responsive?
    • Am I Responsive? was used to create the screenshot of the website for all devices, the first image of the README.
13. Nu Html Checker
    • Used for validating html
14. Webpagetest
    • Used for performance and security testing.
15. Jigsaw CSS validator
    • Used for validating CSS.
16. Jsvalidate
    • Used for validating javascript
17. pep8online
    • USed for validating python

Testing

1. Nu Html Checker
2. Jigsaw CSS Checker
3. JavaScript Checker
4. pep8online Checker views.py
5. Webpagetest performance
6. Webpagetest requests
7. Manual testing have been conducted on mobile and desktop. Every possible scenario is tested, and exception handling is implemented thereafter. The code is well written in terms of exceptions.

Deployment

Heroku

The project was deployed to Heroku using the following steps...

1. Signup to heroku
2. Created the appname
3. Added environment variables and heroku postgresql
4. Attached the git repo to heroku, under deploy tab.
5. Deployed from heroku web interface

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/nno24/fullstack-toolkit-p4

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/nno24/fullstack-toolkit-p4
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Credits

1. Django documentation
2. Stackoverflow at times.

Code

• The pizza background image came from Motionarray with the right licence to use.

Content

• All content was written by the developer.

Media

• N/A

Acknowledgements

• My Mentor Precious Ijege for continuous helpful feedback.

• Tutor support at Code Institute for their support.