(Developer: Daniel Richards)
- Project Goals
- User Experience
- Technologies Used
- Features
- Testing
- Bugs
- Deployment
- Credits
- Acknowledgements
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
- Families
- Couples
- Small groups of friends
- People living within a 20 mile radius
- Italian food lovers
- People who love organic and homemade food
- 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
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
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
- The following models were created to represent the database model structure for the website
- 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
- 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.
- The category model contains the available categories for a meal item
- The model contains the following fields: name
- 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.
- 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.
- 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
- The News model contains a comment that renders on the about page.
- The model contains the following fields: user, comment_text, created_date
- 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
- 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.
- 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
- The About model contains a collection of data and image to show the restaurant heritage..
- The model contains the following fields: title, body, image.
- The Reasons model contains a collection reasons as to why the user should use the establishment.
- The model contains the following fields: reason, body.
- The Chefs model contains the chef images, names and biography.
- The model contains the following fields: name, image, bio.
- The Home model contains the items for the carousel on the home page.
- The model contains the following fields: Title, body, image.
- 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
- 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.
- 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.
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.
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.
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.
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
The home page consists of the following features:
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
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.
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
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
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:
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
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
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
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:
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
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
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
22. As a site owner, I want users to be able to view the food descriptions and prices
36. As a site owner, I want users to be able to see separate menus for lunch, dinner and drinks
The dinner menu page shows items on the dinner 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:
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 
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 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
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
22. As a site owner, I want users to be able to view the food descriptions and prices
36. As a site owner, I want users to be able to see separate menus for lunch, dinner and drinks
The drinks menu page shows items on the drinks 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.
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
17. As a first time user, I want to be able to see separate menus for lunch, dinner and drinks
32. As a site owner, I want users to be able to navigate the site easily and quickly
36. As a site owner, I want users to be able to see separate menus for lunch, dinner and drinks
The about page provides the user with all of the background information of the business. The page also features a link to enable the user to visit the page showing the business location and opening hours.
The page covers the following user stories
12. As a first time user, I want to be able to view the restaurants location and opening hours
13. As a first time user, I want to know about the business and it’s ethos
19. As a site owner, I want to attract customers to our restaurant
29. As a site owner, I want users to be able to view the location and opening times
30. As a site owner, I want users to be able to find out about our business ethos
The page consists of the following features:
The accordion shows the user reasons for them to book a reservation, with the text highlighting the business ethos. The user can select any heading to allow the text to show in a drop down.
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
13. As a first time user, I want to know about the business and it’s ethos
19. As a site owner, I want to attract customers to our restaurant
30. As a site owner, I want users to be able to find out about our business ethos
31. 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
The image carousel circulates automatically. The images that circulate match each heading in the accordion.
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
13. As a first time user, I want to know about the business and it’s ethos
19. As a site owner, I want to attract customers to our restaurant
21. As a site owner, I show appealing and professional images of our food
30. As a site owner, I want users to be able to find out about our business ethos
31. 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
This scrollable comment section allows users to read other user’s comments and see their own comments after posting.
When the user is logged in they are able to edit and delete the comments that they have made.
This feature covers the following user stories
7. As a logged in user, I want to be able to leave a comment or review
8. As a logged in user, I want to be able to see other user’s comments and reviews
9. As a logged in user, I want to be able to edit and delete a comment I have made
25. As a site owner, I want users to be able to leave a comment or review
26. As a site owner, I want users to be able to view other comments and reviews
27. As a site owner, I want users to be able to edit and delete comments or reviews
37. As a logged in administrator, I want to be able to review and approve or delete user comments.
The login or signup links allow users to sign in to an existing account, or to create a new account to post comments
15. As a logged in user, I want to be able to create an account
34. As a site owner, I want users to be able to sign in to, or create an account
The contact page shows the user the business address and opening Hours. It also consists of an image background with the contact form overlay. The form allows the user to choose from a preset communication option from a drop down menu.
12. As a first time user, I want to be able to view the restaurants location and opening hours
29. As a site owner, I want users to be able to view the location and opening times
This feature covers the following user stories
7. As a logged in user, I want to be able to leave a comment or review
10. As a first time user, I want to be able contact the restaurant
25. As a site owner, I want users to be able to leave a comment or review
28. As a site owner, I want users to be able to contact the business
The reservation form consists of an image background with the reservation form overlay.
This feature covers the following user stories
11. As a first time user, I want to be able to make a reservation
12. As a first time user, I want to be able to view the restaurants location and opening hours
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.
29. As a site owner, I want users to be able to view the location and opening times
The form has required fields and only allows users to book future dates and in the restaurant’s opening hours.
This page allows the user to sign in to an existing account they have created. There is a link for the user to sign up if they haven’t yet made an account. Once logged in the user is able to post, amend or delete comments.
This page covers the following user stories
7. As a logged in user, I want to be able to leave a comment or review
9. As a logged in user, I want to be able to edit and delete a comment I have made
15. As a logged in user, I want to be able to to sign in to, or create an account
25. As a site owner, I want users to be able to leave a comment or review
27. As a site owner, I want users to be able to edit and delete comments or reviews
34. As a site owner, I want users to be able to sign in to, or create an account
This page allows the user to create an account. There is a link for the user to log in after making an
account.
This page covers the following user stories
15. As a logged in user, I want to be able to to sign in to, or create an account
34. As a site owner, I want users to be able to sign in to, or create an account
This page allows a logged in user to sign out of an account they have created.
This page covers the following user stories
16. As a logged in user, I want to be able to log out of an account
35. As a site owner, I want users to be able to log out of their account
This feature redirects the user back to any of the valid links rather than the user using browser controls.
This page covers the following user stories
40. 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.
41. 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.
This feature redirects the user back to any of the valid links rather than the user using browser controls.
This page covers the following user stories
39. As a logged in administrator, I want to be able to create, edit or remove content on the website.
- astroid==2.8.4 - for pylinting
- cloudinary==1.29.0 - for media and static file remote storage and serving
- crispy-bootstrap5==0.6 - for form styling
- dj-database-url==0.5.0 - (Support for DATABASE_URL environment variable)
- dj3-cloudinary-storage==0.0.6 - for media and static file remote storage and serving
- django-allauth==0.49.0 - (Web framework authentication)
- django-crispy-forms==1.14.0 - for form rendering and handling
- flake8==4.0.1 - for linting
- gunicorn==20.1.0 - (Python WSGI Http server)
- Pillow==9.0.1 - (Imaging library)
- postgres==4.0 - (Postgres adapter)
- psycopg2==2.9.3 (Postgres adapter)
- psycopg2-binary==2.9.3 (Postgres adapter)
- psycopg2-pool==1.1 (Postgres adapter)
- python3-openid==3.2.0 (Support for the OpenID decentralized identity system)
- Bootstrap 5.0 - for general site layout, grid, flex, carousel.
- Postgres - the site is deployed on Heroku using a Postgress database.
- SQLLite - this database was used in local development.
- VSCode - my IDE of choice for this project.
- Gitpod - used occasionally for tutor support.
- Github - used as the code repository.
- Google Fonts - used for the main body font and some headings.
- Balsamiq - used to create the website wireframes.
- Font Awesome - Font awesome was used to provide the relevant fonts/icons for the website social media icon links.
- JQuery - JQuery was used in some javascript files for DOM manipulation
- CSS Validation Service - for validation of the css in the project.
- HTML Markup Validation Service - for validation the HTML in the project.
- Firefox dev tools - troubleshooting and debugging of the project code.
- Chrome Lighthouse - for performance, accessibility, progressive web apps, SEO analysis of the project code.
- Responsive Design - for website mockup.
- JSHint - for javascript validation.
- PEP8 - for python validation.
- Quick Database diagrams- for the database schema diagram.
The HTML of the each page of the site was validated using W3C Markup Validation Service. All pages returned a pass with 0 errors and 0 warnings.
The W3C CSS Validation Service was used to validate the CSS of the website.
The custom CSS file for the site passed with 0 errors.
The Javascript of the each page of the site was validated using JSHint validation tool. All pages returned a pass with 0 errors and 0 warnings.
The Python of the each page of the site was validated using Python validation tool. All pages returned a pass with 0 errors and 0 warnings.
Details
The [WAVE WebAIM web accessibility evaluation tool](https://wave.webaim.org/ was used to ensure the website met high accessibility standards. All pages returned 0 errors.
Google Lighthouse was used to measure the performance and speed of the website -performance, accessibility, best practice and SEO with results below:
- As a first time user, I want to be able to view the type of food the restaurant provides
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Menu pages | Select any menu option from main nav bar | Menu page is displayed with images and information by category | Works as expected |
Menu pages | Select lunch, dinner, drinks sorted button links | Menu page is displayed with images and information by category | Works as expected |
- As a first time user, I want to see professional and appealing images of the food
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Meal details page | From any menu page, click meal image | Meal information page is displayed with larger image | Works as expected |
Menu pages | From any page, select a menu from the top nav bar | Menu page is displayed with meal images | Works as expected |
- As a first time user, I want to be able to navigate the website quickly and easily
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Main Nav bar | From any page click desired navbar link | Correct page is displayed and nav bar remains | Works as expected |
Footer nav bar | From any page click desired navbar link | orrect page is displayed and nav bar remains | Works as expected |
Menu page category nav bar | Click required category link | Page scrolls to correct internal link | Works as expected |
- As a first time user, I want to be able to view the full menu
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Full menu page | From any page, select main menu from nav header | Full menu page is displayed with context | Works as expected |
Full menu page | From the footer, select the menu link | Correct menu page is displayed with context | Works as expected |
- As a first time user, I want to be able to view food allergies and calories
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Meal details page | From any menu page, click the meal item image | Meal detail page is displayed for requested item with allergen info and calories displayed | Works as expected |
- As a first time user, I want to be able to view a description and price of the food
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Menu pages | From any page, click a link to a menu option | Menu page is displayed with description and price | Works as expected |
Meal details page | From any menu page, click the meal item image | Meal detail page is displayed for requested item with full description, allergen info, calories and price displayed | Works as expected |
- As a logged in user, I want to be able to leave a comment or review
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Comments section | Navigate to about page, login(signup prerequisite), write comment and submit | Comment is submitted and feedback is given (waiting approval) | Works as expected |
- As a logged in user, I want to be able to see other user’s comments and reviews
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Comments section | Navigate to about page, scroll down to comments section | Comments section is displayed with posted by, date and the comment | Works as expected |
- As a logged in user, I want to be able to edit and delete a comment I have made
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Edit comment | Login to site (precondition) select a valid comment you have written (approved), click edit, complete edit, submit | Comment is edited with visual feeback | Works as expected |
Delete comment | Login to site (precondition) select a valid comment you have written (approved), click delete, confirm delete | Comment is deleted and no longer displayed | Works as expected |
- As a logged in user, I want to be able contact the restaurant
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Contact page address and phone number | From any page, click nav link to contact page | Restaurant phone number and address are displayed | Works as expected |
Contact form | From contact page, complete all required form fields and submit | Contact form is submitted with visual feeback | Works as expected |
- As a first time user, I want to be able to make a reservation
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Contact page address and phone number | From any page, click nav link to contact page | Restaurant phone number and address are displayed | Works as expected |
Booking form | From booking page, complete all required form fields and submit | Booking form is submitted with visual feeback | Works as expected |
- As a first time user, I want to be able to view the restaurants location and opening hours
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Contact page address and phone number | From any page, click nav link to contact page | Restaurant address and opening hours are displayed | Works as expected |
- As a first time user, I want to know about the business and it’s ethos
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
About page | From any other page, click nav bar link to about page | About page is displayed with herritage, reasons to dine and chef bios | Works as expected |
- As a first time user, I want to be able to see special offers and promotions.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Carousel | Navigate to site home page | Carousel displays any special offers on rotation | Works as expected |
- As a logged in user, I want to be able to to sign in to, or create an account
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Signup/login | From any page select login link in navbar/ about page comments section login/signup anchor | User is directed to signup/login page and can set username/password | Works as expected |
- As a logged in user, I want to be able to log out of an account
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Account logout | From navbar select logout link and confirm | User is logged out of accoutn and nav bar reflects this | Works as expected |
- As a first time user, I want to be able to see separate menus for lunch, dinner and drinks
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Lunch Menu | From any page, select lunch menu from nav bar | Lunch menu is rendered with available meal options | Works as expected |
Dinner Menu | From any page, select dinner menu from nav bar | Dinner menu is rendered with available meal options | Works as expected |
Drinks Menu | From any page, select drinks menu from nav bar | Drinks menu is rendered with available drinks options | Works as expected |
Lunch Menu | From the home page, select lunch menu from button on body image | Lunch menu is rendered with available meal options | Works as expected |
Dinner Menu | From the home page, select dinner menu from button on body image | Dinner menu is rendered with available meal options | Works as expected |
Drinks Menu | From the home page, select drinks menu from button on body image | Drinks menu is rendered with available drinks options | Works as expected |
- As a first time user, I want to be able to view the business’ social media
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Social media links | From footer select desired social link | Link opens in new tab | Works as expected |
- As a site owner, I want to attract customers to our restaurant
User story too vague - rejected.
- As a site owner, I want to show appealing and professional images of our food
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Meal details page | From any menu page, click meal image | Meal information page is displayed with larger image | Works as expected |
Menu pages | From any page, select a menu from the top nav bar | Menu page is displayed with meal images | Works as expected |
- As a site owner, I want users to be to view our full menu
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Full menu page | From any page, select main menu from nav header | Full menu page is displayed with context | Works as expected |
Full menu page | From the footer, select the menu link | Correct menu page is displayed with context | Works as expected |
- As a site owner, I want users to be able to view the food descriptions and prices
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Menu pages | From any page, click a link to a menu option | Menu page is displayed with description and price | Works as expected |
Meal details page | From any menu page, click the meal item image | Meal detail page is displayed for requested item with full description, allergen info, calories and price displayed | Works as expected |
- As a site owner, I want users to be able to view allergies and calories
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Meal details page | From any menu page, click the meal item image | Meal detail page is displayed for requested item with allergen info and calories displayed | Works as expected |
- 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.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Contact page address and phone number | From any page, click nav link to contact page | Restaurant phone number and address are displayed | Works as expected |
Booking form | From booking page, complete all required form fields and submit | Booking form is submitted with visual feeback | Works as expected |
- As a site owner, I want users to be able to leave a comment or review
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Comments section | Navigate to about page, login(signup prerequisite), write comment and submit | Comment is submitted and feedback is given (waiting approval) | Works as expected |
- As a site owner, I want users to be able to view other comments and reviews
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Comments section | Navigate to about page, scroll down to comments section | Comments section is displayed with posted by, date and the comment | Works as expected |
- As a site owner, I want users to be able to edit and delete comments or reviews
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Edit comment | Login to site, post a comment, refresh site, select a valid comment you have written (approved), click edit, complete edit, submit | Comment is edited with visual feeback | Works as expected |
Delete comment | Login to site, post a comment, refresh site, select a valid comment you have written (approved), click delete, confirm delete | Comment is deleted and no longer displayed | Works as expected |
- As a site owner, I want users to be able to contact the business
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Contact page address and phone number | From any page, click nav link to contact page | Restaurant phone number and address are displayed | Works as expected |
Contact form | From contact page, complete all required form fields and submit | Contact form is submitted with visual feeback | Works as expected |
- As a site owner, I want users to be able to view the location and opening times
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Contact page address and phone number | From any page, click nav link to contact page | Restaurant address and opening hours are displayed | Works as expected |
- As a site owner, I want users to be able to find out about our business ethos
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
About page | From any other page, click nav bar link to about page | About page is displayed with herritage, reasons to dine and chef bios | Works as expected |
- 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
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
About page | From any other page, click nav bar link to about page | About page is displayed with professional imagery of staff | Works as expected |
- As a site owner, I want users to be able to navigate the site easily and quickly
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Main Nav bar | From any page click desired navbar link | Correct page is displayed and nav bar remains | Works as expected |
Footer nav bar | From any page click desired navbar link | orrect page is displayed and nav bar remains | Works as expected |
Menu page category nav bar | Click required category link | Page scrolls to correct internal link | Works as expected |
- As a site owner, I want to be able to promote special offers and events.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Carousel | Navigate to site home page | Carousel displays any special offers on rotation | Works as expected |
- As a site owner, I want users to be able to sign in to, or create an account
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Signup/login | From any page select login link in navbar/ about page comments section login/signup anchor | User is directed to signup/login page and can set username/password | Works as expected |
- As a site owner, I want users to be able to log out of their account
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Account logout | From navbar select logout link and confirm | User is logged out of accoutn and nav bar reflects this | Works as expected |
- As a site owner, I want users to be able to see separate menus for lunch, dinner and drinks
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Lunch Menu | From any page, select lunch menu from nav bar | Lunch menu is rendered with available meal options | Works as expected |
Dinner Menu | From any page, select dinner menu from nav bar | Dinner menu is rendered with available meal options | Works as expected |
Drinks Menu | From any page, select drinks menu from nav bar | Drinks menu is rendered with available drinks options | Works as expected |
- As a logged in administrator, I want to be able to review and approve or delete user comments.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Admin panel | From the admin panel, select option to approve comment | Approved comments are rendered in the about content area | Works as expected |
Admin panel | From the admin panel, select option to delete comment | Selected comments are deleted once confirmed | Works as expected |
- As a site owner, I want users to be able to view the business’ social media
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Social media links | From footer select desired social link | Link opens in new tab | Works as expected |
- As a logged in administrator, I want to be able to add new content to the website.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Admin panel | From the admin panel, select any option to add media | New media is rendered in selected area | Works as expected |
Bug | Fix |
---|---|
Site images not rendering on Heroku | Change source path from relative to static directory |
Transluscent overlay remaining after resevervation request has been received | Applied style to form instead of parent div |
Comment edit does not show awaiting approval | Fix would be to require additional view, bout out of scope for projectt timebox |
This application has been deployed from Github using Heroku. Here's how:
- Create an account at heroku.com
- Create an app, give it a name for example ci-ms4-elginis_restaurant, and select a region
- Under resources search for postgres, and add a Postgres database to the app
Heroku Postgres
-
Note the DATABASE_URL, this can be set as an environment variable in Heroku and your local deployment(env.py)
-
Install the plugins dj-database-url and psycopg2-binary.
-
Run pip3 freeze > requirements.txt so both are added to the requirements.txt file
-
Create a Procfile with the text: web: gunicorn elginis_restuarant.wsgi:application for example
-
In the settings.py ensure the connection is to the Heroku postgres database
-
Ensure debug is set to false in the settings.py file
-
Add localhost/127.0.0.1, and elginisrestaurant.herokuapp.com to the ALLOWED_HOSTS variable in settings.py
-
Run "python3 manage.py showmigrations" to check the status of the migrations
-
Run "python3 manage.py migrate" to migrate the database
-
Run "python3 manage.py createsuperuser" to create a super/admin user
-
Run "python3 manage.py loaddata categories.json" on the categories file in products/fixtures to create the categories
-
Run "python3 manage.py loaddata products.json" on the products file in products/fixtures to create the products
-
Install gunicorn and add it to the requirements.txt file using the command pip3 freeze > requirements.txt
-
From the CLI login to Heroku using the command heroku git:remote -a ci-ms4-elginisrestaurant
-
Disable collectstatic in Heroku before any code is pushed using the command heroku config:set DISABLE_COLLECTSTATIC=1 -a ci-ms4-elginisrestaurant
-
Push the code to Heroku using the command git push heroku master
-
Ensure the following environment variables are set in Heroku
-
Heroku Env variables
-
Connect the app to GitHub, and enable automatic deploys from main Heroku Postgres
-
Click deploy to deploy your application to Heroku for the first time
-
Click on the link provided to access the application
-
If you encounter any issues accessing the build logs is a good way to troubleshoot the issue
By forking this GitHub repository you are making a copy of the original to view or make changes without affecting the original. You can do this by following these steps...
- Log into your GitHub account and find the repository.
- Click 'Fork' (last button on the top right of the repository page).
- You will then have a copy of the repository in your own GitHub account.
- Log into your GitHub account and find the repository.
- Click on the 'Code' button (next to 'Add file').
- To clone the repository using HTTPS, under clone with HTTPS, copy the link.
- Then open Git Bash.
- Change the current working directory to where you want the cloned directory to be made.
- In your IDE's terminal type 'git clone' followed by the URL you copied.
- Press Enter.
- Your local clone will now be made.
All credit also included in the page files.
Media from the following artists was used throughout the site.
- Adobe Stock Images
- Creative Market
- Unsplash
- Pexels
- Shutterstock
- Postgress-Deployment
- Site-Concept-base-models
- Code for comments adapted from Code Institute Django blog
- To my wife Rebecca Richards for her testing, support, feedback, permissions for content and images on this project.
- To my mentor Mo Shami for his invaluable guidance and direction.
- To the Code Institute slack community of students.
- To the Code Institute Tutors