Isadora's Kitchen

Link to the live project here: https://milestone-project-3-bd.herokuapp.com/

This is a website for Isadora's Kitchen, designed as a responsive site for people to create, read, update and delete their own cooking recipes, as well as view those created by other users. I conceived this site as my fiancee loves to cook and wanted somewhere to share her recipes, and have other users share theirs too.

Table of Contents

1. User Experience

• User Stories
• Design
• Wireframes

2. Features

3. Technologies Used

• Languages Used
• Frameworks, Libraries and Programs Used

4. Testing

• HTML and CSS Validation
• Testing User Stories from UX Section
• Further Testing
• Known Bugs
• Fixed Bugs

5. Deployment

• GitHub Pages
• Forking the GitHub Repository
• Making a Local Clone

6. Credits

• Code
• Content
• Media
• Acknowledgements

User Experience

• User stories

  • First Time Visitor Goals

    a. As a first time visitor, I want to understand the site's purpose so I can determine if it is relevant to what I need.

    b. As a first time visitor, I want to create an account so I can share recipes to the site.

    c. As a first time visitor, I want to explore other recipes.

  • Returning Visitor Goals

    a. As a returning visitor, I want to be able to log in quickly and easily.

    b. As a returning visitor, I want to edit my existing recipes.

    c. As a returning visitor, I want to delete a recipe I have previously added to the site.

  • Frequent Visitor Goals

    a. As a frequent visitor, I want to view all the recipes I have uploaded.

• Design

  • Colour Scheme
    • The colour scheme is yellow for the header and footer with white text, with dark blue text for titles and form labels. Buttons are green for confirming adding or editing a recipe, red for cancelling or deleting and yellow for the edit button on a recipe's View page. The bright colours are meant to evoke the brightly coloured spices used in Indian cooking, mainly turmeric which is yellow.
  • Typography
    • The font throughout is the standard Materialize font, Segoe UI, which is presentable and clear.
  • Imagery
    • The background image is of various spices, tying in with the food theme. In the same vein, the default image if an image is not uploaded for a new recipe entry is of a food icon.

• Wireframes can be viewed here

Features

• Responsive on mobile, tablet and desktop sizes
• Interactive elements
• CRUD functionality
• Tailored view of user's own recipes
• Registration/Login functionality

If I had more time, I would have liked to have added the following:

• A favourites function so users could favourite their recipes for easy access
• The ability to delete an account and optionally its associated recipes
• The ability for a user to change their password when logged in
• More defensive programming overall, to prevent accidental deleting of recipes etc.
• Pagination, to better organise recipe entries on the home page.

Back to top

Technologies Used

Languages Used

• HTML5
• CSS3
• JavaScript
• Python 3

Frameworks, Libraries and Programs used

1. Materialize - used as the visual framework for this project.
2. Balsamiq Wireframes - used in the design process to draw the site's wireframes.
3. Flask - used to build the web pages for this project as templates.
4. Font Awesome - used to add icons on each page of the site to improve UX.
5. Git - used for version control via Gitpod. The terminal was used to commit and push code to GitHub.
6. GitHub - used to store the project's pushed code from Git.
7. Werkzeug - used for password hashing, installed as a Flask dependency.
8. Jinja - a HTTP templating language for Python.
9. jQuery - used to enable Materialize dynamic effects such as the navbar.
10. Heroku - hosts the deployed project.
11. PyMongo - Python distribution containing tools for working with MongoDB.
12. MongoDB Atlas - used to host the project's NoSQL databases.

Back to top

Testing

Code Validation

The W3C Markup and CSS Validators, JSHint JavaScript Validator and PEP8 Validator were used to validate the code to ensure the project was free from errors.

• W3C Markup Validator Results - No errors. One warning regarding no headings within sections appearing on all pages. This is likely an issue with Jinja templating.
• W3C CSS Validator Results - No issues.
• JSHint Validator Results - No issues.
• PEP8 Compliance - No issues.

Testing User Stories from UX Section

• First Time Visitor Goals

  a. As a first time visitor, I want to understand the site's purpose so I can determine if it is relevant to what I need.

  • i. The site's home page invites users to search for a recipe or browse the page. The user can click on a recipe's View Recipe link to view more of its details.

  • ii. The navbar clearly shows the site's name, identifying it as being based around making food.

  

  b. As a first time visitor, I want to create an account so I can share recipes to the site.

  • i. When not logged in, the navbar has a registration button that the user can click to create an account.

  • ii. Registration is quick and easy, only requiring a username and password within the provided limitations to sign up.

  

  • iii. Users can start adding recipes as soon as they have signed up using the Add New Recipe option which appears in the navbar when logged in.

  

  • iv. On the Add Recipe page, users can fill in the information about the recipe, and add an image URL if they want. If they do not add one, a default image is used instead.

  

  • v. When finished, the user can log out using the Log Out button on the navbar.

  c. As a first time visitor, I want to explore other recipes.

  • i. Scrolling down the home page will show more recipes to the user. Clicking on each of their View Recipe options will show each recipe in further detail.

  

  • ii. Users can also search for recipes using the search bar on the home page.

• Returning Visitor Goals

  a. As a returning visitor, I want to be able to log in quickly and easily.

  • i. When not logged in, the navbar displays a login button. This takes the user to a form page where they enter their username and password to log in.

  

  b. As a returning visitor, I want to edit my existing recipes.

  • i. When logged in, users can click on the Edit Recipe button which appears at the bottom of any recipe's View page. If the logged in user is also the creator of the recipe, the site will allow them to edit the entry.

  

  • ii. The user will be presented with a pre-populated form where they can edit all the data they have entered previously, and resubmit or cancel at the bottom of the form.

  

  c. As a returning visitor, I want to delete a recipe I have previously added to the site.

  • i. When logged in, users can click on the Delete Recipe button which appears at the bottom of any recipe's View page. If the logged in user is also the creator of the recipe, the site will allow them to delete the entry.

• Frequent Visitor Goals

  a. As a frequent visitor, I want to view all the recipes I have uploaded.

  • i. When logged in, the My Recipes option appears in the navbar where the user can see all recipes uploaded by themselves.

  

Further Testing

The site has been tested on Chrome, Edge, Firefox and DuckDuckGo on mobile, desktop and tablet devices of varying screen widths.

Pages all link to each other without issue, and external links open a new tab as expected.

Family also assisted in testing the site, and reported no major issues.

Known Bugs

• Materialize's form placeholder text overflows to a new line on smaller resolutions.

Fixed Bugs

• Search initially was not working. This was fixed by adding a search index in MongoDB.
• View Recipe was initially displaying the recipe creator's ID instead of their username - this was fixed by changing the database target on line 185 in app.py.
• Navbar title was wrapping onto the next line on smaller resolutions. This was fixed with CSS media queries.
• The Cuisine dropdown menu on Add Recipe and Edit Recipe was initially showing the entire cuisine array as one option. This was fixed by targeting the array in app.py (lines 169 & 247) and making a nested for loop in addrecipe.html (line 22) and editrecipe.html (line 24).
• Data from the database returned unwanted whitespace in some Edit Recipe form fields and appeared to be not pulling through at all on imgUrl and description fields - this was fixed by both changing the fields' values into textarea content (eg. editrecipe.html, line 39), and removing indents from Jinja for loops in editrecipe.html (lines 50-52, 64-66)
• createdBy became a null value when editing a recipe, fixed by checking reference is createdBy instead of created_by.
• In Edit Recipe, the cuisine dropdown caused update button to not work if not interacted with due to form validation issues - fixed by adding the default value to selected option and removing disabled attribute (editrecipe.html, line 22).

Back to top

Deployment

Local Deployment

Before you are able to deploy and run this application locally, you must have the following installed on your system:

• Python3 to run the application.
• PIP to install all app requirements.
• An IDE of your choice, such as Microsoft Visual Studio Code.
• GIT for cloning and version control.
• MongoDB CLI to develop your own database either locally or remotely on MongoDB Atlas.

Next, perform the following steps:

Clone this GitHub repository by either clicking the green Clone or download button and downloading the project as a zip-file (remember to unzip it first), or by entering the following into the Git CLI terminal: - git clone https://github.com/carwynteifion/Milestone-Project-3-BD.git.

• Navigate to the correct file location after unpacking the files.
  • cd <path to folder>
• Create a env.py file containing your MONGO_URI and SECRET_KEY environmental variables.
• Install all requirements from the requirements.txt file using this command:
  • pip3 -r requirements.txt
• Sign up for a free account on MongoDB and create a new Database called milestone_project_3. The Collections in that database should be as follows:

cuisines
_id: <ObjectId>
cuisineType: <Array>

recipes
_id: <ObjectId>
recipeName: <string>
cuisine: <string>
recipeDescription: <string>
ingredients: <Array>
method: <Array>
createdBy: <ObjectId>
imgUrl: <string>

users
_id: <ObjectId>
username: <string>
password: <string>
recipes: <Array>

• At the terminal prompt, type python3 app.py. This should now start running a development server which you can open from your IDE's remote explorer.

Remote Deployment

To implement this project on Heroku, the following must be completed:

1. Create a requirements.txt file so Heroku can install the required dependencies to run the app.
   • pip3 freeze --local > requirements.txt
   • My file can be found here.
2. Create a Procfile to tell Heroku what type of application is being deployed, and how to run it.
   • echo web: python run.py > Procfile
   • My file can be found here.
3. Sign up for or log into your Heroku account, create your project app, and click the Deploy tab. Select Connect GitHub as the Deployment Method, and select Enable Automatic Deployment.
4. In the Heroku Settings tab, click on the Reveal Config Vars button to configure environmental variables as follows:
   • IP : 0.0.0.0
   • PORT : 8080
   • MONGO_URI : <link to your Mongo DB>
   • SECRET_KEY : <your own secret key>
5. The app will now be deployed and built by Heroku and will be ready to run.

Back to top

Credits

Code

Content

All code was written by the developer.

Media

• Background image
• Food images taken from BBC Good Food
• Default food image
• Favicon designed by my fiancee in Canva

Acknowledgements

My mentor, Chris, for once again being a huge help while I was putting this together.

Scott, Rebecca and James from Tutor Support for their excellent ability in nudging me in the right direction towards figuring out solutions for myself.

My fiancee, Isadora, and her mum, Kay, for UX/bug testing this site.

Back to top