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.

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.
1. 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.
2. 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.
3. 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.
4. The add sandwich page has a form which allows the customer to add a sandwich to the database.
5. The profile section shows the user their own creations which they can edit or delete if they wish.
6. The log out button logs the user out and returns them to the landing page.
7. 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:
- BBCGoodFood
Additional Thanks to my mentor Oluwafemi Medale for styling and formatting advice.

code-institute-submissions / url-of-sandwich Goto Github PK

url-of-sandwich's Introduction