Welcome to WEEKENDFOODFOOT Restaurant

A restaurant website

A responsive,restaurant website with registration and table booking system with different formats for customers.create as a final Project Portfolio during the Full stack Software Developer-Skills Bootcamp at Code Institute. Link to the live site here

-By Aubin KOENIGSSOHN-

Table of contents

1. UX
2. Agile Development
3. Features implemented
4. Feature left to implement
5. Technology used
6. Testing
7. Bugs
8. Deployment
9. Resources
10. Credits and acknowledgements

UX

Database planning

Data Structure

• I used a lucidchart to have a clear orientation about the structure of the database.
• The diagram is a guide to show the types and relationships between data stored.

Data models

UserProfile model

• During the evolution of the project the data models looks as follows:

Key	Name	Field
PrimaryKey	client	OnetoOneField
x	user_name	Charfield
x	first_name	Charfield
x	last_name	Charfield
x	email	Emailfield

---

Reservation's model

Key	Name	Field
ForeignKey	client_reservation	ForeignKey
x	reservation_day	DateField
x	reservatin_time	CharField
x	tables_option	CharField
x	table_reservation	TextField
x	date_reservation	DateTimeField
x	confirmation	IntegerField
x	slug	AutoSlugField

---

UX design

Overview

Design

Initial design planning

Before starting to code, I chose to take some time to imagine the design of the home page of a restaurant and a Logo. I wanted my website to look professional and modern. playing with somes colours like yellow, black, white and orange seems perfect for my project.

Homepage

Sign up_page

UserLogin_page

Menu_page

Reserves_table_page

Admin_page

Site User

• Priority for someone in the restaurant area
• A football's fan looking for a place to enjoy footballs game and food
• someone who prefers to arrange their reservations online rather than over person or phone

Goals for the website

• To allow customer to see the menu before visiting the restaurant
• To allow customer to plan and book a table in advance
• To safely store the reservations data and make it available for the superuser to approve and edit it in an easy way

Wireframes

I used the wireframe Balsamiq to have a clear view about the futur website as next stage of UX design planning.I wanted to have a realistic overview of my future website and make it easy for the user to navigate throughout the different pages.I plan to build the website like this:

Login page

Sign_Up page

Home page

Reserve_table page

Menu_foods page

Account page

Agile Development

Overview

I initiated this project in conjunction with GitHub Projects with the goal of organizing and monitoring the workflow to effectively handle the anticipated workload. Once I outlined the epics for my project, I further divided them into a series of user stories and smaller tasks to facilitate tracking my advancement and completing the website on schedule. In addition to user stories, I created individual issues for developing each module of this README file, as I found this approach to be more inspiring. To view the project's Kanban page, please click here.

User Stories

Initial stage of the project included stepping into the shoes of the future User. I thought about the features and functionality I would expect from the first use of the website and based on that I created a set of 8 User Stories. I labelled it as important, as they provide the core functionality and source of essential informations for the User.base functionality.

The User Stories include the acceptance criteria and are broken down into smaller, bite- size tasks that I would tick on completion, so I could easily track my progress. During the coding session I would record the encountered bugs, issues and solutions related to the Story in the comments below. Once all of the tasks in the Issue are completed I would move the User Story form "In progress" to "Completed" card im my project's Kanban.In flow of the project I forgot to follow this plan.

List of Important User Stories

1. USER STORY: LOGIN
2. USER STORY: SUPERUSER PANEL
3. USER STORY: CREATE AN ACCOUNT
4. USER STORY: RESERVATION CANCELLATION
5. USER STORY: BOOK A TABLE
6. USER STORY: NAVBAR AND FOOTER
7. USER STORY: MENU
8. USER STORY: DEPLOYMENT

Back to table of contents

features-implemented

• USER STORY: LOGIN
• USER STORY: SUPERUSER PANEL
• USER STORY: CREATE AN ACCOUNT
• USER STORY: RESERVATION CANCELLATION
• USER STORY: BOOK A TABLE
• USER STORY: NAVBAR AND FOOTER
• USER STORY: MENU
• USER STORY: DEPLOYMENT

Navbar and Footer:

• Navbar and footer are present on every page
• Navbar's content changes depending on user authentication, allowing access to user reservations
• Footer includes restaurants location, social links,sitemap, reservations buttonm and a copyright notice to provide the necessary informations in a simpler way.

Index page:

• The homepage provides the links to reservation and restaurant page.
• It can be accessed without signing in.

Home page:

• Main page includes a short information about the restaurant set of cards with pictures and description.
• Each of the card includes the button, that triggers a fullscreen modal.
• The modals contain informations about the menu,
• Home page can be accessed with signing in.

Authentication and profile management:

• User can sign up
• User can log in to their account and update their password
• User can delete their account
• The authentication process is safe thanks to Django-AllAuth and csrf tokens.

Reservations:

• User can pass their data to create a reservation.
• User can edit their selected reservation.

Responsiveness:

• Website is responsive thanks to Bootstrap and media queries applied.
• There's a hamburger navbar on small devices.

Back to table of contents

Feature left to implement

The Main feature I did not implement in my project was to give customer the opportunity toedit their profile. For me personally it was not important. Many peaople don't like to share privat informaions.Without editing a profile you don't also need to delete it.

Back to table of contents

Technology used

The site has been built with the following tech and tools:

• Html - for page structure
• CSS - for custom styling
• Python - for the backend
• Javascript - for timeout in messages
• Django - framework used to build this project
• Jinja - templating language rendering logic within html documents
• Bootstrap 5 - front end framework used by me alongside Django, helps with fast and efficient styling
• Heroku PostgreSQL - used as the database
• Font Awesome - for social media icons
• Google Fonts- currently only for the hero image font
• GitHub - for storing the code and for the projects Kanban
• Heroku - for hosting and deployement of this project
• Cloudinary - hosting the static files
• Git - version control tool

Back to table of contents

Testing

Responsiveness

I was testing for responsiveness on an AsusVivoBook laptop, a iPad air and a Samsung Galaxy Note 10 using the most up to date versions of Google Chrome and Mozilla versions. For more detailed testing I was using Google DevTools.I failed by using the Web pages ui.dev and responsivedesignchecker for test of responsiveness. For this documentation i used BrowserStack.

Index page:

• AsusVivoBook and Samsung galaxy

• iPadAir

• Galaxy Note 10

sign_up page:

• iPad Air

• AsusVivoBook

• Galaxy Note 10

Manual testing

Account Registration Tests

Test	Result
User can create account	Pass
Messages are displaying	Pass
Messages are dismissable by button	Pass

---

User Navigation Tests

Test	Result
User can easily navigate to Reservation	Pass
User can access Home page	Pass
User access their account page	Pass
User can access the card content in Home	Pass
SuperUser can access admin page	Pass

---

Account Authorisation Tests

Test	Result
Only Superuser can access admin page	Pass
Non authorised user can not book a table	Pass
Non authorised user won't access account page	Pass

---

Reservations Tests

Test	Result
User can make a reservation	Pass
User can view all of their reservations	Pass
User can delete their reservation	Pass
User can edit reservation	Pass
User can make more than one reservation	Pass
User can delete their account	Pass
User can change their information	Pass
User can see the confirmation information	Pass

---

Admin Tests

Test	Result
Items display correctly on front-end when updated / added	Pass
Admin can confirm or decline bookings	Pass

Back to table of contents

---

Known bugs

• There's small image clipping during the transitions on smaller screens.
• The same message content by reservation and cancellation
• failed to send a message (eror with the SMTPAuthentication
• No error message displaying when passing wrong login details
• Server Error (500) in many functions use case (restaurant, sign up) after turning the debug in to false

Back to table of contents

---

Deployment

The deployment stage of the website should follow the steps below:

Create the Heroku app

• Sign up / Log in to Heroku
• In Heroku Dashboard page select 'New' and then 'Create New App'
• Name a project - I decided on the week-food-foot (the app's name must be unique)
• Select EU as that was my region in the moment of creating the app
• Select "Create App"
• In the "Deploy" tab choose GitHub as the deployment method
• Connect your GitHub account/ find and connect your GitHub repository

Set up enviroment variables

• In the Django app editor create env.py in the top level
• In env.py import os
• In env.py set up necessary enviroment variables:
  • add a secret key using: os.environ['SECRET_KEY'] = 'your secret key'
  • for the database variable the line should include os.environ['DATABASE_URL']= 'Paste the database link in here'
  • in settings.py replace value of SECRET_KEY variable with os.environ.get('SECRET_KEY')
  • in settings.py change the value of DATABASES variable to 'default': dj_database_url.parse(os.environ.get("DATABASE_URL"))
• In Django app's settings.py on top of the file add:

  from pathlib import Path
  import os
  import dj_database_url
  if os.path.isfile('env.py'):
  import env

• Navigate to the "Settings" tab in Heroku.
• Open the "Config Vars" section and add DATABASE_URL as Key and the database link from app's env.py as Value
• Add SECRET_KEY for the Key value and the secret key value from env.py as the Value
• In the terminal migrate the models over to the new database connection
• In settings.py add the STATIC files settings as follows:

  STATIC_URL = '/static/'
  STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
  STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")

• Change the templates directory in settings.py to: TEMPLARES_DIR = os.path.join(BASE_DIR, 'templates')
• In TEMPLATES variable change the 'DIRS' key to look like this: 'DIRS': [TEMPLARES_DIR],
• Add Heroku to the ALLOWED_HOSTS list (the format will be your-app-name.herokuapp.com, you can copy it from the Domains section in Settings tab in your Heroku app)
• If you haven't done that up to this point, then create in your Django app's code editor new top level folders: static and templates
• Create a new file on the top level directory - Procfile, remembering to use a capital letter
• Within the Procfile add following:

  web: guincorn PROJECT_NAME.wsgi

• In the terminal, add the changed files, commit and push to GitHub

Heroku deployment

• In Heroku, navigate to the Deployment tab and deploy the branch manually
• Heroku will display a build log- watch the build logs for any errors
• Once the build process is completed Heroku displays 'Your App Was Successfully Deployed' message and a link to the app to visit the live site

Forking the repository

By forking the GitHub Repository you can make a copy of the original repository to view or change without it effecting the original repository. You can do this with following steps:

• Log in to GitHub or create an account
• Enter this repository link
• Select "Fork" from the top of the repository
• A copy of the repository should now be created in your own repository

Create a clone of this repository

Creating a clone enables you to make a copy of the current version of this repository to run the project locally. To do this follow steps below:

• Navigate to https://github.com/Mvogtsinga/week-food-foot
• Click on the <>Code button at the top of the list of files
• Select the "HTTPS" option on the "Local" tab and copy the URL it provides to the clipboard
• Navigate to your code editor and in the terminal change the directory to your chosen location
• Type "git clone" and paste the GitHub repository's link
• Press enter and git will clone the repository for you

Back to table of contents

resources

• Code Institute Full Stack Development course materials
• Django documentation
• Crispy forms docs
• Bootstrap docs
• Stack overflow
• Slack

Back to table of contents

Credits and acknowledgements

Credits

Images

• Unsplah
• Freepik
• Postermywall
• Chef_team by Sebastian Coman Photography on Unsplash
• Food_WFF by Mgg Vitchakorn on Unsplash
• Restaurant_WFF by yMaria Orlova on Unsplash
• Servant by Stefan Schauberger on Unsplash
• Order_WFF by Jay Wennington on Unsplash
• VIP by images on Freepik
• Extra Famille by image on Freepik
• Couple by image on Freepik
• Chefs_Team by image on Freepik
• Menu_WFF by image on Postermywall
• Chefs_Team by image on Freepik

Videos

• How to Use Balsamiq Wireframes
• Django Authentication & User Management - Full Tutorial
• Python Django Real Project Tutorial
• Django Python Web Framework Crash Course 2022 For Beginners
• Heroku Create Account & Connect GitHub
• PostgreSQL Installation and Create Your First Database
• CRUD mastery with Django
• 5 Mini Python Projects - For Beginners
• How To Use Miro For Beginners
• How To Write a USEFUL README On Github
• How to pull project from github to visual studio code
• Using Git & GitHub in VSCode: Stage, Commit, and Push

Template

• Code Institute

Acknowledgements

• I would like to thank the Code Institute Slack community for the moral support; it kept me going during periods of self doubt and imposter syndrome.
• I would like to thank my family, for believing in me, and allowing me to make this transition into software development.
• I would like to thank the Bootcamp crew, for supporting me in my career development change towards becoming a software developer.

Back to table of contents