Milestone 3 – Url of Sandwich
Sandwich Recipe Database
This webpage has been created to showcase the skills I have learned in the Datacentric Development section of the Code Institute Full Stack Web Developer course; this is the third of four projects that I will be creating for the course.
For this project I have chosen to create a sandwich recipe website using the MongoDB database, Python, Flask and Jinja.
The reason for this selection is to create a website that users can interact with by joining the website, being able to view other people's creations and adding their own sandwiches to the database.
Table of contents:
UX
The Objective
The objective of this website is to provide users that love sandwiches with an application that allows them to sign up, login, create and edit their own sandwiches as well as browse the creations of other users for inspiration.
On this site a user is able to:
- view sandwich recipes created by other users
- read the ingredients needed for each sandwich
- read the instructions on how to create each sandwich
- see which user created each sandwich
- see an image of each sandwich (if added by the creator)
- sign up to an account
- login as an existing user
- log out of their account
- view their profile page showing the sandwiches they have created (if any)
- edit sandwich recipes they have created
- delete sandwich recipes they have created
Wireframes
you can find a full size PDF of the Wireframes here
Design Differences
There are some minor differences from the original conception and the final website.
- Originally I planned to have the Login and Sign up in the same place and have only one link in the Nav. I decided it would be cleaner to have a Login section and a sign up section.
- I made the callout image a rolling carousel to make the home page more interesting and inviting.
- I changed the search option from a "main ingredient" search to an "any ingredient" search for ease of use for the user.
- I moved the sandwich description in the "view sandwich" page, from the side of the image to underneath, purely for aesthetical reasons.
- I removed the "create a new sandwich" button from the profile page, as I felt it was an unnecessary addition.
- I changed the database category from "main ingredient" to "category" for ease of use for the user (if a sandwich has only two ingredients, which is the main one?).
styling
Framework
Bootstrap and jQuery have both been used to form the structural layout of this website.
Fonts
The Google font Mali had been used exclusively on the website
Colors
-
There are four non-image colors used on the website:
- #2b2d42 has been used for the main text and buttons
- #9fd9de has been used for the Nav, Footer and containers
- #ffffff has been used for the some text and boxes
- #e6e6e6 has been used for the main background color
- #993300 has been used for the blue hover response color
User Stories
-
First Time Visitor Goals
-
As a First Time Visitor, I want to be able to navigate the website simply and easily.
-
As a First Time Visitor, I want to access the site across all devices.
-
As a First Time Visitor, I want to see other users creations.
-
As a First Time Visitor, I want a way to search other users creations.
-
As a First Time Visitor, I want to be able to sign up as a user.
-
As a First Time Visitor, I want to add my own creations.
-
As a First Time Visitor, I want a page where I can see my own creations.
-
-
Returning Visitor Goals
-
As a Returning Visitor, I want to be able to inspect and edit my own creations.
-
As a Returning Visitor, I want other to view my creations but not edit them.
-
As a Returning Visitor, I want to easily navigate to the log in page to view my profile
-
As a Returning Visitor, I want to view all of the sandwiches I have added to the site
-
As a Returning Visitor, I want to be able to delete any of my own creations I no longer want.
-
As a Returning Visitor, I want to be able to log out of the site.
-
Features
-
The Project is a multi-page website which uses a MongoDB database and Jinja/Python template management.
-
The Index page consists of a Nav section and footer section that feature on every page. It also includes an image carousel and a latest sandwiches section.
-
The sandwiches section displays the full database of sandwiches that users have created. Each sandwich has its own card with an image of the sandwich, it's name and prep time. Each card also has view sandwich button to allow the user to see each recipe. There is also a search bar allowing the user to search the sandwiches by ingredient.
-
The Login and Sign Up sections take the customer to the related page, allowing the customer to either login or sign up. The pages have links to each other in case the customer has click the wrong one.
-
The add sandwich page has a form which allows the customer to add a sandwich to the database.
-
The profile section shows the user their own creations which they can edit or delete if they wish.
-
The log out button logs the user out and returns them to the landing page.
-
The Earl of Sandwich (Admin) has an additional page where they can add, edit or remove categories.
-
Existing Features
-
The site has been designed to be responsive across all devices
-
The navbar remains on every page, allowing easy navigation at all times, It give the user the ability to move to the home page, add sandwich page, their profile page and to log out.
-
The navbar is styled differently for different screen sizes, changing from a three line “hamburger” dropdown nav on mobile to a traditional full screen navbar on larger screens
-
The user has the ability to sign up and/or login using the relative areas
-
The user can view all creations in the database
-
The user can search through all of the created sandwiches by any ingredient using the search bar.
-
The user has the ability to create, edit or remove any creation of their own making.
-
The footer displays the social media links.
-
The admin has the ability to add, edit or remove categories.
Features Left to Implement
-
A 'like' or grading feature that allows user to rate other users sandwiches
-
The option to have more than one admin.
-
The ability for the user to change password
-
A 'Favourite section showing the users person favourites.
-
Some defensive programing to ask a user if they are sure that they want to delete a sandwich or not once the delete button has been pressed
- This would also be needed for the admin page on the delete category button
Technologies Used
All of the following technologies were used to create this website:-
Languages
-
HTML5
-
CSS3
-
JavaScript
have been used throughout the project to create the text, style and functionality of the website.
-
Python has been used to run the application
Frameworks and Libraries
-
Jquery were used to implement the carousel function on the image carousel section and to simplify DOM manipulation
-
MongoDB has been used to to store the database
-
Flask has been used to to dynamically generate pages, links, and content within the app
-
PyMongo has been used to connect to and transfer data to MongoDB
-
Jinja has been used to template the website
-
Bootstrap was used for layout aesthetics, including grid styling and device responsiveness
-
GitHub was used to host the website
-
Gitpod was used to code the website
Software and Resources
-
FontAwesome was used to add icons to the exercise class headers
-
Gimp was used to size the images
-
Balsamiq was used to create the wireframes of the project
-
FireShot was used to create the screenshots for the README
-
Techsini was used to style the multi screen mockup
-
Coolors was used to create the color palette screenshot
-
User-Agent Switcher was used for testing functionality on different browsers
Testing
Testing User Stories from the UX Section
First Time Visitor Goals
-
As a First Time Visitor, I want to be able to navigate the website simply and easily.
- On opening the website the visitor is met with the callout section which has a button connecting to the sign up page and a sticky nav directing the user to relevant pages
-
As a First Time Visitor, I want to access the site across all devices.
- The website is responsive across all devices
-
As a First Time Visitor, I want to see other users creations.
- The nav has a sandwiches button that links to a page that show all of the sandwiches in the database.
-
As a First Time Visitor, I want a way to search other users creations.
- The sandwiches page has a prominent search bar that allows the user to search through the the sandwiches by ingredient.
-
As a First Time Visitor, I want to be able to sign up as a user.
- There is a sign up link in the nav and also a button under the callout guiding the user to the sign up page.
- The user only need to provide a user name email and password to sign up.
-
As a First Time Visitor, I want to add my own creations.
- Any member can add a sandwich to the database via the 'add sandwich' page.
- The user can add any type of sandwich they wish and can add an image if they wish. If they choose not to add an image, one is added for them automatically.
-
As a First Time Visitor, I want a page where I can see my own creations.
- A signed in user can view all of their own sandwich creations on their profile page.
Returning Visitor Goals
-
As a Returning Visitor, I want to be able to inspect and edit my own creations.
- On the profile page, the user can edit or remove any of their own creation if they so choose.
- The user can also edit or remove their sandwiches from the view sandwich page.
-
As a Returning Visitor, I want other users to view my creations but not edit them.
- Users can view any sandwich in the database via the sandwiches page and see them in more detail on the view sandwich page.
- No user can edit or delete another users sandwiches
-
As a Returning Visitor, I want to easily navigate to the log in page to view my profile
- The sticky nav has a link to the login page
- Once logged in a user is directed to their profile page
-
As a Returning Visitor, I want to view all of the sandwiches I have added to the site
- The users profile page displays a collection of all of their own sandwiches
-
As a Returning Visitor, I want to be able to delete any of my own creations I no longer want.
- The user can edit or delete any of their own creations at any point as long as they are signed in
- Users can only edit or delete sandwiches that they have created.
-
As a Returning Visitor, I want to be able to log out of the site.
- There is a log out button on the sticky nav that can be used on any page of the site.
Code Validation
W3 Validators
-
The HTML was Validated at W3C Markup Validation Service.
-
The CSS was Validated at W3C CSS Validation Service.
-
The Python was Validated at pep8online
Manual Testing
Google Developer Tools
- The websites design responsiveness has been tested on all device sizes using Google Developer Tools.
Testing On Mobile Devices
- Apple iOS
- Google Android 7
- Microsoft Windows Phone
- Samsung Tizen OS
- Nokia Symbian
- Mozilla Firefox OS
Testing On Browsers
- Google Chrome
- Opera
- Firefox
- Apple Safari
- Microsoft Explorer
- Microsoft Edge
Testing On Operating Systems
- Microsoft Windows
- Linux
- Apple Mac OS
- Google Chrome OS
- IBM Warp
Defensive Design Testing
Index page
- Test all links and buttons on Index page:
- All Navbar buttons link to the page expected
- All footer links to social media function as expected
- Buttons on the "latest sandwiches cards direct to expected sandwich pages
- "Get Started" button appears and directs user to Sign Up page if not already signed in
Sign Up page
- Test Sign Up form:
- User cannot create an account without entering a username with less than 5 characters
- Email Address must have an @ symbol
- Password must be letters and/or numbers and must be between 5-15 characters long
- If any of these points fail a message appears informing the user what is needed
- The link switching the user from login to sign up at the bottom of the form functions correctly
Login page
- Test Login functionality:
- User must enter a correct username already on the system
- User must enter the correlating password already on the system
- If either of these points are not achieved a "incorrect/username or password" message flashes
- The link switching the user from login to sign up at the bottom of the form functions correctly
Profile page
- Test buttons and links:
- Once signed in the customer recieves a welcome message with their username so they are aware that they have been signed in
- The Added Sandwich button takes the user to the Add Sandwich form
- The Edit Sandwich button takes the user to the Edit Sandwich form
- The Delete Sandwich button removes the sandwich
Add Sandwich page
- Test Add Sandwich form works:
- The sandwich name must be between 3-50 characters
- The sandwich must have a description
- A category and prep time must be selected
- The form needs at least one ingredient and one instruction
- If no Image url is added or is added incorrectly, a default image is used
- Once a sandwich is created the user is directed to the sandwiches page
Edit Sandich page
- Test Edit Sandwich Form:
- All original content is placed on the form
- Changes can be made to any input as long as the edit complies with the same rule-sets as before
- Save changes button saves the new information and directs the customer to the sandwiches page
- Cancel edit makes no changes and directs the user to the sandwiches page
Logout Buttons
- Test Logout Button:
- Pressing the logout button logs out the user and returns them to the login page
Admin Testing
Admin Profile page
-
Test Admin Profile Page:
- When signed in as admin, the profile page show an Edit Categories button
- The Edit Categories button takes the admin to the Edit Categories page
-
Test Edit Categories Page:
- The Add Category button takes to the Add Category page, where the admin can add a new category using the single input form
- The Edit Category button takes to the Edit Category page, where the admin can edit the name of the category using the single input form
- The Edit Category form has a CAncel button that stops the edit and returns the admin to the categories page
- The Remove CAtegory button removes the category from the database
Issues Found
-
An issue was found with the carousel and callout text being on the same line on different device sizes, the resizing would make the text too large and the carousel too small.
- The issue was resolved with some changes to the css in the media queries and by using the bootstrap grid system.
-
Originally the minimum number of letters for the sandwich names was set at 5. It became apparent early on that this was an error as one of the worlds most famous sandwiches is a 3 letter Acronym "BLT"
- The minimum letter count on the sandwich name input was changed to 3.
Deployment
Remote Deployment
- Navigate to the GitHub Repository:
- Open repository using GitPod IDE.
- In terminal run "pip3 freeze --local > requirements.txt" command to create a .txt file with all of the dependencies used that Heroku needs to know what dependencies app uses.
- In the terminal run the "echo web: python app.py > Procfile" command to create Procfile that Heroku needs to know what file runs the app.
- Go to Heroku and log in.
- Once logged in, and in your dashboard, click on "Create New App".
- Under "Create New App" click on the input field called "App Name".
- Give your app a unique name and select the closest region to your location.
- Click "Create App"
- In the "Deployment Method" section, connect the app by clicking on the "Github" icon.
- Type the Github repo-name in the "Connect to Github" section input.
- Click "search" to find the repo and once it is found click "connect".
- Before clicking the "Enable Automatic Deployment" button, click on the settings tab in the top part of the page.
- Click on "Reveal Config Var".
- Here you can inform Heroku of which variables will be required.
- The required variables are: (IP, PORT, MONGO_URI, MONGODB_NAME, SECRET_KEY).
- Go back to GitPod and make sure that you have pushed your requirements.txt and Procfile to the repo.
- Return to Heroku and click on "Enable Automatic Deployment".
- Select your branch. Branch selected (master).
- Click "Deploy Branch"
- Once deployment is finished click "View" to launch the new app.
Local Deployment
- Navigate to the GitHub Repository:
- Click the Code drop down menu.
- Download the ZIP file and unpack locally
- Open a code editor of your choice and open the unzipped file using the code editor.
- Click Save and save to your local device
- In order to have a functional app, you will have to create your own MongoDB collection and inserted your "MONGO_URI" and not the one used in the project.
Credits
Content
- My code was influenced by The Data Centric Development Mini Project lesson from the Code Institute Full Stack Developer Course.
Media
- All images used for the carousel, logo and default sandwich card were obtained from Pixabay
- With special mention to:
Acknowledgements
-
I received advice for improving my search bar code from my Code Institute mentor Oluwafemi Medale
-
Additional help to create a default image on sandwich cards is credited to StackOverflow
-
I received styling inspiration from:
-
Additional Thanks to my mentor Oluwafemi Medale for styling and formatting advice.