Table of contents generated with markdown-toc
The live website can be found here at http://pigginnel.herokuapp.com
If you do not wish to make an account, two mock accounts have been created just for this application:
Admin account: username - ms3.admin@gmail.com password - distinction
Test User: username - ms3.user@gmail.com password - distinction
When people go to restaurants, there are three features people want when researching where to eat;
- The Menu. What food, or, what style of food, is on offer.
- What did other people make of the restaurant, how did they review it?
- The ability to book a reservation.
This usually relies on three different websites; The restaurant's own, TripAdvisor/Yelp, OpenTable/DesignMyNight. The fact that there are several options for both the reviews and bookings can be annoying. The idea behind my project is to bring all three of those features into one website. This website has the standard information about this fictional restaurant (who the chef is, what style the food is, where to find it...), as well as the ability for users to leave reviews, and to see other users' reviews, and to make reservations. In addition to that, the ability for users to edit and delete their own reviews and reservations.
In the wireframes, it is clear that originally the plan was to separate all the individuals sections over separate pages. However, after contemplating using this template, I decided to streamline the content onto as few pages as possible. The template was not implemented due to wanting to showcase my ability to implement my own designs. However, I certainly took inspiration from that template.
One way I wanted to differ from that template, was I wanted to have a much more minimalist website. I also wanted to use more white colours than black. On top of all that, I wanted to showcase my ability to learn to use a new framework beyond Bootstrap. After considering Materialize, and realising it was not what I personally was after, I opted to use UiKit. UiKit is focused around minimalism, and a clean appearance, colours are basic too - these I felt are appropriate for a website orientated around a restaurant. The logic behind that statement being that the restaurant is focused around its food, not on its design. Whilst having good UI and UX is still important, I did not want the create the impression that more effort would have been put into the marketing and website of this fictional restaurant, than on the produce of the restaurant itself.
The fonts were taken from Google Fonts, and the ones that have been used as:
-
Permanent Marker, for the site logo.
-
Indie Flower, for the navbar and footer.
-
Raleway, for all other text on the site.
Adobe XD was used to create the initial wireframes, the pdf file with all the wireframes can be viewed in Wireframes.
-
As a user, I want to see the sample menus for the restaurant, so I know the style of food on offer.
-
As a user, I want to have anchors to different parts of the page, so that I do not have to keep scrolling.
-
As a user, I want to see information on the chef, so I know if it is a chef I am interested in.
-
As a user, I want to see reviews of the restaurant, so that others' experiences may influence my decision.
-
As a user, I want to see contact information for the restaurant, so that I may call with a special request.
-
As a user, I wish to see an address and a map, so I can ensure I am heading to the right place.
-
As a user, I want to be able to create an account, so that I may manage my bookings and reviews.
-
As a user, I want to be able to make a reservation, so that I may visit the restaurant for a meal.
-
As a user, I want to be able to leave a review, so that I may let other people know my opinion of my meal.
-
As a user, I want to be able to edit my reservation, in case circumstances change.
-
As a user, I want to be able to cancel my reservation, in case I am no longer able to, or wanting, to attend.
-
As a user, I want to be able to edit my review, in case I have changed my opinion of the restaurant.
-
As a user, I want to be able to cancel my review, in case I have changed my opinion of the restaurant.
-
As a site owner, I wish to see all the reservations that have been made, so that I know which bookings to prepare for.
-
As a site owner, I wish to see all the reviews that have been made, so that I know what people think of my restaurant.
-
As a site owner, I want the reservations that would have occurred deleted, so that I do not have clutter from expired reservations.
My MongoDB Cluster is titled pigGinnel, and is composed of the database ginnelPig. Within that, there are two collections.
Reservations is the first of these. The user info is all taken from g.user, from Okta. All information provided during account creation. The Email is used to identify the users' reservations, so only their own are displayed, and also, when trying to edit a reservation a user must be logged in. If that is the case, the signed in users' email must match the email of the reservation being editted, otherwise the user is taken to an empty page with a button to return the user to the homepage. There are two dates, though the user only submits one. When the user selects a date for the reservation, it is submitted as dd/mmm/yyyy. This is assigned to shown_date, and is then also displayed in this format when the user views their reservations. Slices are taken from this, and moved around to submit a second date in the format YYYYmmdd. The reason for this is to make it easier to sort by reservation date, rather than creation date. Further to this, whenever the index page is called, by any user, any reservation that would already have occurred (ie, < today's date), is deleted from the collection to avoid cluttering and manual deletion. When a user attempts to submit a reservation, the application first checks how many covers (expected guests) already exist for that specific date and specific time slot. With that integer, the application adds the integer entered by the user. If the existing covers, and the new covers < 30 (the max capacity for this fictional restaurant), then the reservation is added to the collection. If it would exceed 30, it is not added, and the user is displayed with a message saying that slot only has "x" amount of spaces left.
Reviews is the second of these. As before, user info is all taken from g.user, and the email is used to match the displayed reviews to the right user, as well as used to ensure only the creator of the review is able to edit the review. There is no extra work required by the application in terms of submitting the reviews.
Through Okta, I have used OpenID Connect for User management for this app. The reason for this is that overtime, and as requirements change, libraries like flask-login can be difficult to maintain. Through the use of Okta, I myself am not in charge of collecting and storing the users' information, but it is all secured by Okta, and in turn, the security of this system is better than that of a management system created by myself.
If I had implemented my own database for user management, users would be expected to remember another set of passwords, whereas with Okta, users can use the same login details on any other application that uses Okta. Whilst Okta is not a universely used system, it still has the potential to reduce how many usernames and passwords a user has to keep track of.
One feature that has not been included into my application, is the ability for the admin to send emails to the user. This is because if this application were to be public, and for a real business, then it would be expected that the site owner would also be paying to use Okta professionally (which I currently am not). With the premium features, the site owner can send emails to either select users, or to all users, and can create templates for different purposes, such as when a reservation is made.
Other benefits to using Okta is that, from the Okta Application Dashboard, the Site Owner, can see data, including total users, failed login attempts, authentications, etc. They can also see which specific users have logged in, as shown in the logins tab. The site owner also has the ability to edit information about the users themselves, and can assign them to different groups or provide different priviledges.
One of the known bugs with Okta is that if the user clicks the login/make reservation button, it takes the user to the Okta Sign in widget, from this point, if the user were to to intend to return to the previous screen without logging in, they must quickly press the return button several times, otherwise they can become stuck on the page. If they don't do this, they must enter a url themselves.
The way to fix this would be, if this site were published professionally, the site owner would have a custom url with the rights to that url. If a site owner has the rights to a url, through the Okta dashboard, they can customise sign in, however at this stage, that cannot be rectified.
-
- Semantic markup language as the shell of the site.
-
- Cascading Style Sheets as the design of the site.
-
- JavaScript used to enable interactivity of the webpages.
-
- Used for the datepicker function.
-
- Used for all the social media icons, and the three bars for the navbar on mobile resolutions.
-
- Lightweight modular framework used for the clean design of the website.
-
- Fonts used; "Permanent Marker", "Indie Flower", "Raleway"
-
- All code for this project was written in VS Code.
-
- Git was used for version-control and for pushing through to my Github Repo.
-
- Heroku was used for deployment of my live website.
-
- NoSQL database management used for management of reservations and reviews.
-
- Used to edit the images.
Further information on all the steps taken for testing this website can be found in the testing.md file.
This project is currently deployed to Heroku and is available to view here
To run the project locally:
-
Click the green Clone or Download button on the Github Repository
-
Using the Clone with HTTPS option, copy the link displayed.
-
Open your IDE, and ensure the Git Terminal is open.
-
Change the working directory to the location where the cloned directory is to go.
-
Use the "git clone" command and paste the url copied in the second step.
-
You will need to create an env.py, which should be added to your .gitignore, with the following:
import os
os.environ.setdefault("IP", "127.0.0.1")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", "{string}"")
os.environ.setdefault("MONGO_URI", "{string}"")
os.environ.setdefault("MONGO_DBNAME", "{string}"")
os.environ.setdefault("AUTH_TOKEN",
"{string}"")
os.environ.setdefault("ADMIN", "the email address of your admin")
In order to connect to MongoDB:
-
Create a free account on MongoDB
-
Create a database titled "ginnelPig"
-
Within that, you need to create the collection "reservations"
_id: <ObjectId>
firstName: <string>
lastName: <string>
email: <string>
date: <integer>
shown_date: <string>
slot: <string>
covers: <string>
requirements: <string>
- You also need to create the collection "reviews"
_id: <ObjectId>
firstName: <string>
lastName: <string>
email: <string>
date: <string>
stars: <string>
review: <string>
To use Okta for user management, you will need to follow the instructions outlined in this guide by Randall Degges. However, any time it mentions "localhost:5000", replace with "127.0.0.1:5000", and also, add a second link each time, with your deployed heroku app link created in the next steps. Importantly, you will need to create the OpenID Connect Config File, titled client_secrets.json.
In order to deploy to Heroku:
-
In your terminal, type
pip freeze > requirements.txt -
In your Procfile, add
web: gunicorn app:app -
On Heroku, create an account, and then create a new app.
-
In the settings, you will need to set the follow Config Vars
- Some of these details will be found on your Okta Dev Console.
-
If you have pushed to github, remove env.py from your gitignore to allow heroku to use the variables.
-
Finally, after creating some commits, you can type the following in your terminal:
heroku loginheroku git:remote -a {your-project-name}git push heroku master:master
In run.py, you will need to find and edit the following to your own details:
okta_client = UsersClient("{your Okta base_url}",
os.environ.get("AUTH_TOKEN"))
logout_request = ("{your Okta base_url}/oauth2/default/v1/"
f"logout?id_token_hint={id_token}&post_logout_redirect_"
"uri={your heroku link}")
-
Okta, for the tutorial on integrating Okta into my flask application.
-
Roots, all the text for the menu, and even the menu itself (with the exception of a few of the drinks choices).
-
James Martin Chef, provided the content used for the "About" section, with the wording on Pig in a Ginnel being created by myself.
-
British GQ, for the image of James Martin used in the "About" section.
-
Fenchurch Restaurant, Sky Garden London, for the image used as the hero image.
-
Black Star PNG, then editted in photoshop to multiply the stars.
-
Frog by Adam Handling, the real world inspiration for the location of this fictional restaurant.