Milestone Project 3  

Table of Contents

1. Purpose and Value
2. Site Pages
   1. 'Home' page
   2. 'Log In'
   3. 'Join' page
   4. 'Profile' page
   5. 'Add Recipe' page
   6. 'Edit Recipe' page
   7. 'Delete Recipe' button
   8. 'Log Out' menu item
3. Responsivity
4. UX (User Experience)
   1. Strategy Plane
   2. Scope Plane
   3. Structure Plane
   4. Skeleton Plane
   5. Surface Plane
5. User Stories
   1. First Time User
   2. Returning User/Frequent User
   3. Admin User
6. Testing
   1. User Testing
   2. Defensive User Testing
   3. App Testing
   4. Bug Fixes
7. Validation
8. Design
   1. Wireframes
   2. Colour Palette
   3. Images
   4. Typography
   5. Current Features
   6. Future Features
9. Technologies
   1. Languages
   2. Frameworks and Libraries
10. Deployment
11. Credit and Acknowledgements
    1. Mentor
    2. Code
    3. Commits
    4. Images
    5. Text Content

Kooky Kids Recipe App - Milestone Project 3

GitHub Repository: https://github.com/Saraholoughlin5/Milestone-Project-3

Heroku App: https://milestone-3-kids-recipes.herokuapp.com/

Purpose and Value

The purpose of the Kooky Kids recipe app is to display easy to follow, cooking-free recipes, aimed at children, young teenagers and their parents or caretakers.
The recipes are easy to find and view, and easy to follow.
Users can read each recipe without logging in, however, if users do join the site (create a user profile) and log in they can then also create, edit and delete their own recipes. An Admin account can police the site and edit or delete any unsuitable additions. Values include provision of user ability to document and edit their own recipes, visible to them on their own Profile page. The site is visually appealing to younger users, and this aims to encourage repeated use. As per one of the project objectives, users can use the site to create, read, edit and delete content (perform CRUD calls to the Mongo database).

Site Pages

'Home' page

The 'Home' page contains the navigation menu (side navigation menu in mobile view), a 'Welcome' message, a search bar that enables users to search the recipe ingredients, the current list of recipes displayed in a collapsible accordion element and social media links (via a floating action button on large view, and a footer in medium and small views). Users can click on the name of any recipe to view it in full (invited to do so by use of a caret symbol that precedes each recipe title). Users who are logged in can see an 'Edit' button on their own recipes, which identifies their recipes and allows them to make changes. Users cannot delete recipies via the homepage, only via their Profile page.

'Log In' page

The 'Log In' page contains a card-panel which displays the 'Username' and 'Password' fields, a 'Submit' button and a link to sign up via the 'Join' page. The background image is prominent in this view, which invites inspection of the imagery and appeals to the target demographic.

'Join' page

Similar layout to the 'Log In' page. This page contains a card-panel which displays the 'Username' and 'Password' fields, a 'Submit' button, and a link to the 'Log In' page, should the user have a profile already set up.

'Profile' page

The 'Profile' page displays a 'Welcome' flash message on login, information related to the page contents, the list of recipes submitted by this user, and 'Edit' and 'Delete' buttons per recipe. Clicking on each recipe title displays the recipe details in full.

'Add Recipe' page

The 'Add Recipe' page can only be accessed when a user is logged in (if the url is updated to try and cheat this (e.g. user is logged out), a message is displayed to notify the user that they have no access to the page. The page displays some relevant text information, followed by the 'Recipe Details' form. The form contains inputs, textareas, select options field and a date-picker. A 'Submit' button is also displayed. Once a recipe is submitted, the user is redirected to the 'Home' page to view their submission.

'Edit Recipe' page

The 'Edit Recipe' page can be accessed in two ways; via the 'Edit' button on the collapsible headings per recipe on the homepage, and also in the same place on the user's 'Profile' page. The user must be logged in to edit their recipes. Admin can edit their own recipes via the homepage, but can edit all user's recipes via their Admin 'Profile' page.

'Delete Recipe' button

The 'Delete Recipe' button is only accessible on a logged in user's 'Profile' page. It is available to the right of the 'Edit' button on the collapsible header (recipe title). When the 'Delete' button is clicked on, a modal is displayed to confirm with the user that they want to permanently delete their recipe. This prevents accidental deletion of the user's submission. Once a recipe is deleted, the user is redirected back to their 'Profile' page, and they can confirm that the recipe is indeed no longer listed. It is also removed from the list on the homepage. Admin can delete every user's recipe via the Admin 'Profile' page.

'Log Out' menu item

The 'Log Out' menu item can be clicked to end the user session. A flash message alerts the user that they have been successfully logged out of their profile. The 'Log In' page is displayed once more.

Responsivity

The app is responsive on a variety of screen types and sizes. It has been checked via the browser 'Inspect' tool list of responsive devices, both portrait and landscape. It has also been checked on a variety of browsers, including Chrome, Microsoft Edge, and Safari. Materialize classes and helpers were used to ensure that each page looks and behaves and expected on each screen size. The mock-ups display various sections of the 'Home' and 'Log In' pages:

UX (User Experience)

Strategy Plane

The Kooky Kids app is designed to be easy to use and to appeal to a youth-related demographic, from small children to teenagers and parents. It could, for example, be adapted for use in schools or summer-camps, or as part of an initiative to encourage independent or healthy eating amongst children and young adults.
The background image and colour scheme are fun and draws the correct age group in, and are dynamic enough to appeal to a variety of users. It is clear to the user how the site operates, and each feature is easy to use.

Scope Plane

The app is simple to use, and each feature is clear and straight-forward when displayed to the user. Visitors can view all recipes on the homepage, but cannot edit or delete them. Users can click on the ‘Log In’ or ‘Join’ menu options to start submitting recipes. The can edit or delete their recipes easily via the buttons provided. A floating button can be clicked on to view the social media links (visible in the footer on small and medium screens).
Relevant flash messages are also displayed for key functions, such as joining the app, logging in or out, updating or deleting a recipe, or as a warning when e.g. a username is already taken. The recipe display (collapsible) is intuitive and provides the expected information.

Structure Plane

The app is structured so that the layout is consistent on many of the pages. The background image is the same across all pages. The 'Log In' and 'Join' pages are uniform, and present clearinstructions for the user. The 'Home', 'Profile', 'Add Recipe' and 'Edit Recipe' views are consistent and provide enough information for the user to be comfortable with navigating each step of each page. The background image is also consistent throught the app. Links and buttons work as expected.

Skeleton Plane

Balsamiq wireframes were used to plan the initial layout of the app (desktop and portrait mobile view). The app appears similar to the wireframes, but looks much more vivacious due to the addition of the background image and related colour scheme.
Layout of the app evolved during the creation period.

Surface Plane

The colour scheme of the app was drawn heavily from the background image, which suits the them of the database content very well. The panels, buttons and borders are very subdued and mainly black and white, but the colour in the background image and navigation bar/footer/action buttons counteract this simplicity.

User Stories

First Time User

• I am a 10 year old boy looking for some fun, easy recipes that contain ingredients I like
• I am a mother of 3 and I want to get my children involved in some hands-on food preparation
• I work at a preschool and we do not have access to a cooker or oven, but the kids have expressed an interest in preparing their own food
• It's clear from landing on the Kooky Kids homepage that I am the intended user of the site
• I like that I can see all of the recipes without having to create a profile page
• I also like having the option to create a profile page so that I can add my own creations
• The recipes are clearly laid out and easy to follow
• The background image is fun and inviting
• Joining the Kooky Kids community is quick and easy, and I can immediately add my own recipes
• Adding my own recipes is very easy, as the form contains helper text beneath each field, as needed
• Finding my own recipes after adding them is also easy, as instructions are clear and the recipe appears where expected
• Editing my recipe(s) is possible with the click of a button
• Deleting my recipe(s) is also possible with the click of a button, and only via my profile page
• I feel secure that I will not delete a recipe in error, as there is a confirmation modal supplied
• I can immediately identify which episodes are mine on the homepage, as the 'Edit' button is present for my recipes only (when I am logged in)
• Logging in and out is intuitive, and flash messages confirming these actions are reassuring
• Flash messages are also available when I add or edit a recipe
• I can see the name of the user that submitted the recipe, and the date, beneath the recipe image
• I can search the recipe ingredients without having to trawl through each recipe's contents
• I can immediately see if allergens are present in a recipe, as there is an icon and tooltip to alert me
• If I change the URL to try to access the 'Add' or 'Edit' pages when I am logged out, or for that of a different user, I am prevented from doing so (warning message displayed)
• I can find the app's social media links with ease
• I can view and use the app without error on a variety of devices, browsers and screen sizes

Returning User/Frequent User

• I can view all recipes on the Kooky Kids homepage before I log in
• I can log back in to my profile with ease
• I can immediately identify my recipes on the homepage after logging in
• I can edit or delete my recipes
• I can update the allergen status of my recipes and other details by clicking on the 'Edit' button
• I can change the image of my recipe for a better one!
• I can log out with ease
• I can view the app on a variety of devices, browsers and screen sizes

Admin User

• I can log in to my Kooky Kids account with ease
• I can view all recipes on the homepage
• My own recipes are easily identifiable on the homepage after I log in ('Edit' button present beside the recipe title)
• If I navigate to my profile page I can see that all of the recipes submitted to the app are visible
• The 'Edit' and 'Delete' buttons are also available and functional
• I can easily police the site via my profile page, to either update or remove a non-compliant Recipe

Testing

User testing was employed to ensure that the site operates as expected when deployed. The navigation and functionality was checked for each page. Links were also tested.

App testing was carried out stages when setting up the app. Browser and device compatability was also checked. Please find details below.

Testing

User Testing

Three users were created: Sarah, David and Admin. Admin can edit and delete all recipes via their Profile page, all other users can only edit or delete their own.

1. Username: Admin Password: Administrator
2. Username: David Password: David
3. Username: sarah Password: sarah

Defensive User Testing

App Test

Bug Fixes

Any bugs encountered were easily rectified based on the feedback displayed in Werkzeug pages, and by manually re-checking code for minor errors (indentation errors, symbol errors or absence).

Validation

HTML The HTML code was validated at https://validator.w3.org/. See results: HTML validated.
CSS The CSS code was validated at https://jigsaw.w3.org/css-validator/. NOTE: The lone error displayed belongs to Materialize. See results: CSS validated.
PEP8 Python code was validated for PEP8 compliance at http://pep8online.com/. See results: PEP8 validated.

Design

Wireframes

The app display layout (desktop/mobile) was planned using Balsamiq (www.balsamiq.com). These were the initial wireframes created at the start of the project, and the final views have evolved during creation of the app.

Color Palette

The colours for the app navigation menu, recipe information, forms and floating action button were inspired by the dynamic and modern background image. A Paint colour-picker was used to identify the RGP components of some of these colours, and some slightly darker colours were also added and used on the site. The colour palette was prepared at Coolers website:

Images

The images on the site were sourced from Pexels (www.pexels.com) and Unsplash (www.unsplash.com). The background image was found at Ohh Deer blog (https://blog.ohhdeer.com/). Further details are available in the Credits & Acknowledgements section below. Even though the Materialize framework provides it's own icons, Font Awesome was used for the nav menu, recipe and social media icons in the app. The recipe images are unpixelated and responsive so they are not stretched. They have been allocated a max-height attribute so that are not too large, and they fit comfortably in the collapsible body, whether portrait or landscape. As only one recipe can be viewed at a time, uniformity of image layout is not too strict. Without the background image, the app is mainly made up of white card-panels and collapsibles. This is testament to the visual power of a good background image!

Typography

Google Fonts were used for the text on the app. 'Pattaya' font was used for the navbar and sidemenu brand logo/text, page headings and form titles, and footer headings. 'Montserrat' font was used for the main text of the app, including navigation menu itmes, general page text, form content text, buttons and links.

Current Features

• The app contains collapsible accordion elements which provide ease of use when viewing recipes
• The app also contains flash messages which alert the user to actions performed
• A search bar is present with 'Clear' and 'Search' functional buttons
• 'Edit' and 'Delete' buttons are also present and functional
• Easy-to-use forms are available when users want to add or edit their own recipes
• A floating action button is availble on large screens to allow users to easily access the site-related social media links
• For small and medium screens the floating action button was too intrusive, especially when trying to view, add or edit recipes, so the social media links were moved to a footer
• Admin can edit or delete all user recipes from within their own profile page, which means unsuitable recipes will not remain on the site
• 'Join' and 'Log In' pages contain links to one another for ease of use for new users

Future Features

• 'Delete Profile' feature
• Contact Form
• Live social media accounts

Technologies

Languages

HTML, CSS, JQuery, Python were used to build, style and add functiality to the Kooky Kids app (Milestone Project 3).

Frameworks, Libraries and Scripts

GitHub
Cloud-based repository service that hosts the website’s source files

GitPod
Development environment

Heroku
Cloud platform used for the deployment of the app

Materialize v1.0.0
Provides pre-defined classes for elements of a website.

Flask
Micro web framework written in Python.

Flask PyMongo
API that communicates with MongoDB.

Jinja
Engine that passes data to a placeholders in a template.

Werkzeug
WSGI web application library

Font Awesome
Provides free icons that can be restyled with CSS.

Google Fonts
Provides links to a large variety of fonts and related compatible paired fonts.

jQuery
JavaScript library

randomkeygen
Random generated secure password

Deployment

Deployment and version control for the app was carried out with GitHub and Heroku.

Steps

1. Create a new database in Atlas MongoDB (click on the 'Collections' button followed by 'Create Database' in an existing Cluster)
2. Add collections to the database, for example, 'users', and add key-value pairs for each collection
3. Create a project repository in GitHub using the Code Institute template, and make sure to check the 'Include all branches' tick-box
4. Open repository in Gitpod
5. Create 'app.py', the main app Python file
6. Create the 'env.py' and 'gitignore' files in Gitpod to store and hide sensitive data
7. Import the OS and set the required defaults in 'env.py', including a randomly generated 'Secret Key' password
8. Import the OS again in 'app.py', as well as Flask and the 'env' package
9. Create a Flask instance at the bottom of the 'app.py' file to ensure the app is properly configured, and enter the required 'host', 'port' and 'debug' values
10. Log in to Heroku and click on the 'New' button to create the new app
11. Enter the app name and choose the region, then click the 'Create app' button
12. Click on 'GitHub' in the 'Deployment Method' section, then enter your GitHub name and the project repository name in the 'Connect to GitHub' fields provided
13. Once connection is confirmed, click on the 'Reveal Config Vars' button in the 'Config Vars' section
14. Enter details that match those of the 'env.py' file, then click 'Hide Config Vars'
15. Push 'env.py' and 'app.py' files to the GitHub repository using bash commands in the Gitpod terminal
16. Create 2 new files in Gitpod, 'requirements.txt' and 'Procfile', then add, commit and push these files to GitHub
17. Return to Heroku and click on the 'Deploy' tab, then click on the 'Enable Automatic Deploys' button followed by 'Deploy Branch'
18. Heroku will display a 'Your app was successfully deployed' message, confirming that it is receiving code from the GitHub repository
19. Wire up the MongoDB database to the Flask app by installing 'flask-pymongo' and 'dnsython' and update the 'requirements.txt' file also
20. At the top of the 'app.py' file, import PyMongo and ObjectId, and add further configuration ('MONGO_DB', 'MONGO_URI' and 'SECRET_KEY')
21. In MongoDB, click on the Cluster 'Overview' tab and click 'Connect'- 'Connect your Application', choosing 'Python' and the required version
22. Update the database name and password (Database Access page)
23. Copy the string to the 'MONGO_URI' value in 'env.py' and ensure the database name and password is also updated
24. Copy this completed string to the 'Config Vars' section in Heroku ('MONGO_URI' field)
25. Set up an instance of PyMongo (mongo = PyMongo(app) in 'app.py', after the imports and configuration, to ensure Flask and MongoDB can communicate
26. Import flash, render_template, redirect and request, and render a template to test the connection to the database
27. Add, commit and push updates to GitHub. Creation of the app can now commence
28. To view the app in Heroku, log in, click on the app name and click on the 'Open App' button. You can also run "python3 app.py" via the GitPod terminal, and open in browser from the resulting port
29. For final deployment, ensure that 'debug=False' in 'app.py'

Credits and Acknowledgements

Mentor

Thank you once again to my mentor Spencer Barriball for his help, reminders, guidance and encouragement.

Code

The app was created by referring to the Code Institute Backend Development mini-project. Python functions, Flask and Jinja code was customised to ensure the app features functioned as desired. Materialize was used to provide elements and classes and JQuery initialisations. Materialize helper classes were also used instead of media queries for responsivity.

Commits

After gratefully receiving feedback for previous projects, I have endeavoured to provide more frequent and relative commits, with the commit messages expressed in the imperative mood.

Images

The background image was sourced from: https://blog.ohhdeer.com/home/wallpaper-of-the-month-may. The recipe images were downloaded from Unsplash and Pexels:

Text Content

Recipes from https://www.allrecipes.com/ were used as source material. I provided all of the remaining text for the app.