The FreeFrom CookBook is an online recipe book specifically catering for those with food allergies and intollerances. Last year I was diagnosed with a severe gluten-intollerance. Understanding free-from cooking, scrutinising labels and educating friends and family has quickly become part of my everyday life. I wanted to create a site where people could explore, create and share allergen free recipes in one place and help educate and promote the importance of understanding food allergies and intollerances amongst everyone. Food allergies can be isolating and stressful, so I wanted to create something with a community-feel and help make free-from cooking more easily accessible.
The FreeFrom CookBook has been developed for my Backend Development Milestone 3 Project, as part of my Full Stack Software Development Diploma with Code Insitute.
Deployed site can be viewed here
- Project Goals
- UX
- Strategy Plane
- Scope Plane
- Structure Plane
- Skeleton Plane
- Surface Plane
- Technologies
- Testing
- Deployment
- Credits
- Acknowledgements
- To promote understanding of food allergies and intollerances
- To create a site where users can easily access information and recipes, in addition to creating and saving their own.
- To build a mobile-first responsive site that can be accessed across all devices.
- To display information in user-friendly way, contributing to an overall good user experience.
- To share allergen free recipes
- To promote allergen free recipes
- To highlight and promote importance of understanding allergens
- To encourage users to create an account
- To encourage users to create recipes for the website
As first-time or casual user (as someone who has not registered):
- As a user I want to be able to understand the purpose of the site easily.
- As a user I want to be able to navigate throughout the site with ease.
- As a user I want to experience good responsive design, so I can access the site on different devices.
- As a user I want to enjoy stylish, clean design and style that is inline with the subject of the site.
- As a user I want a variety of recipes for different meals of the day.
- As a user I want to search for allergen specific recipes.
- As a user I want to be able to view recipes without having to create an account.
- As a user I want the option to register for an account, if I want to return later.
As a returning or registered user:
- As a user I want to log into my account.
- As a user I want to be able to delete my account.
- As a user I want to save recipes to my profile.
- As a user I want to create my own recipes.
- As a user I want to edit the recipes I have added.
- As a user I want to delete the recipes I have added.
- As a user I want to save ingredients to my shopping list.
- As a user I want to delete ingredients from my shopping list.
- As a user I want to sign up for a newsletter, so I can stay informed about new recipes.
- As a user I want to find social media links, so I can follow them on different platforms.
- As a user I want to contact admin with queries or feedback.
- As a user I want to find pagination on the recipe pages, so I do not experience endless scrolling.
- As a user I want to leave comments on recipes, so I can share my opinion with other users.
- As a user, I want to leave a rating on a recipe.
As admin:
- As admin I want to edit existing recipes created by any user.
- As admin I want to add new recipes.
- As admin I want to delete existing recipes created by any user.
- Design
- Simple, clean design and layout with consistency throughout.
- Easy navigation by using navigation bar. Nav links are clearly idenfied both on desktop and when sidenav is expanded on smaller devices.
- Responsive design allowing users to use site across all devices.
- Recipes
- Recipes can be created, read, updated and deleted (CRUD) by the users.
- On the create recipe form, the pre-populated allergen dropdown prompts users to select one or more allergens. The purporse of this is to ensure that users check what allergens their recipe is free from before uploading.
- Users of the site, either logged in or not, can search the recipes either by text input and/or filtering what allergens they want the recipe to be free from.
- Logged in users can favourite recipes and save them to their profile.
- Logged in users can save ingredients from recipe pages to their "shopping list" on their profile.
- Logged in users have access to their profile, where they can view favourite recipes, recipes they uploaded and saved ingredients in their shopping list.
- Recipe information includes servings, prep and cook times, what allergens it is free from, category, ingredients and the method.
- Flash messages will appear when users create, edit, delete and favourite recipes and when their shopping list has been updated.
- Register, Login and Logout
- Users of the site can create an account.
- Users can login into their existing account.
- Users can logout of their account.
- When a user logs in, logs out or creates a new account a flash message will display informing the user what has been actioned.
- Contact and Newsletter
- Users can contact the site owner through a contact form
- Contact form powered by emailJS
- On successfull delivery of a contact message, a modal will display informing the user it has been successful with a personalised message.
- Users can sign up to a newsletter subscription
- A flash message will display informing user either if subscription has been successful or if the email address already exists in database.
To protect the site and defend against any "brute force", I added some defensive programming:
- Created Python functions that:
- Check if a user is logged in. This checks if the session user is active, if so allows the user to perform the action. If not will redirect user to the appropriate page with flash message.
- Check if it is correct user (has the permission). For example with edit recipe, this checks if the session user is equal to the created_by field in the recipe. If so, it allows the user to edit the recipe. If the check fails, it redirects the user with appropriate flash message.
- Check if user is superuser (is admin). An admin function in the app.py defines the admin_user by checking whether the user is admin or not in the admin field in the user collection. The admin function is then used in functions such as edit and delete recipes, to allow the admin user these powers. If the check fails, the user is redirected and a flash message displayed.
- Use Jinga templating to display certain buttons:
- Certain action buttons are only displayed to certain users, for example 'Add to favourites' is only displayed to users that are logged in and didn't create the recipe. Use of Jinga for loops and if conditions to display if users are authorised to do so.
- A section on users home page of recipe suggestions based on type of recipes saved and created in their profile.
- Recipes to display a rating on recipe card based on the average ratings given.
- Users to have ability to edit account, including changing password.
- Users to be able to delete or edit their own comments.
- Admin to be able to edit or delete any users account and comments on recipes.
The structure of the site has been developed to enable users to access and use the site with ease.
- Home Page- accessible by all users, whether logged in or not.
- Navbar- accessible to all users. The navbar changes to a sidenav on tablet screens and smaller for responsiveness. The options available in the navbar change depending on whether a user is logged in or not.
- For logged in users:
- For not logged in users:
- For logged in users:
- About Page and Contact Page- accessible to all users, whether logged in or not.
- Recipes library- accessible to all users, whether logged in or not.
- On recipe card in the recipes library and on individual recipe pages an 'Add to favourites' button is available to logged in users. This allows logged in users, that did not create the recipe, to save recipes to their profile.
- View Recipe Page- Each recipe can be viewed in full and is accessible to all users, whether logged in or not. This page has edit, delete and 'Add to favourites' buttons, 'Save to Shopping List' and a comments section.
- The edit button on the View Recipe Page, is available to admin or the user that created the recipe. This allows the user or admin to edit any part of the recipe and save it.
- The delete button on the View Recipe Page, is available to admin or the user that created the recipe. This allows the user or admin to delete the recipe from the database.
- The 'Save to Shopping List' button allows all logged in users to select ingredients in a recipe and save to a shopping list on their profile.
- Profile Page- this has the users name displayed in the welcome message. On the users profile there are buttons to create a recipe, find recipes in the library and delete account, as well as their shopping list, recipes the user has created and recipes they have saved to their favourites.
- Error Pages have been created incase a user tries to access a page that doesn't exist or there is an issue.
- Database schema design was created using dbdiagram, see below.
- Home Page
- About Page
- Recipe Search Page
- Recipe Page
- Create Recipe Page
- Edit Recipe Page
- Login Page
- Register Page
- Contact Page
- User Profile Page
- User Profile Favourite Recipes Page
- User Profile Own Recipes Page
- User Profile Shopping List Page
There were only a couple of changes to the wireframes during development:
- Instead of a table to display the allergens on the About Page, I decided to use a Materialize collapsible. This allows user to expand information as and when they require. It also minimises the amount of text being displayed at once, which can sometimes be overwhelming to a user.
- On the profile page, initially I was going to have a profile page with three sections(Favourites, Shopping List and My Recipes), which took the user to three different pages. I decided early on in development that this wasn't needed. I want the user to have a good experience and easily access all information. Additionally I didn't feel there would be enough content to fill 3 additional pages. It has been developed that the user has one profile page with all information displayed, clearly laid out in sections.
During development I explored different colour palettes and options. I wanted to use a colour scheme that was both pleasing to the using, and contributed to an overall stylish and simple design. Whilst researching, I explored what different colours represent. Green is often associated with nature and is often viewed as a calming colour. I decided that I wanted my site to be a grounded experience for the user rather than overly garish or exciteable. From that, and using green as a central colour, I used Coolors, to determine a colour palette.
Initially this palette was chosen:
After further exploration and development these colours were chosen:
The images in the site have been selected to showcase delcious, inviting free-from food. To highlight, for the purposes of the site the images chosen by admin were chosen and recipes matched. It can't be guaranteed that the recipes displayed are actually allergen free recipes.
The site consists of:
- A hero image on the Home page
- An image displaying examples of food intollerances on the About Page
- Each recipe image.
- If the user does not upload an image, an image is provided.
Images have been used from Pexels and Shutterstock.
Google Fonts was used to choose fonts for the site. Lobster was chosen as the brand logo font, with its flowing, cursive design. Roboto Condensed was chosen for the rest of the site, as it is clear and easy to read.
- HTML5
- CSS3
- JavaScript
- Python
- Werkzeug- Flask dependency and used security helpers.
- MongoDb used to store database.
- Flask Micro framework for building applications.
- Jinga was used as templating language for all pages throughout.
- jQuery was used for some Materialize elements.
- Font Awesome was used for icons throughout the site.
- Google Fonts was used to choose the fonts.
- Materialize was used for responsiveness, styling and elements such as forms, collapasible tables and tabs.
- Git was used for version control.
- GitHub used for storing the project.
- GitPod was used for editing code.
- Code Institute GitPod Template provided GitPod extensions.
- dbdiagram was used to create database schema diagram.
- RandomKeygen was used to generate secret key.
- Balsamiq was used to create wireframes.
- Coolors was used to help form a colour palette for the website.
- Favicon was used to create a favicon for the site.
- Cloud Converter was used to compress hero image and About page image.
- Am I Responsive? used for creating mock ups.
- Chrome Developer Tools was used throughout development to troubleshoot and whilst testing.
- Lighthouse Performance Testing used to check performance of site.
- W3C HTML Validator used to validate HTML code.
- W3C CSS Validator used to validate CSS code.
- JSHint used to validate JavaScript files.
- PEP8 online validator used to validate Python code.
- Mobile Friendly Test Google used to check mobile responsiveness.
- Lambdatest used to check browser compatibility.
- Unicorn Revealer used to check layout and element alignment.
Testing section for this project can be found here
This project used GitPod for developement, GitHub to storage the repository, Git for version control and deployed using Heroku.
The repository can be forked on GitHub, this creates a copy of the repository that can be viewed or amended without affecting the original repository. This can be done using the following steps:
- Login to GitHub and locate the repository as before.
- At the top right of the repository (under your avatar) locate the Fork button and click this button.
- There should now be a copy of the repository in your own GitHub account, which you can amend.
A clone of the repository can be made, which will create a local copy on your own computer. Changes can be made to this local copy and it will not affect the original repository. Follow these steps to clone the Sunrise Yoga repository.
- Login to GitHub and locate the repository as before.
- Click the button called "Code".
- Under HTTPS copy the link provided, in this case (https://github.com/anyahush/the-freefrom-cookbook).
- Go to Gitpod or whichever IDE you are using and open the Terminal.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type 'git clone' followed by the url you copied in step 3.
- Press "Enter" to create the local clone.
- You can refer to the GitHub documentation for more detailed information on the above process here.
- Follow steps in 'Create MongoDB Database', 'Environment Variables and Setting up the App' and 'Heroku and Deployment' for more information on what is required to run The FreeFrom CookBook.
A MongoDB account will be required for this.
- Create a new database in MongoDB
- Within database you can create collections. The database for this project was called cookbook and the first collection was called recipes.
- The collections within the database for this project are:
- allergens
- categories
- users
- subscribers
- recipes
- profiles
- Create env.py file containing sensitive information and add to .gitignore.
- To connect MongoDB database and app, got to MongoDB cluster page and select 'connect'.
- Select 'Connect Your Application'
- Select the correct driver and Python version
- Copy the string and add to env.py file, populating password and database name.
- The env.py should contain the following: secret key, MongoDB URI and database name.
- RandomKeygen was used to generate the secret key.
- Create a requirements.txt file and Procfile by using these commands.
- These are both required by Heroku. Commit and push your repository.
- If working in a local copy, open terminal window in IDE and type python3 app.py and run the app.
A Heroku account will be required for this.
- Log into Heroku account and create a new app.
- Create an original name and choose the region closest.
- Go to Deploy tab and select your chosen deployment method. For this project GitHub was selected.
- Enter repository name ("the-freefrom-cookbook) in the Connect to GitHub search box, and select the repository when it appears.
- Go to Settings and go to Config Vars and click to reveal Config Vars.
- Add environment variables, matching those entered into the env.py file.
- Go back to Deploy and select Enable Automatic Deploys. Below you can select to deploy a branch in the manual deploy section.
- Click to Open App.
- User Authentication and validating the Materialize select dropdown used from Code Institute's Task Manager mini project Code Institute Task Manager
- Regex pattern for users to submit an image url used from Moviewiki.
- Code for users to submit ingredients and method steps when creating a recipe and schema design was modified from Wanderlust Recipes
- Pagination code used from Sustainable Supper Club
- Pretty Pinted YouTube tutorial and code to capture checkbox activity into Flask.
- SQL Server Guide on MongoDb find multiple conditions to use multiple conditions in the search function.
- Pocket Bookcase for help with profile function and contact form modal.
- Stack Overflow used to style horizontal lines.
- Materialize used for styling and responsiveness throughout including card panels, tabs and collapsibles.
- Stack Overflow for help to create select all functionality on checkbox lists for both create and remove shopping list items.
- Stack Overflow used to help remove the background colour in Materialize active class on the navbar.
- Modified code from Stack Overflow for validating textarea in contact form.
- Modified code from All PHP Tricks for ensuring one checkbox is selected in ingredients and shopping list if form submitted and it is empty. Alert pops up to user to prompt selection.
Recipes added by the developer/ admin are a mixture of their own recipes, modified and used from various sites, as shown below:
Content about allergens from:
- Image on About page from Shutterstock
- Recipe images used to start the database used from Pexels
- Image used when user does not upload an image used from Pexels
- Hero image used from Pexels
- Code Institute and the Task Manager Project. This supported me a lot during initial stages of development.
- My mentor Precious Ijege for his time, support and feedback.
- The Code Institute tutor team, for all their support and feedback.
- My mini feb 2021 team on Slack for all their help, support and feedback.
- The Slack community.