This project is designed to be a online recipie store / cookbook that anyone can contribute to. It is intended for people who would enjoy sharing recipies, rating them based off how much they have enjoyed them.

It contains a text based search off each recipie title, and has a fully built pagination when more than 10 recipies are listed

I decided to keep a neutral colour scheme for the project, as it made the results etc.. look streamlined

In terms of the navigation of the site, instead of having multiple sidebars, all the neccessary links were added to one main navbar at the top, this allows access to the add a recipie page, results page via a search button, statistics page and a link back to the index page.

This gives the user access to all the main pages without having to scroll down the current page.

The search bar was moved to the right hand side of the navbar as a inline form, this was made since there was no sense in having a tiny one field form taking up 75% / 80% of the page. It also allowed it to be more easily displayed on mobile devices.

I dropped the planned carousel / tab layout in favor of a series of cards showing the most liked recipies. The links in the sidebar were moved to the main navbar, in order to allow them to be shown on mobile view across all pages

Since there was no need for a sidebar, and all potential links were moved to the navbar (See the general section above for reasoning for this change). The form section instead went 100% width but was centralised on the page.

The country of origin field was not implemented, therefore I shifted the allergin information to where this information would have been displayed, and instead added a 'View more information' button in the bottom left of the result hit.

The planned sidebar was switched over to the right hand side of the page, with the like/dislike buttons being moved above the recipie actions button.

The ingredients / instructions / implements was changed to be a tab set below the description

The planned sidebar was removed since the main links appear in the navbar, instead the graph section appears across the whole page.

• Results filtering
  • The project includes a custom made allergin filter, which allows for multiple allergins to be excluded from the result set. This could be expanded on to include other fields, but due to time constraints this was ommited (See Features left to implement section)
• Custom pagination
  • The project includes a pagination which takes effect once more than 10 recipies are displayed.
• Flash messaging
  • A success/error message is displayed to the user when they add/update a recipie, in addition if they try to access a recipie that does not exist, an error message will be displayed.

• Schema Validation of Allergins field
  • This was initially included, however due to time constraints and fustration I removed it in order to get the application as a whole working, otherwise each time a record was added or updated, it threw a 'Document failed Validation' error.
• More graphs on the statstics page
  • Considering the fact that a created date and updated date is stored within the database and written to the 'collection.json' file, there is ample scope to add a created per month graph.
• More filters
  • There is room to add extra filters to the results, for example a list of pre-sent implements, which would replace the 'recipie_implements' field, as the filter would not be able to support free text in it's current state.
  • In addition, there is scope to add the 'type of meal' and 'difficulty' fields as filters.
• Image upload - limit file types
  • At this time the image upload does not check what file type is being uploaded.

• HTML5
  • HTML5 is the basic building language of all websites, it allows for structure
• CSS3
  • CSS 3 is used to describe web pages, via color, font and other styling. In the project it is used for styling the elements on the page.
• JQuery
  • The project uses JQuery to simplify DOM manipulation.
• FontAwesome
  • The project uses the free version of FontAwesome in order to add extra icons to the site
• SASS
  • SASS was used to add extra functionality to CSS, it allows for nested statements to be used, which in turn made the files easier to read.
• JQuery TE
  • A lightweight jquery text editor used to enable WYSIWYG (What you see is what you get) functionality on the recipie form
• d3.js and dc.js
  • Used to implement the graphs in the statistics page

The table below shows the various validators used and there results

Automated testing is in place for the form submission page. It checks to see if the expected type is what the current type is. i.e is the recipie_title a string?

It updates the testresults.txt file each time a record is added or updated with the test results.

Test Results txt file

All screenshots taken by emulating an iphone X

The site is available to view via here

There are multiple steps to deployment, which are detailed below

The site utilises MongoDB, a document store based database management system.

In order to set it up so that it can be used by the web application, follow the steps below

NOTE: The steps below assume that you have already created an account on MongoDB Atlas and know how to set up a Project and Cluster. If you do not, please follow the steps outlines in https://docs.atlas.mongodb.com/getting-started/

1. Click on the 'security' tab

2. In the 'MongoDB Users' section, click on 'Add User'

3. In the popup that appears, enter a username and password for the new user, leave the permissions as 'Read and Write to any database'

4. Next click on the 'IP Whitelist' option and then click on the 'Add IP address'

5. In the popup that appears, click on 'allow access from anywhere' button, otherwise the database will only be accessible from certain IP addresses, then click on 'confirm'

The collections are now ready to be created.

Create a connection to the mongo shell, this is done by clicking on the connect button, then clicking on the 'Connect with the Mongo Shell'

Follow the instructions given if you do not have the shell installed, otherwise, click on the copy button next to the terminal command, and then paste it into a terminal program of your choice

Once you have entered the password for the user set up in step 3, copy and paste the text held in mongodb_create_recipies_collection.txt

• In a terminal, the git repository was initiated via the git init command

• The repository was linked to a .git file on github via

  • git remote add origin https://github.com/Lowe54/milestone3_project.git
  • git push -u origin master

• After each change, the following commands were used to push the changes to the git repository

  • git add * - This adds all changed files to staging
  • git commit -m "MESSAGE HERE" - Commits the work with a brief message as to what has changed
  • git push - This pushes the work to the git repository, after entering your github username and password

• In order to clone the github repository, type the following command in a terminal
  • git clone https://github.com/Lowe54/milestone3_project
• If you wish to change the default directory to where the project is checked out to, use the following command
  • git clone https://github.com/Lowe54/milestone3_project *FolderName*

This project in windows runs on a virtual environment, in order to generate this, different commands need to be used depending on the version of python running on your operating system. The flask documentation gives detailed steps on this, and can be found at http://flask.pocoo.org/docs/1.0/installation/#virtual-environments

Once your virtual environment has been activated, enter pip install -r requirements.txt, this will then install all requirements needed, then enter flask run, this will start the development server.

Note : If the requirements.txt file needs to be re-generated, enter pip freeze --local > requirements.txt

1. If you already have an heroku account, please go to step 4 after signing in
2. Go to https://signup.heroku.com/
3. Fill out the registration form
4. Once on the app overview (See below), click on 'New -> Create new app'
5. Enter an app-name and choose the region, then click on 'Create App'
6. Now choose the deployment method, there are 3 options a) Heroku CLI (Command Line Interface) b) GitHub Deployment c) Container Registry (Docker)

For option 'a', follow the instructions given, for 'b', you will be asked to link to a github account and for 'c', again follow the instructions given.

For this project, I went with the github deployment for simplicity, as it only meant one push per deployment.

Once linked, You can enable automatic deploys based off a branch Or perform a manual deployment

In order for the app to run however, certain environment variables need to be set.

From the application overview page, click on 'Settings'

Then click on 'Reveal Config Vars'

You need to add the following 5 variables:

• IP -> This is the IP, set it to 0.0.0.0
• PORT -> Can be any value you want, I set it to 5000
• SECRET_KEY -> Random string
• PASSWORD -> Your MongoDB password for the user set up, not your password to login to Mongo Atlas
• BASE_PATH -> Base Upload path (./static/images)

The styles of this site are in SASS (.scss/.sass) format, in order to change the styles you will need to enter the following command into a terminal.

If you get an command not recognised error, please follow the steps here

sass --watch static/sass/:static/css

https://allergytraining.food.gov.uk/english/rules-and-legislation/ for providing the 14 allergin options present in the application

Easy Meatballs recipie - Betty Crocker for the meatball image

Fish and Chips - Wikipedia for the fish and chips image

Beefburger - BBC good food for the burger image, which was uploaded on the live site