Elgini's Restaurant

(Developer: Daniel Richards)

View live site

Table of Content

Project Goals
1. User Goals
2. Site Owner Goals
User Experience
Technologies Used
1. Languages
2. Frameworks & Tools
Features
Testing
Bugs
Deployment
Credits
Acknowledgements

User Experience

Strategy

Primary Goal

The primary goal of the website from the site owners perspective is as follows:

To attract customers to the business by showing an attractive and appealing variety of food.
To allow a user to navigate the website and see food options easily
To allow a user to make a reservation

The primary goal of the website from a site users perspective is as follows:

To view the restaurants menu
To view details about food dishes, including allergens, description and prices
To be able to filter dishes by allergies
To make a reservation
To contact the restaurant
To view opening hours
To post a review or comment about their experience
To view other customer’s reviews and comments

Target Audience

Families
Couples
Small groups of friends
People living within a 20 mile radius
Italian food lovers
People who love organic and homemade food

User Requirements and Expectations

An easy navigation system with instant learning.
Able to navigate the site quickly and easily.
No broken links.
Responsive and visually appealing on all devices.
Ability to contact the business

Structure

Code Structure

The project is organised into a variety of applications, as is constructed using the Django Framework.

App details as follows:

Home - this app contains information about the restaurant home page with quick links to the menus on page and table booking via the nav bar.
Meals - this app contains the menu structure, users can choose between the lunch drink and dinner menu. Clicking individual items opens a sub page where users can see detailed food information including allergens and calories.
About - this app contains information relating to the business heritage the opportunity for users to view, add, edit, delete comments with authentication.
Contact - this app is for users to be able to submit a message to the site owners and recieve acknowledgment.
Booking - this app is for users to be able to submit a booking reqeuest with date validation so cannot be booked in past and also only within restaurant opening hours.

To complement the apps there are

project: Project level files - settings.py for project level settings and urls.py to route the website URLS
templates: Containing the base.html, allauth(django authentication)
templates (app level): each app has it's own templates directory for HTML to consider portability and re-use.
urls (app level): each app has it's own url.py file to consider portability and re-use.
static: Base css and Javascript files
manage.py: This file is used to start the site and perform funcions during development
README.md: Readme documentation
Procfile: To run the application on Heroku
Requirements.txt: Containing the project dependencies Note: Environment variable values are not exposed in the source code, they are stored locally in env.py that is not checked in(and listed in .gitignore, and on Heroku in app settings

Physical database model

This model contains all fields stored in the database collections with their data type and mimics the structure of what is actually stored in the Postgres database

Models

The following models were created to represent the database model structure for the website

User Model

The User model contains information about the user. It is part of the Django allauth library
The model contains the following fields: username, password, first_name, last_name, email, is_staff, is_active, is_superuser, last_login, date_joined

Meal Model

The Meal model contains information about meals available within each of the menus
It contains Category as a foreign-key.
It contains Allergen as a Many-toMany relationship.
The model contains the following fields: Name, Category, Description, Allergen, Lunch, Dinner, Calories, Price, Vegetarian, Vegan, Image, Slug.

Category Model

The category model contains the available categories for a meal item
The model contains the following fields: name

Allergen Model

The Allergen model contains allergens that may be contained in the meals, this has a many to many relationship with meals model.
It contains images so to be easily understood to non english speakers.
The model contains the following fields: name, image.

Drink Model

The Drink model contains a the drinks available at the restaurant
It has DrinkCategory as a foreign-key.
The model contains the following fields: name, description, category, image.

DrinkCategory Model

The News model contains viable categories for the drinks.
It acts as a foreign-key for Drinks model
The model contains the following fields: name

Comment Model

The News model contains a comment that renders on the about page.
The model contains the following fields: user, comment_text, created_date

Booking Model

The Booking model contains a collection of data submitted by the user when requesting a reservation.
The model contains the following fields: name, email, phone, party_size, date, ,time

Contact Model

The Contact model contains a collection of data submitted by the user when messaging the site owner.
It contains Reasons as a foreign-key.
The model contains the following fields: reason, email, phone, postcode, street_address, message.

Reason Model

The Contact model contains a collection pre configured headers that the user can use to send the message.
It acts as a foreign-key for Contact model.
The model contains the following fields: reason

About Model

The About model contains a collection of data and image to show the restaurant heritage..
The model contains the following fields: title, body, image.

Reasons Model

The Reasons model contains a collection reasons as to why the user should use the establishment.
The model contains the following fields: reason, body.

Chefs Model

The Chefs model contains the chef images, names and biography.
The model contains the following fields: name, image, bio.

Home Model

The Home model contains the items for the carousel on the home page.
The model contains the following fields: Title, body, image.

Scope

User stories:

First time user

As a first time user, I want to be able to view the type of food the restaurant provides
As a first time user, I want to see professional and appealing images of the food
As a first time user, I want to be able to navigate the website quickly and easily
As a first time user, I want to be able to view the full menu
As a first time user, I want to be able to view food allergies and calories
As a first time user, I want to be able to view a description and price of the food
As a logged in user, I want to be able to leave a comment or review
As a logged in user, I want to be able to see other user’s comments and reviews
As a logged in user, I want to be able to edit and delete a comment I have made
As a first time user, I want to be able contact the restaurant
As a first time user, I want to be able to make a reservation
As a first time user, I want to be able to view the restaurants location and opening hours
As a first time user, I want to know about the business and it’s ethos
As a first time user, I want to be able to see special offers and promotions.
As a logged in user, I want to be able to to sign in to, or create an account
As a logged in user, I want to be able to log out of an account
As a first time user, I want to be able to see separate menus for lunch, dinner and drinks
As a first time user, I want to be able to view the business’ social media

Site Owner

As a site owner, I want to attract customers to our restaurant
As a site owner, I show appealing and professional images of our food
As a site owner, I want users to be to view our full menu
As a site owner, I want users to be able to view the food descriptions and prices
As a site owner, I want users to be able to view allergies and calories
As a site owner, I want users to be able to make a reservation with data validation so they can only book future dates and in valid opening time.
As a site owner, I want users to be able to leave a comment or review
As a site owner, I want users to be able to view other comments and reviews
As a site owner, I want users to be able to edit and delete comments or reviews
As a site owner, I want users to be able to contact the business
As a site owner, I want users to be able to view the location and opening times
As a site owner, I want users to be able to find out about our business ethos
As a site owner, I want users to be able to have an idea of the restaurant’s welcoming atmosphere so they will make a reservation
As a site owner, I want users to be able to navigate the site easily and quickly
As a site owner, I want to be able to promote special offers and events.
As a site owner, I want users to be able to sign in to, or create an account
As a site owner, I want users to be able to log out of their account
As a site owner, I want users to be able to see separate menus for lunch, dinner and drinks
As a logged in administrator, I want to be able to review and approve or delete user comments.
As a site owner, I want users to be able to view the business’ social media
As a logged in administrator, I want to be able to create, edit or remove content on the website.

Error Flow

As first time, I user should be able to navigate back through the site structure in case of page not found without using the browser back button.
As a site owner, I want a 404 page that enables users to be able to return to valid areas of the site without using browser controls.

Skeleton

Wireframes

Home

About

Contact

Menus

Dinner Menu

Drinks

Lunch Menu

Meal Details

Logout

Reservation

Errors

Surface

Design choices

The overall design of the website was to keep it clean and simple, to allow the imagery of the food to shine through, and to choose colours that didn’t distract or take focus. The website also needs to act as a portfolio to attract users to book and visit the restaurant, so we chose a gallery image layout for the menu, and made sure to include photography of the staff and restaurant interior.

The site is straightforward to navigate, with a high contrasting navigation bar to enable ease of use for the user to find other main pages.

The background is neutral but bright, the images are the focal point of the home page so the user has an immediate view of the food. The rest of the colour scheme is reflecting the rustic Italian interior of the restaurant.

Colours

The colour palette is fairly neutral and warm. The bold colours that are used in focal points such as buttons and titles, and the neutrals are used for backgrounds and body text.

#212529 - Title text
#4F4F4F - Body text
#5A753A - Buttons
#703D30 - Lines and subtitles
#FBF4E1 - Background
#FFFFFF - Logo and header links

After choosing a colour scheme I tested a number of palette options to make sure the it met accessibility standards.

Typography

Maria Rose is the font uses for the logo, and is replicated in the main headings of the website. This font is licensed from Creative Market, with a standard license for personal use.

Josefin Sans is the font used across all of the body text, this font is from the Google Fonts Library.

Features

The site contains 12 pages and

Home page
Full menu
Food description
lunch menu
dinner menu
drinks menu
about
contact
reserve
login
sign up
log out

Page 1 - Home page

The home page consists of the following features:

Feature 1 - Header and navigation Bar, the header and navigation bar are shown across all pages.

The header shows the logo of the website, as well as a navigation bar with quick access to the main pages of the website.

This feature covers the following user stories

3. As a first time user, I want to be able to navigate the website quickly and easily

10. As a first time user, I want to be able contact the restaurant

11. As a first time user, I want to be able to make a reservation

15. As a logged in user, I want to be able to sign in to, or create an account

16. As a logged in user, I want to be able to log out of an account

21. As a site owner, I want users to be to view our full menu

24. As a site owner, I want users to be able to make a reservation with data validation so they can only book future dates and in valid opening times.

28. As a site owner, I want users to be able to contact the business

32. As a site owner, I want users to be able to navigate the site easily and quickly

34. As a site owner, I want users to be able to sign in to, or create an account

35. As a site owner, I want users to be able to log out of their account

Feature 2 - Carousel

The carousel consists of 3 hero images, which play automatically upon landing on the page. It can be used by the site owner to promote any special offers and events.

This feature covers the following user stories

1. As a first time user, I want to be able to view the type of food the restaurant provides

2. As a first time user, I want to see professional and appealing images of the food

14. As a first time user, I want to be able to see special offers and promotions.

19. As a site owner, I want to attract customers to our restaurant

20. As a site owner, I show appealing and professional images of our food

33. As a site owner, I want to be able to promote special offers and events.

39. As a logged in administrator, I want to be able to create, edit or remove content on the website.

Feature 3 - lunch, dinner and drinks images with buttons

The menu images show an image of the restaurant food with a clear button overlay which takes the user directly to the relevant menu page quickly and easily.

This feature covers the following user stories

1. As a first time user, I want to be able to view the type of food the restaurant provides

2. As a first time user, I want to see professional and appealing images of the food

3. As a first time user, I want to be able to navigate the website quickly and easily

4. As a first time user, I want to be able to view the full menu

17. As a first time user, I want to be able to see separate menus for lunch, dinner and drinks

19. As a site owner, I want to attract customers to our restaurant

20. As a site owner, I show appealing and professional images of our food

21. As a site owner, I want users to be to view our full menu

36. As a site owner, I want users to be able to see separate menus for lunch, dinner and drinks

Feature 4 - footer

The footer features the business’ social media links, as well as links to the main pages the user would want to navigate.

This feature covers the following user stories

3. As a first time user, I want to be able to navigate the website quickly and easily

18. As a first time user, I want to be able to view the business’ social media

32.As a site owner, I want users to be able to navigate the site easily and quickly

38. As a site owner, I want users to be able to view the business’ social media

Page 2 - Full Menu

The full menu page has an internal navigation bar to guide the user through the menu sections. It also shows the restaurant’s full list of food dishes with images, descriptions, prices and dietary requirements. The images are professional quality and are shown in a clear grid layout, separated with header images.

It consists of the following features:

Feature 1 - internal navigation bar

The internal navigation bar helps the user to browse the menu without scrolling through the whole page.

This feature covers the following user stories

1. As a first time user, I want to be able to view the type of food the restaurant provides

3. As a first time user, I want to be able to navigate the website quickly and easily

6. As a first time user, I want to be able to view a description and price of the food

20. As a site owner, I show appealing and professional images of our food

22. As a site owner, I want users to be able to view the food descriptions and prices

32. As a site owner, I want users to be able to navigate the site easily and quickly

Feature 2 - Full menu image gallery

The full menu image gallery shows a professional image of each individual dish, with the dish name and brief description, as well as the price and dietary requirements. When the user selects on the image a new page opens for the item, which includes additional information including the allergy and nutritional values.

This feature covers the following user stories 1. As a first time user, I want to be able to view the type of food the restaurant provides

2. As a first time user, I want to see professional and appealing images of the food

4. As a first time user, I want to be able to view the full menu

6. As a first time user, I want to be able to view a description and price of the food

19. As a site owner, I want to attract customers to our restaurant

20. As a site owner, I show appealing and professional images of our food

21. As a site owner, I want users to be to view our full menu

22. As a site owner, I want users to be able to view the food descriptions and prices

Page 3 - Food description

The food description page is shown when a user clicks on the image of an individual item. The page enables users to find out a more detailed description of the item including the allergies and calorie content. It consists of the following features:

Feature 1 - the additional nutritional information The additional nutritional information includes:

Known allergies of the item, shown in text and a clear illustrated symbol.
Calorie content

This feature covers the following user stories

2. As a first time user, I want to see professional and appealing images of the food

5. As a first time user, I want to be able to view food allergies and calories

6. As a first time user, I want to be able to view a description and price of the food

19. As a site owner, I want to attract customers to our restaurant

20. As a site owner, I show appealing and professional images of our food

22. As a site owner, I want users to be able to view the food descriptions and prices

23. As a site owner, I want users to be able to view allergies and calories

Page 4 - Lunch Menu

The lunch menu page shows items on the lunch menu only. It has an internal navigation bar to guide the user through the menu sections. It also shows the item’s image, descriptions, price and dietary requirements. The images are professional quality and are shown in a clear grid layout, separated with header images. It consists of the following features:

Feature 1 - internal navigation bar

The internal navigation bar helps the user to browse the menu without scrolling through the whole page.

This feature covers the following user stories

1. As a first time user, I want to be able to view the type of food the restaurant provides

3. As a first time user, I want to be able to navigate the website quickly and easily

6. As a first time user, I want to be able to view a description and price of the food

22. As a site owner, I want users to be able to view the food descriptions and prices

32. As a site owner, I want users to be able to navigate the site easily and quickly

Feature 2 - Lunch menu image gallery