Skip to content

juanstelling/MS3_breaktasty

BranchesTags

Repository files navigation

Breaktasty

Portfolio website

After a night of sleep, your energy level is low and your body needs new energy to function properly. Your body gets this new energy from a nutritious breakfast. Food is the most important energy source for your body. You can think of food as fuel for your body.

Breaktasty is a recipe website for people who love breakfasts. The website is a place where people (especially breakfast lovers) can get inspired, search for tasty recipes and post their recipes.

Breaktasty is designed to inspire people for breakfast ideas. Everyone is welcome to create an account and add their breakfast recipes. If the user has an account, he/she can add, edit and delete their recipes. And they can save other recipes by putting them in favorites.

This project is the third out of four Milestone Projects in the Full Stack Web Development Program I am attending at The Code Institute.

Index

1. User experience (UX)

1.1 Project goals

  • Making a full-stack site that allows users to manage a common dataset about a particular domain.

  • Making a full-stack site that uses HTML, CSS, JavaScript, Python+Flask and MongoDB.

  • Creating a website that serves as a platform where people can get inspired for breakfast ideas and where they can share their breakfast recipes.

  • Creating a website that is simple to understand and easy to navigate.

  • The users of the website can make use of CRUD (create, read, update and delete) for the recipes.

1.2 User stories

First-time visitor goals:

  1. As a first time visitor, I want to be able to visit the website on every device, so that I can look at the website on desktop, mobile and tablet.
  2. As a first time visitor, I want to be able to navigate easily through the website, so I can find everything easily.
  3. As a first time visitor, I want to see an overview of all recipes, so I can get inspired by all recipes.
  4. As a first time visitor, I want to be able to search recipes by categories, so I can quickly scan the recipes by category.
  5. As a first time visitor, I want to be able to search recipes based on words, so I can find recipes easily. (For example, I can search the word banana and all recipes with the ingredient Banana or banana in the recipe name will appear.)
  6. As a first time visitor, I want to register an account on the website, so I can share my recipes on Breaktasty.
  7. As a first time visitor, I want to sign up for the newsletter.

Site member goals:

All the goals of first-time visitors also apply for site members. There are additional user stories to the site members because they have more access to the website. See the additional user stories below.

  1. As a site member, I want to add my recipes, so I can share my recipes.
  2. As a site member, I want to edit my recipes, so I can update information in the recipe.
  3. As a site member, I want to delete my recipes, so I can remove the recipe when it is no longer relevant.
  4. As a site member, I want to login to my profile, so I have access to my recipes.
  5. As a site member, I want to logout to my profile, so I can logout from my profile.

Admin goals:

All the goals of the first time visitors and site members also apply for the admin. The admin has additional user stories to manage the categories of the recipes.

  1. As an admin, I want to add new categories, so I can make the categories clear and manageable.
  2. As an admin, I want to edit categories, so I can update categories.
  3. As an admin, I want to delete categories, so I can remove categories when they are no longer relevant.

1.3 Design

  • Colour scheme

The three colours that are used for the recipe website are very neutral and simple. I have chosen these colours because the colours give a sleek and uncluttered appearance.

Colour scheme

  • The black colour is used for the social media navbar, a section of the footer, the flash messages, all text and some highlighted rows.

  • The grey colour is used for a section in the footer. In this section the user can sign up for the newsletter and some information is given about the purpose of the website. This section is grey to highlight the section and makes it soften in contrast to the black colour.

  • The white colour is the background of the body. This white colour makes all content on the body look clear and calm.

  • Fonts

The Bebas Neue font and Raleway font are used throughout the whole website. Sans serif and cursive are the fallbacks in case the main font isn’t being imported to the site correctly. The Bebas Neue font is used for all titles, the instruction text, the recipes names, ingredients and other special text that should stand out more. This font is used because the font is all in capital letters and has a sleek appearance. The Raleway font is used for all paragraph text. This font is used because it is easy to read and matches well with the Bebas Neue font.

  • Icons

In the project, icons are used that are provided by Font Awesome. The Icons that are used have functional purposes such as the hamburger menu and social media icons.

  • Images

The images I used for this project came from Pexels. Images are used for the header on the home page and all the recipes.

  • Defensive design

    • The user is not able to break the site by clicking on buttons.
    • The signup form:
      • The username has to be between 5-20 characters and only must contain letters and numbers.
      • The password has to be between 5-20 characters and must contain at least one number, and one uppercase and lowercase letter.
    • The add and edit recipe form:
    • The recipe name has to be between 1-20 characters and only must contain letters and numbers
      • The category has to be chosen.
      • The image URL must start with http:// or https://.
      • The number of serves and prepping time has to be numbered.
    • By the email subscriber, the email must be in the following order: characters followed by a @ symbol, followed by more characters and then a “.”.
    • A recipe or category can't be deleted by just one click. If someone clicks on the delete button, there wil be a pop up with a confirmation if someone is sure to delete the recipe or category.

  • Interactive design

    • The website has to be easy to navigate.
    • The user can quickly find the information he/she wants to find.

Interactive design

1.4 Information architecture

The project has four collections in the database. The database structure in MongoDB is as follows:

Information architecture

1.5 Mockup designs

Mockup designs are made with Figma.

Click on the links below to see the mockups in Figma.

Mobile Tablet / Desktop
Breaktasty Breaktasty

2. Features

2.1 Existing features

1. Design

  • An attractive and simple layout with consistency.
  • Simple navigation throughout the website by using the navigation bar.
  • Showing the recipes .simple and clearly

2. General

  • The index page shows an introduction in the shape of a header and introduction text. And the page shows a couple of new recipes.
  • There are links to the social media platforms at the top and bottom of the website.
  • People can sign up for the newsletter.

3. Recipes

  • Recipes can be created, read, updated and deleted (CRUD) by the users.
  • Recipes can be sorted by category.
  • People can search for recipes with the search bar.
  • Users have access to their profile, with an overview of all their recipes.
  • Recipes include ingredients, instructions, tips, prepping time and serves.

4. Signup, login and logout

  • People can create a new account on the web application.
  • People can login with their existing accounts.
  • People can easily log out.
  • If a person creates a new account, logs in or logs out, a flashed message will appear with the action the person has done.

2.2 Features left to implement in the future

  • Changing the number of ingredients based on the number of people.
  • Adding a favorite section. Users can favorite a recipe and see them on their favorite page.
  • On the overview of recipes multiple pages with all recipes, instead of a long list of all recipes.
  • For an image of the recipe, users have to fill in the image URL. For the future, there also can be an option to upload the image.
  • Add form validation on the backend.
  • The user can delete their profile.

3. Technologies used

Languages used

  • HTML5
    • HTML5 provides the structure and the content for my project.
  • CSS3
    • CSS3 provides the style of the HTML5 elements.
  • jQuery
    • jQuery used as the JavaScript functionality.
  • Python
    • Python provides the backend of the project.

Frameworks, libraries & Other

  • Gitpod
    • The GitPod is used to develop the project.
  • Git
    • The Git was used for version control to commit to Git and push to GitHub.
  • GitHub
    • The GitHub is used to host the project.
  • Google Fonts
    • Google Fonts is used to provide the font roboto for all the text that is used in the project.
  • Figma
    • Figma is used to create the mockup designs for the project.
  • Materialize
    • Materialize is used for the design framework.
  • MobgoDB
    • MongoDB is the fully managed cloud database service used for the project.
  • Heroku
    • Heroki is the cloud platform to deploying the app.
  • Flask
    • Flask is the web framework used to provide libraries, tools and technologies for the app.
  • Jinja
    • Jinja is used for templating Python
  • Werkzeug
    • Werkzeug is used for password hashing and authentication and autohorization.

Testing tools used

  • Chrome DevTools is used to detect problems and test responsiveness.
  • Autoprefixer
    • Autoprefixer is used to parse the CSS and to add vendor prefixes to CSS rules.
  • W3C Markup Validation Service
    • The W3C Markup Validation Service is used to check whether there were any errors in the HTML5 code.
  • W3C CSS validator
    • The W3C CSS validator is used to check whether there were any errors in the CSS3 code.
  • JShint
    • JShint is a JavaScript validator that is used to check whether there were any errors in the JavaScript code.
  • PEP8
    • The PEP8 validator is used to check whether there were any errors in the Python code.

4. Testing

The testing process can be found here.

5. Deployment

Requirements

  • Python3
  • Github account
  • MongoDB account
  • Heroku account

Clone the project

To make a local clone, follow the following steps.

  1. Log in to GitHub and go to the repository.
  2. Click on the green button with the text “Code”.
  3. Click on “Open with GitHub Desktop” and follow the prompts in the GitHub Desktop Application or follow the instructions from this link to see how to clone the repository in other ways.

Working with the local copy

  1. Install all the requirements: Go to the workspace of your local copy. In the terminal window of your IDE type: pip3 install -r requirements.txt.
  2. Create a database in MongoDB
    • Signup or login to your MongoDB account.
    • Create a cluster and a database.
    • Create four collections in the db: categories, recipes, subscribers, users.
    • Add string values for the collections. See my Information architecture how the database is set up for this project.
  3. Create the environment variables
    • Create a .gitignore file in the root directory of the project.
    • Add the env.py file in the .gitignore.
    • Create the file env.py. This will contain all the envornment variables.
    Import os
os.environ.setdefault("IP", "Added by developer")
os.environ.setdefault("PORT", "Added by developer")
os.environ.setdefault("SECRET_KEY", "Added by developer")
os.environ.setdefault("MONGO_URI", "Added by developer")
os.environ.setdefault("MONGO_DBNAME", "Added by developer")
  4. Run the app: Open your terminal window in your IDE. Type python3 app.py and run the app.

Heroku Deployment

  1. Set up local workspace for Heroku
    • In terminal window of your IDE type: pip3 freeze -- local > requirements.txt. (The file is needed for Heroku to know which filed to install.)
    • In termial window of your IDE type: python app.py > Procfile (The file is needed for Heroku to know which file is needed as entry point.)
  2. Set up Heroku: create a Heroku account and create a new app and select your region.
  3. Deployment method 'Github'
    • Click on the Connect to GitHub section in the deploy tab in Heroku.
      • Search your repository to connect with it.
      • When your repository appears click on connect to connect your repository with the Heroku.
    • Go to the settings app in Heroku and go to Config Vars. Click on Reveal Config Vars.
      • Enter the variables contained in your env.py file. it is about: IP, PORT, SECRET_KEY, MONGO_URI, MONGO_DBNAME
  4. Push the requirements.txt and Procfile to repository. 
    $ git add requirements.txt
$ git commit -m "Add requirements.txt"

$ git add Procfile 
$ git commit -m "Add Procfile"
  5. Automatic deployment: Go to the deploy tab in Heroku and scroll down to Aotmatic deployments. Click on Enable Automatic Deploys. By Manual deploy click on Deploy Branch.

Heroku will receive the code from Github and host the app using the required packages. Click on Open app in the right corner of your Heroku account. The app wil open and the live link is available from the address bar.

6. Credits

Recipes

Media

Code

7. Acknowledge

Thanks to the following people and organizations who helped or inspired me for the project:

  • The support and guidance of my mentor Precious Ijege.
  • The lessons and knowledge of Code Institute.
  • The advice about a bug of Igor and Cormac from the Tutor Assistance

8. Disclaimer

This project is for educational purposes only. If there is an issue with the copyright or the content, please contact me: juan.stelling@gmail.com

Thanks for visiting

Back to top!

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

2 watching

Forks

4 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages