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 booking system offers a staff user to see the bookings in the databse, via the admin page. And customers can place new booking with date, time, and number of people. They also have to incude an email address. For the production environment, the send mail function is not activated, but it's implemented.

• User stories

  • Resturant Booking - Staff

    1. As a booking responsible for the resturant, I want to be able to see all the customers bookings time and date, and number of people in each booking, so that i can prepare the resturant in time.

  • esturant Booking - Customer

    1. As a customer, I want to be able to book a table for a specific data and time in the resturant, so that I can get a booking confirmation on my email.

• 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

• There are no wireframes for this webpage

• Fully interactive booking form, submitting the booking request to the heroku postgresql server.

• The booking form has input validation, and has included date and time pickers from the materializecss library.

• The user will be greeted with a booking confirmation if succesfully added to the database, this page also renders the booking details back to the user.

• Staff people for the resturant can login to the database to see the bookings, and do changes if necessary. The staff can login to django admin by adding "/admin" to the url, and login with user: staff, pass: staff.

• 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.

• Set a limit for how many can book in the same time duration at the same date. This info must be rendered to the user when before submitting the form.
• Give the user the possibility to cancel or change their booking from the webpage.
• Complete the menu/book with some more usable menu content - pizza types etc.
• Complete the send mail functionality in production environment, this was tested sucecssfully in development. This is the functionality that sends the email to the actual client, with the booking confrimation.

• HTML5
• CSS3
• JavaScript
• Python

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. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
7. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
8. GitPod:
   • GitPod is used as the IDE for the project.
9. Chrome-DevTools:
   • Chrome DevTools was used to test responsiveness on all devices,to inspect html/css, and to debug the application.
10. Am I Responsive?
    • Am I Responsive? was used to create the screenshot of the website for all devices, the first image of the README.

No testing was performed in this project. There was a very limited time, but the conceps for implementing a simple fullstack website in django was demonstrated.

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

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.

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.

1. Awesome django documentation
2. Stackoverflow at times, and some youtube videos came handy to get django more in the fingers.

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

• All content was written by the developer.

• N/A

• My Mentor Precious Ijege for continuous helpful feedback.

• Tutor support at Code Institute for their support.