BiaBook (where 'bia' is the Irish word for food) is my Milestone 3 project. It is part of the Fullstack Software Development Course of Code Institute.

• As a user, I would like to be able to search for recipes.
• As a user, I would like to create a profile and upload a picture.
• As a user, I would like to view what recipes other users have created.
• As a user, I would like to register in order to have my own account.
• As a registered user, I would like to add, edit or delete my own recipes.
• As a user, I want to be able to contact the website.
• As a user, I want to be able to access the site's if any Social Media platforms.

• As a site owner, I want to create a site that is mobile ready.
• As a site owner, I want to be able to add or remove categories.
• As a site owner, I want my users to be able to sign up to the website.
• As a site owner, I want my users to be able to connect with the owner/team via social media channels.
• Testing information for User Stories can be found in a separate TESTING.md

• Project Goals: The goal of this project was to create a simple website where users could share and view other recipes. They could create their very own account and learn new cuisines from other users.

• Content: The content is determined by the users and presented in a uniform and clear manner.

• To learn and practice frontend and backend programming together for the first time. To combine the use of HTML, CSS, Materialize and JavaScript with Python, MongoDB, Flask and Jinja.

• A website where users can showcase their recipe with simplicity.
• A website with minimal but yet subtle interaction amongst the users.
• Future Technologies would be a fully interactive profile page for each user.

• Nav bar on each page with Recipes, Login and Register - add recipe is available once a member.
• Recipes: A showcase of user recipes with a search bar to aid users in finding a particular recipe.
• Login: Where the user can access their profile by supplying their username and password.
• Register: Where a user can sign up and begin sharing recipes.
• Footer: to the social media sites.

• I designed the site mock-ups using balsamiq wireframes.
• Each image/pdf shows a page and how the displays would change on different screen sizes such as mobile, tablet and desktop.
  • Recipe(home page)
  • Register and Login
  • Add Recipe
  • Profile
  • Manage Categories - for Admin only!

• limited fonts and a purple colour scheme

A standard layout is fully responsive on mobile devices and larger screens.

I came up with the colour scheme myself. I wanted to experiment with an assortment of purples in contrast with orange, red, green and white.

The colour used: note - some are in rgb format in the project

• #cc11c3
  • 
• #f36405
  • 
• #f86af8
  • 
• #a196a1
  • 
• #fac600
  • 
• #401e4b
  • 
• #3f1d40
  • 
• #fc0000
  • 
• #008000
  • 

Google Fonts were used across the site:

• Vollkorn SC : Used throughout the entire site.

• Balsamiq Wireframe

• The navigation Bar.

• For visitors to the site who are not logged in, list items links are available for them to use.

  1. Recipes
  2. Register
  3. Login

• For users who are logged in, the list items are as follows:

  1. Logout
  2. Add Recipes
  3. Profile
  4. Users

• Python determines if the user is logged in or not by checking if 'user' in session and passes this data to Jinja to display the correct navbar for the user.

• Using Materializecss, on the smaller resolutions (tablet, mobile) the navbar collapses into a burger icon and opens from the side.

The Footer features:

• Contact section
• Copyright Information
• Links to social media platforms.

• This page contains:
  • a view of recipes from all the users.
  • If signed in, you can edit or delete your recipe.
  • You can open each collapsible to view the recipe contents and it's image.

• This page contains a form where users may register and be redirected to their profile. Below the form is a link to login.

• This page contains a form where users may login and be redirected to their profile. Below the form is a link to register.

• Clicking 'Logout' ends a user session and redirects them to the 'Login' page.

• This page is only for the Administrator

• Image Hosting

  Each image added to the recipes comes from a http: link, in the future I would love to make it so the user would be able to upload an image to the database.

• Profile Page

  • The Profile page currently allows users to upload an image but they are unable to save it. I would like to add this feature later.
  • Also, I would like to make a profile page similar to one you might find on facebook where the user could design it to their taste and 'like' and/or 'favourite' other user's recipes.
  • I would like to add a video platform where users could vlog their recipes and have others follow their content.

• HTML - Used throughout the site.

• CSS - Used throughout the site.

• JavaScript - Used to help features in Materialize.

• Materialize - Used to aid responsive design and for componants such as modals.

• Gitpod - Code Editor used to create the site.

• GitHub - Used to host repos for the site.

• Chrome - Used to test/ find a solution to a problem.

• W3C Markup Validation Service - Used to test code for errors.

• Extends Class -Used to test python code

• Balsamiq - Used to create wireframes.

• Randomkeygen - Used to generate random keys.

• Python - backend programming Language.
• Flask - Python framework For pagination, etc.
• Dnspython- DNS toolkit for Python.
• Heroku - Cloud application platform.
• Mongo DB Atlas - non relational, NO-SQL Database - Cloud based MongoDB server.

• Javascript - For auto-complete, navbar, etc.
• Jquery - For auto-complete, navbar, etc.
• Materialize- for clean front-end design >

• Git - used for version control. Only a Master branch was used.

• HTML5 Semantics used throughout (header, nav, main etc...)
• Language is set to english (<html lang="en">)

• Aria labels used throughout eg <button id="submit" aria-label="submit" type="submit">
• Alt Text: Alt text dynamically applied to images eg alt="{{recipe.recipe_name}} image"

• All testing and validation is contained within a separate .md file.
  View TESTING.md

Cloning the repository makes a copy of the of the repository which you download and store on your machine locally.

To make a clone of BiaBook, follow the following steps:

1. Visit the main repository of by clicking here --> biabook
2. Above all the repository files and folders, you will find two Green buttons. Click on the one displaying ‘Clone’ with a downward arrow and a download icon.
3. With the ‘HTTPS’ method selected, click the ‘copy’ button next to the URL. Here you will find the link you will need to copy. The link to copy BiaBook is: https://github.com/AlexNexton/biablog
4. Open the working directory where you want the repository to be cloned to, and in the terminal use the command and hit enter: git clone https://github.com/AlexNexton/biablog.git
5. All the files will now be cloned into your chosen workspace.
6. Add/create a env.py file with the following details: Import os os.environ.setdefault("IP", "To be added by user") os.environ.setdefault("PORT", "To be added by user") os.environ.setdefault("SECRET_KEY", "To be added by user") os.environ.setdefault("MONGO_URI", "To be added by user") os.environ.setdefault("MONGO_DBNAME", "To be added by user")

Do not commit this page.

1. Create a file named .gitignore with the contents simply .env.py

2. To install the modules required on the requirements.txt file, run the command: pip3 install -r requirements.txt

3. You can run the code using the command: python3 app.py in the terminal.

Secret keys should not be pushed to GitHub, or shared with anyone. To avoid this happening, I included my Secret Key and key variables in a file which is stored locally.

The file env.py includes these key variables and secret key.

To stop this file being pushed to GitHub when commits are made and pushed, I created a .gitignore file which included the file name within it. Every time commits are made and pushed, the env.py file is ignored.

_id: <ObjectId>
category_name: <String>

_id: <ObjectId>
category_name: <String>
recipe_name: <String>
recipe_ingredients: <String>
recipe_method: <String>
recipe_image: <String>
created_by: <String>

_id: <ObjectId>
username: <String>
password: <String>

By deploying BiaBook to Heroku, I was able to run my Python app and view a live version of the website which updated with each push I made. This link is also shareable to other users to be able to test the site.

1. In the terminal, I created a requirements.txt and Procfile using the following commands:
   1. pip3 freeze –local > requirements.txt
   2. echo web: python app.py > Procfile (be sure to create this file with a capital P)
2. Commit the new files to GitHub
3. Within my Heroku account I created a new App called 'biablog' and chose the region closes to me, Europe.
4. Within the deploy sections which opened automatically after creating the app, I selected the Deployment Method of Connecting to GitHub via the logo.
5. Beneath this, I typed the GitHub repository name 'biablog' and hit search. When the correct repository was found I clicked the ‘connect’ button.
6. Next, I clicked on ‘Settings’, then in Config Vars, I clicked ‘Reveal config Vars’. I filled out the Config Vars with the following information:

Note: your MONGO_URI and SECRET_KEY must match the ones you entered in 'env.py' file

7. In Deploy, I clicked ‘Enable Automatic Deploys’ and deployed from the Master branch.
8. Follow this I then clicked ‘Deploy Branch’ and the app was deployed successfully at the URL BiaBook which is https://biablog.herokuapp.com/

• Firstly, The Code Institute Backend Mini project. A huge thank you!!

• Github, Format of README modified from Sean-Mc-Mahon and Michelle Clement.

• Stack overflow for helping me fix parts of my code.

• Google Fonts for font styles; https://fonts.google.com/

• Button icons sourced from Fontawesome

• Important : all other images are supplied/ have been supplied or will be supplied by testing users.
• Bilbao Food Safari
• Business2community

• Firstly, I would like to thank my friend John for believing I could get this project completed as it has personally been a difficult couple of months.
• Secondly, My Mother Caroline, for ringing me and helping me get my feet back on the ground - Thanks Mom.
• And finally, My friend Nessa, who is always there when I need her and who always pushes me to deliver my best - Thank you.

This project is for educational use only