MyRecipeBook

View Live Site Here

Table of Contents

• UX
• User Stories
• Design
• Data Schema
• Wireframes
• Features
• Existing Features
• Technologies Used
• Testing
• Deployment
• Credits
• Resources
• Acknowledgements

UX

Project Goals

The primary goal of MyRecipeBook is to allow the users to create, save, search, and view their favorite recipes in one place.

Use HTML5, CSS3, JavaScript, Python, Flask, and MongoDB

User Goals

The user is looking for a web-based app where they can:

• Use CRUD conventions to:
  • Create a recipe
  • Read recipe
  • Update(Edit) recipe
  • Delete recipe they created
• Be able to search the database for recipes

User Stories

As a first-time visitor, I want to be:

• Able to easily find recipes stored in the database.
• Able to view full recipe and get valuable information.
• Able to Create an Account.

As a returning visitor, I want to be:

• Able to log into my account and have access to all features of the site.
• Able to Add(Create) recipes and store them in the database.
• Able to view my recipes
• Able to Edit recipe
• Able to Delete a recipe(s) I have created.

As an Admin user of the site, I want to:

• Be able to add new categories

Please note that currently Admin user can only add categories

Strategy

• For this project, the targeted audiences are:

  • Food Lovers
  • People, who are passionate about cooking
  • People of all ages

• The website enables the user to:

  • Register or Log in to account
  • View Recipes
  • Search Recipes, by category or name, even by ingredients
  • Create their recipes and upload them to the database
  • View the full recipe they have created, or someone else
  • Edit recipes they have created
  • Delete a recipe created by them

Scope

• What the user will look for:
  • Easy navigation
  • Welcoming Design
  • Search the database for recipes
  • Add their recipe
  • Manage recipes (Edit, Delete)
  • Save and View the full recipe
  • Be able to Register and Login

^ back to top ^

Design

Colors

• Colors used for text:
  • #515251
  • #6A7359
  • #fff
• Background colors:
  • rgba(241, 183, 183, 0.29)
  • rgba(255, 255, 255, 0.28);
  • rgba(255, 255, 255, 0.8)
  • rgba(243, 222, 222, 0.3)
  • rgba(255, 255, 255, 0.4)
  • #f7e3e3
  • #f48b89
  • #6A7359
  • #515251
  • #eab0b1
  • #f5e9e9
  • #e06666
  • #ec7f7d

^ back to top ^

Typography

• The primary font used is Poppins, and Sans Serif is used as a fallback font.

Data Schema

MongoDB was used for this project and schema design was created. See below:

^ back to top ^

Users Collection

• Upon regisering, the user will provide:
  • Username
  • Email Address
  • Password
  • is_admin is given a default value of False.

Recipes Collection

• When creating a new recipe the user will provide the following:
  • Recipe Name
  • Recipe Image URL
  • Original Recipe URL(not required but needed to avoid copyright issues)
  • Category
  • Ingredients
  • Method
  • Prep Time (Total time needed to prepare the recipe)
  • Number of Serves
  • Created By (it will get a value of the current user in session)

Categories Collection

• Currently, there are four categories the user can choose from:
  • Main
  • Starter
  • Salad
  • Soup

Subscribers Collection

• If the user decides to subscribe to the newsletter he/she will have to provide:
  • Email Address (which is stored in the collection)

^ back to top ^

Wireframes

Wireframes part 1

Wireframes part 2

^ back to top ^

Features

• Each page has responsive and fixed-to-the-top navigation, for the user to be able at any moment to navigate to a different page.
• A class active is given to the current page link in the navigation, highlighting it for the user.

• The Footer of the site contains social media links and a Newsletter subscription

• If the user is logged in to their account, will have access to:
  • Profile page
  • Add Recipe page
  • Update Recipe
  • Delete Recipe
  • View Full Recipe
  • If the user is admin, then will have access to Manage Categories, where new categories can be added.
• The website uses cards to display recipes, giving short info for the user:
  • Recipe image
  • Recipe Category
  • Recipe Name
  • Created by
  • A button to view the full recipe

^ back to top ^

Existing Features

• Home Page

  • Hero Image with a welcome text

  

  • Short text prompting the user to create an account and start adding recipes and cta buttons

  

• Recipes

  • A search bar where the user can search for recipes

  

  • Recipe cards

  

^ back to top ^

• Register

  • Registration Form allows the user to:

    • Enter their desired username

    • The password field uses Werkzeug to hash the password on entry and confirm the password is validated using Javascript. If the passwords do not match, a disabled class is added to the Register button, preventing the user from submitting the form with an incorrect password.

    • Email Address field where the user has to enter their email

    • Register button, to submit the form when all fields are filled correctly.

  

^ back to top ^

• Login

  • Login page allows the user to:

    • Enter the username used when registered.

    • Use the password created when registered and Werkzeug will un-hash the password for user authentication.

    • Login button, submits the form when all fields are filled.

  

^ back to top ^

• Profile

  • Profile page allows the user to:

    • View the recipes created by them
    • Use the Add Recipe button to create a new recipe.
    • Use the full recipe button to view the full recipe.

  

^ back to top ^

• Full Recipe

  • Full Recipe page allows the user to:

    • View full recipe with method and ingredients.
    • Edit button can be used to Edit the current recipe.
    • Delete button can be used to delete the current recipe.
    • Back button takes the user to the previous page.
    • Use the link to view the original recipe.

Please note that if the user is viewing someone else's recipe they will not be able to edit or delete, but instead will see only the back button.

^ back to top ^

• Add Recipe

  • Add Recipe page allows the user to:

    • Fill the add recipe form by:

      • Choosing a category
      • Choosing recipe name
      • Adding a link to the original recipe
      • Adding a recipe image
      • Selecting the total time to cook
      • Selecting the number of people it serves
      • Adding ingredients
      • Adding method steps

    • Use the buttons to:

      • Add a new ingredient field, to insert every ingredient of the recipe.
      • Add a new step from the method.
      • Cancel and go back.
      • Submit the form by clicking the add recipe button.

  

^ back to top ^

• Edit Recipe:

  • Allows the user to:

    • Change each field of the form, delete ingredients or steps, or add new.
    • Submit the form and update the recipe.
    • Cancel and go back.

  

  

  

• Delete Recipe:

  • Allows the user to:

    • Delete the recipe they have created.
    • Cancel and close the modal.

  

If the user is admin, he/she will have access to Manage Categories.

• Manage Categories:

  • Allows the user to:

    • View all categories
    • Add a new category

  

• Add Category:

  • Allows the user to:

    • Add a new category by filling up the form.
    • Submit the form by using the Add Category button.
    • Cancel and go back.

  

^ back to top ^

Features to implement in the future

• Manage Profile

  • Add a profile image
  • Edit username or password
  • Delete account

• More admin features:

  • Be able to delete any recipe
  • Be able to delete a category
  • Be able to edit category

• By using EmailJS, to send an email to the user after they subscribe to the newsletter.

---

^ back to top ^

Technologies Used

Languages

• HTML5
• CSS3
• JavaScript
• Python

---

^ back to top ^

Frameworks, Libraries & Programs Used

• Materialize

  • Materialize was used to help with the responsiveness and styling of the website.

• Balsamiq

  • Balsamiq was used for creating the wireframes for this project.

• jQuery

  • jQuery was used to initialize Materialize and also for the site's functionality, as is Vanilla JS as well

• Google Fonts

  • Google Fonts was used to import the Poppins font, which was used throughout the project.

• Font Awesome

  • Font Awesome was used for all icons used in this project.

• GitHub

  • GitHub is used to store the project's code after being pushed from Git.

• Git

  • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

• Gitpod

  • Used as the IDE for this project.

• Am I Responsice

  • Used to validate the responsiveness of the site.

• Heroku

  • Heroku was used to deploy the website.

• Flask

  • Flask was used as the web framework for the application.

• PyMongo

  • flask_pymongo was used to connect between the MongoDB database and Python.

• BSON

  • bson.objectid is a required dependency for MongoDB.

• Jinja

  • Jinja templating language was used to simplify and display backend data in HTML.

• Werkzeug

  • Werkzeug was used for password hashing and authentication.

• Autoprefixer

• Favicon Generator

Testing

All Testing

^ back to top ^

Deployment

• Login in to Heroku

• Click on New, and Create a new app

• Enter your app name

• Select the region that is closest to you

• Click on the Connect to GitHub section in the deploy tab in Heroku.

• Search your repository to connect with it.

• Then connect to your repository

• Go to settings and click on Config Vars

• Enter the variables in your env.py file.

    os.environ.setdefault("IP", "0.0.0.0")
    os.environ.setdefault("PORT", "5000")
    os.environ.setdefault("SECRET_KEY", "Generate the key for randomkeygen.com")
    os.environ.setdefault("MONGO_URI", "") --> used to connect to our database
    os.environ.setdefault("MONGO_DBNAME", "name of our database")
  

• Enable Automatic Deployment

  • Go to the deploy tab
  • In the automatic deploys section, choose the branch that you want to deploy from and select Enable Automatic Deploys.

^ back to top ^

Clone It

1. Login to GitHub
2. Fork the Repository.
3. Then click Code under the Settings button.
4. Choose HTTPS, SSH, or GitHub CLI, then click the copy button to the right.
5. Open Git Bash
6. Change the directory to the location where you want the cloned directory to be made.
7. Type git clone and paste the URL you copied before.
8. To create the clone press Enter

^ back to top ^

Credits

Resources

• Rebecca Tracey-Timoney

• juanstelling

• TravelTimN

• Stack Overflow

  • For genereal resource

• mickmccann

• Code Institute's Flask Task-Manager Mini Project

• Materialize

^ back to top ^

• Original Recipes

  • Pesto chicken salad
  • Beef Lasagne
  • Margherita
  • Pepperoni pizza
  • Tomato soup
  • Asian Slaw
  • Jollof spaghetti

Code

• Rebecca Tracey-Timoney
• juanstelling
• TravelTimN
• DonnaIB
• Code Institute's Flask Task-Manager Mini Project
• Error Handlers

^ back to top ^

Images

• Home

  • Unsplash

• Register

  • Unsplash

• Recipes

  • Pesto chicken salad Unsplash
  • Tomato Soup Unsplash
  • Beef Lasagne Unsplash
  • Asian Slaw Unsplash
  • Pepperoni Pizza Unsplash
  • Margherita Unsplash
  • Jollof spaghetti Here

• Method and Ingredients in Full Recipe page

  • PurePNG

• Footer and Favicon

  • PurePNG

^ back to top ^

Acknowledgements

• My mentor, Oluwaseun Owonikoko, for her guidance and feedback.
• The team at Code Institute, for teaching me the necessary skills to create this site.
• Stackoverflow - for general needs
• Benjamin Kavanagh, for the help and advice he provided me with. I can't thank him enough.
• Code Institute Tutor team
• Rebecca Tracey-Timoney
• juanstelling
• w3schools for all the useful information found on the site.

For the Assessors

If you would like to login as an admin, please use this:

• username: steff777
• password: testM3

Thank you 😀.