Milestone Project 3: Milly's Kitchen Christmas Recipes

The deployed website can be accessed from here (Heroku): [https://milestone-project3.herokuapp.com/]

Goal of the website:

The website is to create a web application that allows users to view some of the recipes but also to add their own to the database and also to make some changes by editing and deleting the recipes.

Purpose of the Project:

The project purpose is to demonstrate accessing, manipulating (through CRUD operations) and displaying data retrieved from a NoSQL database. The website utilises a MongoDB database together with Python code to access and manipulate the data. Visualisation is done with HTML, CSS and JavaScript where required, utilizing the Flask framework.

UX

This website provides the relevant functionality to satisfy the requirements, in detail (guided by user stories/requirements):

• Provide the opportunity to view the food recipes by seeing how it is prepped, cooking time, ingredients etc
• Provide the opportunity to follow social links to see demonstrations of like for like recipes being prepared and cooked.
• Provide the opportunity for the site owner to create, update and delete categories as needed for the site.

User Stories:

• As a new cook, I want to be able to see some of the recipes on offer and how one goes about cooking it.
• As a visitor of the site, I want to be able to add new recipes that I believe would be worthy to the site.
• As a visitor of the site, I want to be able to edit or delete recipes that I have contributed to the catalogue.
• As a visitor of the site, I want to be able to recommend this website to other people who are enthusiastic about cooking.

Wireframes

Wireframes for the mobile and desktop was done through Balsamiq. Both versions are listed below:

Mobile: here

Desktop: here

Design considerations:

It was decided to style the website with a elegant and cosy feel:

• Complementing yet contrasting colours.
• Multi page layout
• Simple and logical navigation.

The design utilises the Bootstrap grid system, containers and components responsive to different screen sizes and devices, styled with the Bootswatch Lux theme.

This site is limited to the use of HMTL, CSS, JavaScript, Flask, Python and MongoDB.

Features

Existing Features

• Feature 1 - Navigation: Simple navigation of the site that jumps to the selected section on the site (at top of each page).
• Feature 2 - Add Recipe: Ability to add a recipe
• Feature 3 - Edit Recipe: Ability to edit the recipe
• Feature 4 - Delete Recipe: Ability to delete a recipe
• Feature 5 - Input ingredients: Ability to add ingredients
• Feature 6 - Input prep time: Ability to add prep time
• Feature 7 - Input description: Ability to add a description of the recipe
• Feature 8 - Input method: Ability to add as much content for how the recipe is cooked and served.
• Feature 9 - Social Media: Links to social media platforms.

Features Left to Implement

• Feature A - Images for the recipes
• Feature B - Newsletter sign up to stay informed of new additions, improved functionality.

Technologies Used

The following languages, frameworks, libraries, IDE, repositories and tools were used for this website:

* HTML5 - utilises the HTML language and sematic elements for basic layouts and functions.

* CSS3 - styles using CSS for classes and specific elements

* Bootstrap - website created using the Bootstrap grid system and components using the CDN to create layout for responsive design.

* Font Awesome - for icons used for social media links and in contact information

* JQuery - used for responsive navbar

* Popper.js - also ised for responsive navbar.

* GitHub - for hosting of project repository

* Heroku - for hosting of this website

* W3C CSS Validation Service - this project was tested for checking conformity and validity of css content.

* W3C Markup Service - this was used for checking conformity and validity of html.

Testing

Testing for this site was performed as follows:

Code Validation:

The index.html file was not passed through the W3C HTML Validation site, due to the use of the Flask Framwork, many errors and warnings raised. The style.css file was tested using the W3C CSS Validation site, with no errors reported. The style.css file was run through the Autoprefixer CSS Online tool.

Deployment

This project is deployed on Heroku and GitHub and is accessible as follows:

• Website: Heroku
• Repository: GitHub

Credits

Content

• Recipe ideas taken from Waitrose website (purely for educational purposes)
• A lot of help with code was from numerous tutors, my fellow peers, our tutor Xavier with numerous instructional web videos
• Code Institute tutorial videos used a lot to help with content
• Certain code elements reused from my previous projects
• Reaching out to the Slack Community and Slack Overflow etc

Acknowledgements

• I would like to thank my mentor, Brian Macharia for input provided during the development of the site.
• I would to thank all the Code Institute tutors
• I want to thank my main tutor Xavier for a lot of help
• To my fellow peers in my group who guided me also
• To a lot of people in the Slack community also