The restaurant is a fine dining restaurant located in the heart of Chicago. The restaurant overlooks Cloud Gate, one of the most beautiful landmarks in Chicago. Located here since 1998, it underwent a full-scale renovation and redesign in the summer of 2017. It presents to the user the products available and sets an expectation of the dishes that will be served. It allows the user to make/edit/delete a reservation and also send a form with details of an event, that will be sent to the restaurant admin and it can be afterwards transformed into a reservation.

Deployed site can be found here: Grace Restaurant

• Planning Phase
  • Site Objectives
    • Feasibility study
  • Structure
    • User Stories
  • Backbone
    • Wireframes
    • Landing page
    • Gallery page
    • Menu page:
    • Meet the team page:
    • Events page:
    • Landing page:
    • Login page:
    • Database schema
    • Color scheme
  • Agile Development Process
• Features
  • Site Navigation
    • Navbar
    • Home page
    • Our Restaurant page
    • Menu page
    • Gallery page
    • Team page
    • FAQ page
    • Events page
    • Login page
    • Sign-up page
    • Reservation page
    • View booking page
    • Update reservation page
    • Delete reservation
    • Cookbooks (COMING SOON) page
    • GIFTS (COMING SOON) page
• Future enhancements
  • Booking form
  • Emails
  • Webshop
• Testing Phase
• Deployment
• Technologies used
• Credits

The restaurant wants to inform the visitors about a sustainable approach on food, with zero waste policy. It's actively involved in local comunities and has the mission to reduce the carbon footprint. It's using local source products, and presents them to the customer in a fine dining manner.

The structure of the website is simple, easy to follow for every user, from the nav bar or from the footer. When developing the website, I have put myself in the shoes of the visitor, and organized the page, so it can be easy to reach.

• As a User I can ...

  • ... click on the nav bar so that I can easily navigate to the page of interest
  • ... I can click on the wine list so that I can view and download it
  • ... I can click on the cocktail list so that I can view and download it
  • ... I can click on the social link so that I can visit the restaurant social pages
  • ... I can view reviews/testimonials so that I can read them

• As a User I can't ...

  • ... submit and empty field in form so that I can validate the event

• As a Unregistered User I can ...

  • ... register an account so that I can login and view/update/delete my bookings
  • ... send a form so that I can send information with events to the restaurant

• As a Registered User I can ...

  • ... view booking so that I can update them with new information
  • ... view bookings so that I can cancel them

• As a Admin I can ...

  • ... view/edit/delete bookings so that I can manage them
  • ... block registered users capability to double book so that I can block him from booking the same date twice
  • ... send email on sending form so that I can confirm that the email has been received
  • ... send email on accepting booking so that I can inform user that the reservation request has been approved
  • ... send email on cancelation so that I can inform the user that the booking has been canceled
  • ... filter and search all custom models from the admin page so that I can utilize the admin page to review, edit and delete data quickly
  • ... add allergens to the dish when I create a course so that I can inform the customer about what it contains
  • ... I can block the ability of the user to choose a date earlier than tomorrow so that I can send corect data to the restaurant
  • ... I can add the option to confirm the action so that I can be sure that the user is aware of the form

• As a developer I can ...

  • ... make the website responsive on all devices so that I can give the user a better experience

I wanted to keep the color scheme as simple as possible, because within the website a lot of food picturescan be found, that I want to showcase. The more vibrant colors I did't consider that will add value, and will take away from the objective of the restaurant, that is food. I have used for reference the website: coolers.co In the end I have used the following colors

• #ffffff (white)
• #f8f9fa (gray) - footer
• 000000 (black)
• #827770 (brown) - nav bar

I have user only one font Zen Loop (uppercase) because it provided the Art Deco look that I wanted to achieve.

I have use GitHub to keep track of my progress. All of the user stories have been logged on Github here:(https://github.com/GeorgianF/Grace-P4-CI/projects/1)

The menu it's hidden from the view and it can be found by clicking the hamburger menu on the right side of the screen Once the button is clicked, the menu will appear

The user has full freedom on the page that he wants to visit, and everything is easy to reach.

The user is greeted with the logo of the restaurant, a motto and the main call to action button, to book table.

The footer is hidden under the first view.

The user will be greeted with a hero image, that contains one of the dishes from the restaurant - to let the user know what to expect after the booking process is complete. This page will provide information on the restaurant and the same call to action button to Book a Table can be found here.

At the next section of the page, can be found 3 previous clients testiomonials.

At the next sections of the page, can be found some general guidelines against the spread of the corona virus:

On this page the user can find information about the menu with the 6 options available:

• Starters
• Soups
• Salads
• Fish courses
• Main courses
• Desserts

Each category is presented as a card, that the user can click an flip it over. The card will show the dishes presente in that category and their prices. The card flips back automaticaly after 10 seconds.

At the bottom of the page, the user can also download a PDF file with the wine and cocktail list. To provide a full experience.

As the name implies, this a gallery of artistic representation of the dishes that the restaurant has produced in the past. The images are presented in a grip system, random layout. Each images has a animation added to it, whenever the user hovers on of the image, it will scale up and the name of the dish will appear from the bottom up, to the middle of the image.

On this page, the user can find information on the Executive Chef, on the kitchen team, the Sommelier, an the service team

On this page, the can find frequently asked questions and their answer. It's based on Bootstrap

Whenever the user clicks on one question, the answer will appear underneath and the main question will be highlighted with a blue color. Also the arrow has a animation, to rotate 180deg.

On this page can submit a form to the restaurant in regard to a event reservation. The user is not allowed to make a booking if the group is bigger than six, therefore he will have to submit a event request.

The information requested are:

• Email
• First Name
• Last Name
• Phone number
• Event date
• Event details

All fileds are mandatory.

Once all the fields are complete with the details, the user is requested to confirm the request via a modal.

Once the event form is confirmed, the user will be notified with a message on the page and the form will reset to the initial blank stage.

On this page the user can authentificate of sign-up with a new account

In case the user does not have an account, it will have the option to create a new one, by selecting the sign up button

Once the user is logged in, he will notified via a message alert on top of the page

On this page the user can register for a account, it will be required:

• Username
• Email(optional)
• Password

The page is based on the standard AllAuth pages from Django. If the user is taken, he will be notified:

If user is not authentificated it will redirected to the page to sign-in, with the option to sign-up. If user is authentificated, he will see that the menu will change to reflect the fact he is authentificated.

Once the button View Reservation from the navigation bar is click , the user will be redirected to the page to create a booking, via a form:

All fields are mandatory, and the PERSONS box has a restriction of number between 1 and 6. If the group is bigger than six, the user will need to use the event form. At the bottom of the form the user has the option to submit, reset or be redirect to the booking page

Once the reservation is submited, the user will be notified with a success message

The user is allowed only one reservation for the per interval, if he tries to select the same interval and same date he will be notified with an alert error message

One email will be sent if the user has the email address added to his profile, to confirm the reservation:

Here the user can view all the reservations that have been made, and are still active.

The view of the admin:

The user can view only the reservation that belongs to his name, the rest will be viewed as Anonymus.

The reservation done under the name of the username will have 2 button available: Update and Delete If the reservation is not under his name, he will, not have the option to modify or delete it. If the user clicks on the Update reservation, he will be redirected to the update reserrvation page and the same steps to create the reservation are applied. If the user clicks on the Delete reservation, he will need to confirm the deletion

There are 2 buttons available on the page, that will allow the user to easy filter the reservation, only for his user, or to view all reservations that were created.

Once the user clicks on the button to update the reservation, all the data will be pulled from the database and the user has complete freedom to change it as he wants. Once done he will need to confirm the change

He will be notified with a message, that the change has been succesfull noted in the system:

And on the website with a alert:

If the user chooses to delete the reservation, he can easily do it by clickin the delete button, where he will be asked to confirm.

A alert will appear:

An email notification will be sent, to confirm the cancelation:

The page is disabled, and it's future enhancement that can be added to the website

The page is disabled, and it's future enhancement that can be added to the website

Currently the booking form offers the user a basic functionality. But in the future, it can be added multiple function based on the options choosen. For example: If "No Allergies" is checked, to disable the rest the of the checkboxes For example: If "Dairy" is checked, a new input field can populate where the user can input how many users have a dairy allergie, and check for the condition of the total number or people

Apply styles to the email that is sent via Django, to make it more appealing

Two separate pages where a user can buy cookbooks and gifts (as jams, knifes, aprons, etc.)

I have included testing details during and post-development in a separate document called TESTING.md.

The final Deployed site can be found here I have included details of my initial deployment in a separate document called DEPLOYMENT.md.

• Python
  • The packages installed for the is project can be found in the requirements.txt
• Django
  • Django was used as the python framework in the project.
  • Django all auth was used to handle user authentication and related tasks i.e. sign in, sign up, sign out.
• Heroku
  • Used to deploy the page and make it publicly available.
• Heroku PostgreSQL
  • Used for the database during development and in deployment.
• HTML
  • HTML was the base language used to layout the skeleton of all templates.
• CSS
  • Custom CSS used to style the page.
• Javascript and JQuery
  • I have used Javascript and JQuery to manipulate the DOM.
• Bootstrap 5.2.0
  • Used to style HTML, CSS, minor javascript tasks.
• Font awesome
  • All icons throughout the page.

• Balsamiq was used to create the wireframes.

• The site was developed using Gitpod.

• GitHub was used to store my repository, and it can be found here: https://github.com/GeorgianF/Grace-P4-CI

• Guidance on file structure for templates folder from learndjango.com article

• coolers.co was used to generate the basic color scheme

• W3cschool was used to source the majority of the code

• Fonts were taken from Google Fonts

• Images:

  • Hero images taken from Great British Chefs
  • Logo was taken from Google Images

• Multiple videos sourced from youtube were used to research a variety of topics:

  • Animation for navication: https://www.youtube.com/watch?v=dIyVTjJAkLw
  • Responsive Grid Image Gallery: https://www.youtube.com/watch?v=gvPyJ0rc944&list=WL&index=6

• Datepicker, was added from this page: // https://simpleisbetterthancomplex.com/tutorial/2019/01/03/how-to-use-date-picker-with-django.html

• Set timeout for the Django messages alert: // https://github.com/studygyaan/Django-CRM-Project

• General references:

  • Geeks for Geeks
  • Stack Overflow
  • Code Institute Learning Platform
  • Django Documentation
  • Bootstrap Documentation
  • Jinja Template Documentation