All About The Sauce Recipe Storing and Sharing Website Application

View the live project here on Heroku.

This is a peer sharing recipe application to be used by anyone wishing to get, share, or store recipes.

User Experience (UX)

• User stories

  • First Time Visitor Goals

    1. As a First Time Visitor, I want to easily understand the main purpose of the site and immediately see some recipes to get inspired.
    2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.

  • Returning Visitor Goals

    1. As a Returning Visitor, I want to easily be able to register an account.

  • Frequent User Goals

    1. As a Frequent User, I want to update my recipes and add newly discovered ones.
    2. As a Frequent User, I want to check on other users' recipes.
    3. As a Frequent User, I want to manage my account easily.

• Design

  • Colour Scheme

    • Italian inspired - "Il tricolore" = Philippine Green (#008C45); Anti-Flash White (#F4F5F0); Fire Engine Red (#CD212A)

  • Typography

    • The Montserrat font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. Montserrat is a clean font used frequently in programming, so it is both attractive and appropriate.

  • Imagery

    • Imagery is important. The large, background hero image is designed to be striking and catch the user's attention. It also has a modern, energetic aesthetic.

• Wireframes

  • Home Page (public) Wireframe - View

  • Home Page (private) Wireframe - View

  • Login Page (public) Wireframe - View

  • Register Page (public) Wireframe - View

  • Account Page (private) Wireframe - View

  • New Recipe Page (private) Wireframe - View

Features

• Responsive on all device sizes
• Interactive elements
• CRUD operations with a database

Technologies Used

Languages Used

• HTML5
• CSS3
• JavaScript
• Python
• Flask
• MongoDB

Frameworks, Libraries & Programs Used

1. Google Fonts:
   • Google fonts were used to import the 'Titillium Web' font into the style.css file which is used on all pages throughout the project.
2. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
3. Materialize
   • Materialize was used as a CSS style bootstrap for the navbar and screen elements.
4. jQuery:
   • jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
5. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
6. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
7. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C CSS Validator

Testing User Stories from User Experience (UX) Section

• First Time Visitor Goals

  1. As a First Time Visitor, I want to easily understand the main purpose of the site and immediately see some recipes to get inspired.
     1. As a First Time Visitor, when I enter the site I immediately see the title "All About The Sauce" and am drawn to the hero image of the pasta dish.
     2. As a First Time Visitor, I can see the search area with the recipes listed below.
  2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
     1. As a First Time Visitor, I only need to be on the main page of recipes. One click is all it takes to get to the registration page.

• Returning Visitor Goals

  1. As a Returning Visitor, I want to easily be able to register an account.
     1. As a Returning Visitor, it is easy to find the option to register and the form is intuitive and easy to complete.

• Frequent User Goals

  1. As a Frequent User, I want to update my recipes and add newly discovered ones.
     1. As a Frequent User, I am able to log into the application and begin working on and viewing recipes.
  2. As a Frequent User, I want to check on other users' recipes.
     1. As a Frequent User, I can see recipes from other creators.
  3. As a Frequent User, I want to manage my account easily.
     1. As a Frequent User, I am able to delete my account very easily.

Further Testing

• The Website was tested on Google Chrome, Microsoft Edge and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, Android Smartphone, Apple iPhone.
• A large amount of testing was done to ensure that all pages were linking correctly and thte data binding was functioning correctly.
• Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

Known Bugs

• On some mobile devices the title on the navbar overflows.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
   • Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Credits

Code

• The full-screen hero image code came from Pixabay

Content

• All content was written by the developer.

• Psychological properties of colours text in the README.md was found here

Media

• The hero image was collected from Pixabay.

Acknowledgements

• Friends and family for their support and help.