My Indian Recipebook is a web based application that can be used to share recipes for Indian cuisine. Users are able to add their own recipes, edit & delete them, read other user's recipes and add recipes to their favourites.

Please use the below log in details when testing the 'admin' user functionality.

1. UX
• Wireframes
• Target Audience
• User Stories
• Design
• Defensive Design
• Typography
2. Database
3. Features
• Existing Features
• Features left to implement
4. Technologies Used
5. Testing
6. Deployment
7. Credits

• The audience that this application will be aimed at will be avid home cooks who have a particular interest in Indian Cuisine.

1. As a user, I want to be able to view all of the recipes and to be able to search for recipes containing a specific word.
2. As a user, I want to be able to see the top three rated recipes at any given time.
3. As a user, I want to be able to see the type of dish, ingredients, method and time to make the recipe.
4. As a user, I want to ability to create a profile by entering a username and password.
5. As a registered user, I want the ability to log in and log out of my account.
6. As a registered user, I want to be able add recipes so that other user can view them.
7. As a registered user, I want to be able to see all of my recipes via my Profile and have the ability to edit & delete them if required.
8. As a registered user, I want to be able to add other user's recipes to 'My Favourites' and have easy access to them through my Profile.
9. As a registered user, I want to be able to vote (upvote or downvote) on other user's recipes.
10. As the admin user, I want to be able to remove and edit any recipe regardless of which user added it to the application.

• All of the headings are the same size, colour & font and the colour scheme is the same throughout.
• Also all of the buttons have the same colour schemes and sizes.
• By using the card class from materialize, whenever the recipes are shown, the stlying and spacing is the same.
• Again with the collapsible class, all of the recipes will be displayed in the same format.
• To ensure that all of the recipes show an image, I have added a generic image to be displayed if an image is not provided by the user. This will allow the design to be the same for each recipe that is added.

Defensive design for this application was built into a lot of the functions as well as the templates. This means that only registered user can access certain parts of the application and edits can only be made by the relevant people.

• An IF statement on the base template means that unless a user is logged in, they only have access to the following pages: Home, Recipes, Log In & Register. They are able to view recipes but cannot vote or add them to favourites.
• The registration form requires a unique username & password to be provided to ensure users cannot duplicate log in details. The password will be hashed before being entered into the users collection for added security.
• The Log In will only be successful if the username & password match those provided in the users collection.
• To ensure only the author of each recipe can edit or delete them, the buttons to do so only appear on their recipes once they are logged in and once they are on their 'My Profile' page.
• To ensure that an admin user has complete control over the content, if they are logged in, they are able to delete and edit any recipe from the 'Recipes' page.

2 Google Fonts were used in this project:

1. Delius Unicase - Logo
2. Arima Madurai - Main Body text & headings

This collection was originally used however after improvements were made to the code it was no longer required so is no longer referenced in the app.py.

1. NAVIGATION
2. VIEW RECIPES
3. SEARCH RECIPES
4. REGISTRATION
5. LOGIN
6. LOGOUT
7. ADD RECIPE
8. EDIT RECIPE
9. FAVOURITES
10. LEADERBOARD

1. I would ideally like to connect to a supermarket API which is could then link to the ingredients from each recipe to display the prices of these items and give users the option to purchase them from the recipecard page.
2. I would like to add additional functionality to the add & edit recipes form. I would like the user to be able to add the method and ingredients as a separate entry for each item. But I would like them still to be entered as one value in the MongoDB database. This would then allow me to parse the ingredients & method onto separate lines for each entry made by the user.
3. I would like to add additional security when deleting recipes such as an extra check to ensure the user wants to delete the item.
4. As mentioned in the 'Manual Testing' section, I would like to eliminate the votes collection and instead insert the votes directly into the recipe document in the recipes collection. So, everytime a user either upvotes or downvotes for a recipe, it will add to the count for each in the recipe document. I could then change the leaderboard functionality to pull the recipe with the highest number of upvotes.
5. I would also like to improve the 'edit_recipe' functionality to make it easier for the user to edit their recipes. When they click on the 'edit recipe' button they are currently directed to the edit form which is a blank form. I would like the form to already contain all of the details of the recipe that they are trying to edit so that the user does not have to re-enter all of the details. Currently it will take the user a long time to re-type all of the details especially if they only need to edit one details, for example, a quantity for one of the ingredients.

• HTML5
• CSS3
• JavaScript
• Python3

• JQuery
• Materialize - Used to provide page structure, Navbar design and form components. Also used to provide generic styling.
• Font Awesome - Icons for forms and styling.
• Google Fonts - Used to create a look in keeping with the website aim and to create uniform styling throughout.

• Flask Framework
• PyMongo
• Split
• Paginate
• werkzeug.security
• bson
• Counter
• Random

• MongoDB
• Git
• GitHub
• Heroku

• W3C HTML Validator
All pages of HTML content have been checked by the HTML validator and have passed.
• W3C CSS Validator

• PEP8 Compliant

If you would like to deploy this project for yourself please see below the steps I followed to deploy and you can do the same:

1. Create your new repository (I used GitHub) and then download or clone the following link:
2. You will also need to create a cluster in MongoDB and a new collection.
3. This site is currently deployed on Heroku using the master branch on GitHub. You can deploy this project remotely using the following steps:

   Deploying with Heroku

   1. Firstly you need to create a requirements.txt file. This is used by Heroku to install all the required dependancies that are needed to run the application. To create the requirements.txt file you will need to enter the following into the terminal:

      pip3 freeze --local > requirements.txt You can view the requirements.txt file for this project here to ensure all of the requirements are present in your own file.

   2. Secondly, Heroku requires a Procfile which tells it what type of application is being deployed and how it should run it. To add the Procfile you will need to enter the below into the terminal:

      echo web: python run.py > Procfile

      (Please make note that the 'P' in Procfile should be capitalized)

      You can view the Procfile for my project here: Procfile

   3. You will then need to sign up for a free Heroku account or, if you already have one, you will need to sign in. The link to create your account is: https://signup.heroku.com/
   4. Once signed in to your Heroku account, you will need to create a new app ensuring you select the region closest to your location.
   5. You then need to choose your deployment method in the Deploy section. If you have created your repository using GitHub, you can connect to the specific repository by searching for the repo-name. If you cannot connect via GitHub, you can connect using Heroku Git (follow the instructions provided on Heroku).
   6. Once connected, you can 'Enable Automatice Deploys' so if you make any further changes and commits, it will automatically update and deploy a new version of the application.
   7. In Heroku click on the 'Settings' tab. In the Config Vars section, click on 'Reveal Config Vars' which is used to configure the environmental variables. You will need to set up your env.py file in order to complete this section. Setting up your env.py file can be done as follows:
      • Create a new file outside the folder structure called env.py.
      • You will need to type 'import os' at the top of this file.
      • Then the environment variables need adding as below:
        os.environ.setdefault("IP", "0.0.0.0")
        os.environ.setdefault("PORT", "5000")
        os.environ.setdefault("SECRET_KEY", "insert your secret key here")
        os.environ.setdefault("MONGO_URI", "insert your connection string here")
        os.environ.setdefault("MONGO_DBNAME", "insert you database name here")
        The SECRET_KET can be anything you choose.
        The MONGO_URI connection string can be found by doing the following in MongoDB:
        • Click on the 'Overview' tab
        • Click on the 'Connect' option
        • Select the 'Connect your application' option
        • Select 'Python' as the driver
        • You will then be provided with a connection string
        • Paste the connection string into MONGO_URI variable
        • Ensure you update the sections in capital letters with your own information e.g your password, your cluster name and your collection name: mongodb+srv://myRoot:[email protected]/DATABASE-NAME?retryWrites=true&w=majority".
   8. Once your env.py file is created, go back to the Config Vars in Heroku and add the IP, PORT, SECRET_KEY, MONGO_URI & MONGO_DBNAME with the correct values as per your env.py file.
   9. Finally, go back to the 'Deploy' tab on Heroku and in the Manual Deploy section chose the 'main' branch and click 'Deploy Branch'. Once the application has been built, you will receive a message stating 'Your app was successfully deployed' with a link to view the app.

• Navbar & side Navbar taken from Materialize version 1.0.0. This includes the Jquery used to operate the sidenav as well.
• Card class taken from Materialize which includes a floating button.
• Form components HTML & CSS classes taken from Materialize including the Jquery to operate.
• Collapsible component taken from Materialize including the Jquery.
• Pagination implemented using code from https://stackoverflow.com/questions/54053873/implementation-of-pagination-using-flask-paginate-pymongo.
• Google Fonts utilized for all font styles within the project.

• MongoDB Documentation used to help implement the search function and the pull method used in removing an item from favourites.
• Stack Overflow - Implementation of Pagination which was used to implement the pagination on the 'recipes' page.
• Tutor Support assisted with adding the recipe ObjectId into the 'favourites' array and then retrieving the recipe using the ObjectId.
• Code Institute Turtorials were used for reference when creating functions.
• Task Manager Mini Project. Login, Register & Log Out functions taken from this project and just modified to fit in with my milestone project. Other functionality was based around Task Manager function such as the 'add recipe' and 'edit recipe' functions.
• Geeks for Geeks - Python Counter used to help implement the Counter functionality in the voting function.

• Font Awesome used for all icons and symbols.
• Generic Image for recipe found at https://media.istockphoto.com/vectors/fork-knife-icon-vector-id468611140?k=20&m=468611140&s=170667a&w=0&h=vv4BkhlRA35rC-CkIvRBf-r4X9kcFSEQGnzNiJOFH5s=
• Image to show responsive design from http://ami.responsivedesign.is/#