search

MHickey2 / Wannabe-Healthy

Health information and recipe website
0 stars 1 forks source link

readme

Wannabe Healthy: Milestone 4 Project

AmIResponsive


Introduction

Wannabe Healthy is my 4th Project for the Code Institute and it is a Full Stack Website using the Django Framework. The website's content deals with health related topics. It encompasses a Blog with various categories and a Recipe section which concentrates on health enhancing recipes. When logged in a User can add, edit or delete their own Blogs/Recipes. A logged in User can like/unlike a post/recipe or add comments. A logged in User can also view and Update their own Profile with an uploaded image and Bio information.


Visit the Wannabe Healthy Site

Visit the Wannabe Healthy Repository


Table of Contents

1. UX Strategy


1. The Business Goals of the Website:

No commercial goals, but the site's goal is to to provide a resource for those seeking to improve their health and learn more about various health topics and they can also browse healthy Recipes.


2. The Target Customer:

3. Site User Profile

The user is really anyone who wants to achieve a healthier lifestyle. They can not only view present blogs and recipes but can play more of an active role and contribute their own blogs and recipes. In this way the site will grow organically, and will be open to evolving depending on the siteuser's needs.


4. Site Goals


Return to Table of Contents

2. User Stories


As a website User I can...

  1. Navigate around the site and easily view the type of content available. User Story: Create a Home Page for site #1

  2. View a collection of Blogs in the blog Section. User Story: View existing Posts #2

  3. Search the blog section for particular categories or by title content. User Story: Sort through Blogs #5

  4. Click on a blog item and view more indepth content of the selected blog. User Story: User can read individual Posts when selected #3

  5. Register for an account to avail of full features of the site. User Story: The user should be able to register for the site #7

  6. View the number of likes on a blog. User Story: User will want the ability to like posts #6

  7. View comments left for different blogs in the collection. User Story: User can leave comments on Blogs #10

  8. View a collection of Recipes in the Recipe Page. User Story: Users can see Recipes in the site #15

  9. Search through recipes for particular categories or by name in title. https://github.com/MHickey2/Wannabe-Healthy/issues/21

  10. Click on a Recipe to see full details of that recipe. User Story: Users can see full details of individual recipes #16

  11. View the number of likes on a Recipe. User Story: User can like individual recipes #17

  12. View any comments left on a Recipe. User Story: User will want to leave comment for individual Recipes #19


As a logged in User I can...

  1. I can add a new post or a recipe.

    User Story: The logged in User should be able to add a blog to the Site. #9

    User Story: User will want to add their own Recipes to the site #18

    User can use a Text Editor when adding/editing their Blog/Recipe #23

  2. I can like/unlike a blog or recipe on the site. User Story: User will want the ability to like posts #6

  3. I can leave comments on particular blogs and recipes. User Story: User can leave comments on Blogs #10

  4. I can update my Profile for the site by adding a Bio and Image. User Story: The logged in User should be able to add a blog to the Site. #9

  5. I can edit a Blog or Recipe that I have submitted to the site. User Story: User can edit the posts they have submitted #11

User Story: User will want to edit/update their submitted recipes #20

  1. I can delete a Recipe or Blog that I have submitted to the site. User Story: User can delete a post that they have submitted #12

User Story: User can Delete their own Recipes #22

  1. I will have confirmation when I carry out actions in the site. User Story: User will be kept informed of their activity within the site #14


As a website superuser, I can …..

  1. Create and publish a new blog or recipe.
  2. Create draft recipes and blog posts that can be finalised later.
  3. Create a new user, recipes, blogs and categories.
  4. Delete user, blogs, recipes, categories and comments.
  5. Can approve user's comments.

User Story: Admin Access for Admin Features #4

The Admin can do the full range of admin functionality within the admin panel.

User Story Testing can be found in the TESING.md


3. Agile Methodology

The project was developed using Agile Methodology and it was by use of the GitHub Projects functionality within the GitHub Repository. The issues can be found Here and this is the link for the WannabeProject Board


Return to Table of Contents

4. Design


1. Colour Scheme

The colour scheme has primarily a green colour, research has shown that green has a strong link with health related topics and it also relates to nature and I felt it was a natural choice for the content of the site. I had used more colour earlier in the development, but I stripped it back in the end, as I thought simplicity was key in highlighting the content without too much distraction. The following image highlights the main colours in the site, and the colours are mostly variations within the green hues.


Colour Combo

#337920 #A3D31C #274612 #7DD661 #47D31C #0CAF46


2. Typography

Google Fonts were used within the website. The 'Roboto' font is the main font used for the whole project, both for regular text and headings. Sans serif is the fallback font in case the other font is not available. See below for example of font in use on the site. The font color is #313131, which is a good font to help counter eye strain.


general font for site


The main title for the site and the navbar links use the 'Abril Fatface' font, as a font it displays both neutrality and a strong presence on the page which helps to attract reader attention with the measured tension of its curves, good color and high contrast.


wannabe title


welcomefont


Other Fonts were used within the Recipe Details Section and the main headings use the 'Marhey' Font, as it gives a certain quirky touch to the Recipes, that gives the recipes their own unique style.


recipeheadings


3. Imagery

The Logo was created with LogoMaker, as the theme was health related, I used predominantly green in the logo iteself and the logo had a strong influence on the overall website colour scheme going forward.

The imagery of the site focuses on a health theme, the images were souced from the Pexels site and supplement the blogs, the recipe images were sourced from LIDL, as pexels had not got the images related to the individual recipes. The images are all self sourced, but the User can update images to supplement their own blogs/recipes. The images for the site are hosted in Cloudinary.

There are also images sporadically placed throughout the site, The home page has an image of a healthy woman, conveying a person with a great lifestyle. The about page again, shows a happy woman living her best life and the information panels show images focused on the main themes within the site.

There are also various icons used within the site, the icons were sourced at Iconify.Design, and they were used as a graphical representation for pertinent information on the site, they were used in conjunction with Forms or headings and were a subtle way to incorporate imagery on a limited scale, examples can be found in the image below.

I also created the favicon for the site with Favicon.io


Logo for Site


Images for Site


Icons for Site


4. Website Structure

The website follows the standard website structure. The Logo and the website name are on the left hand side, and the naigation to the right, on the top of all pages. Within the Account Nav Link the user can either Signup or login to the site. When the user logs in they can see the Profile link and the logout button. The logged in user's image will also be visible. When the website is on smaller screens, there is a hamburger meu, with dropdown navigation items. The footer element is also available on all pages, with site information, contact details and social media icons.

The website consists of the following Pages:


5. Wireframes

The Wireframes for the site were created in Figma, I concentrated on the standard websize and the mobile size. The midlevel sizes were generally in keeping with the main websize but just on a smaller scale. The Wireframes can be found below:

Figma Wireframes
1. Home Page Wireframes

Home Page Wireframe

2. Add Post Page Wireframe

Add Post Page Wireframe

3. Edit Post Page Wireframe

Edit Post Page Wireframe

4. Delete Page Wireframe

Delete Page Wireframe

5. Post Detail Page

Post Detail Page Wireframe

6. About Page

About Page Wireframe

7. Recipes Page

Recipes Page Wireframe

8. Add Recipe Page

Add Recipe Page Wireframe

9. Edit Recipe Page

Edit Recipe Page Wireframe

10. Delete Recipe Page

Delete Recipe Page Wireframe

11. Recipe Detail Page

Recipe Detail Page Wireframe

12. Profile Page

Profile Page Wireframe

13. Edit Profile Page

Edit Profile Page Wireframe

14. Registration Page

Registration Page Wireframe

15. Login Page

Login Page Wireframe

16. Logout Page

Logout Page Wireframe


Return to Table of Contents

5. Database Diagram


Database ER Diagram

Database ER diagram


Return to Table of Contents


6. Features

There are features common to all pages in the site and these are found in the base.html page. These include:

The logo was the first asset I created, and I developed it with a view of promoting the healthy lifestyle vibe, it conveys a simple image with healthy food and a simple tag line. The Title is used to further promote the Wannabe Brand.


Logo and Title


The navigation exists in different forms, for a general user the navigation contains home, about, recipes and an account dropdown with register and login options.


Navbar not logged in


For a logged in user the naviation contains, home, about, recipes, profile and logout. When logged in you will also see your profile picture to the right of the other options.

Navbar logged in


On smaller screens, there is a hamburger menu where the navigation items appear in a collapsable dropdown menu. The image is also included in this menu.


navbar mobile


footer


1. Home Page

The home page has an introductory image and a short paragraph of text explaining the purpose of the site, helping the user find out the theme of the site up front.


Intro to Site


2. Blog Section

On the home page there is a blog section which holds a collection of blogs ordered with the most recent blog at the top. The pagination allows for the blogs to be distributed according to the number of blogs it contains (6 blogs per page).


blog section


3. Blog Search

The website user can use the search facility to find specific categories ie Relaxation, Exercise, Diet and Health, and they can also search by a word in the title. If there are results, they will be displayed to the user and if not the user will be given the message that there are no results, they can either search again or they can return to the home page blog display.

blogsearch


search no results


4. Add Post

As a logged in User you can add a blog to the site, when you press on the add blog link it will take you to the add blog page, when this form is completed you will be redirected to the home page, where your new blog will be displayed. The form has a summernote editor so the user can add styling to their content.


add post button


add post form


5. Edit Post

As a logged in User you will be able to see the edit button below your submitted blogs, when you use the edit button you will be redirected to the edit blog page, where you can update your blog, when the form is completed the user will be redirected to the home page. The edit button will only be visible on posts that the logged in User has submitted.


edit button


edit form


6. Delete Post

As a logged in User you will be able to see the delete button below your submitted blogs, when you use the delete button you will be redirected to the delete blog page, where you can delete your blog, when the form is completed you will be redirected to the home page and your blog will be deleted. The delete button will only be visible on blogs that the logged in User has submitted.


Delete Form


7. Post Detail Page

When you select a blog, you will be redirected to the post detail page, this page will show the full content for that specific blog. If you are a logged in user you can use the comment form to add a comment. This comment will have to be approved by the admin before it will be displayed on the site. You can see comments that have already been submitted for the Blog. You can also like/unlike the post. You will also be able to see the Profile Picture and Bio for the Author of the Post. If you are viewing a post that you submitted you will be able to see an edit and delete button below your post and you can use these buttons to edit or delete your post. (They will take you to the edit and delete form)


Post Detail Page


8. About Page

The About Page again contains a brief synopsis of the site and contain information panels that display the main factors in staying Healthy. The accompanying links will take you to either the blog section or the recipe section of the site. I would hope to expand the project by adding an area for relaxation, but this is not in the present iteration, so there are 2 links to same section in the meantime. I could have had a link to the profile page, but if the user was not logged in, this page would not be available.


About Page


9. Recipes Page

At the top of the Recipes pages, there is a brief introduction to the Recipes feature, keeping the user informed as they work their way through the site.


Recipe Intro


On the Recipes page there is a collection of Recipes ordered with the most recent Recipe at the top. The pagination allows for the Recipes to be distributed according to the number of recipes in the collection.(6 per page)

Recipe Section


10. Recipes Search

The website user can use the search facility to find specific categories ie Breakfast, Lunch, Dinner, Dessert and Soup/Salad. You can also search according to a specific word in the title. If there are results, they will be displayed to the user and if not the user will be given the message that there are no results, they can either search again or they can return to the main recipes page.


Recipe Search


search no results


11. Add Recipe

As a logged in User you can add a Recipe to the site, when you press on the add a Recipe button, it will take you to the 'Add Recipe page', when this form is completed the User will be redirected to the Recipes page, where the new Recipe will be displayed. The form has a summernote editor for styling the method and ingredients section of the Recipe.


Add Recipe Form


12. Edit Recipe

As a logged in User you will be able to see the edit button below your submitted Recipe, when you use the edit button you will be redirected to the 'edit your Recipe page', where you can update your Recipe, when the form is completed you will be redirected to the Recipes page and your updated recipe will be displayed with the changes included. The edit button will only be visible on Recipes that the logged in User has submitted.


Edit Recipe Form


13. Delete Recipe

As a logged in User you will be able to see the delete button below your submitted Recipe, when you use the delete button, the delete Recipe page will be displayed, where you can delete your Recipe, when the form is completed you will be redirected to the Recipes page and your recipe will be deleted. The delete button will only be visible on recipes that the logged in User has submitted.


Delete Recipe Page


14. Recipe Detail Page

When you select a Recipe, you will be redirected to the Recipe detail page, this page will show the full content for that specific Recipe. If you are a logged in user you can use the comment form to add a comment. This comment will have to be approved by the admin before it will be displayed on the site. You can see comments that have been posted for the Recipe already. You can also like/unlike the Recipe. You can also see the Profile Picture and Bio for the Author of the Recipe.


Recipe Detail Page


15. Profile Page

On the Profile Page, the User has access to their own profile information. The profile will be automatically created when they register for the site. Initially the user will have a generic photo and their username displayed on the page, and an empty Bio. There is an edit button on page that will allow them to update their Profile information.


Profile Page


16. Edit Profile Page

The logged in user can access the Edit Profile Page and can upload an image and add a Bio to their Profile. When this has been completed, the user will be redirected to the profile page. The user will not be able to change their username, as this would cause issues with their registration.


Edit Profile Page


17. Signup Page

On the Signup Page, a new user can sign up for the Wannabe Healthy website by filling out and submitting the form. On registering they will be assigned a Profile for the site.


Registration Page


18. Login Page

A registered User can log in to the website by inputting their username and password and they will have full access to all the features within the site.


Login Page


19. Logout Page

In the Logout Page, the User can confirm that they want to exit the website.


Logout Page


20. Custom Error Pages

I have included custom Error Pages in the error folder within the templates folder(403,404,405,500), Below is the image from the 404 page, but they all look similar, barring the fault lines.


Sample Error Page


21. Admin Panel

The admin panel allows the admin/superuser to perform a wide range of functionalities within the site. The admin can add, delete, edit blogs, recipes, users and profiles. The admin can also approve comments for both blogs and recipes.


Admin Panel


Admin Panel


22. Security Measures

To ensure security on the site, only logged in users can access certain features on the site. A logged in user can add posts/recipes, but this feature is not visile to a non logged-in user. As an extra protection if a user tries to use 'add_recipe' or 'add_post' in the address, they will be denied access. Only a post/recipe author can edit/delete their post/recipe, anyone else will be denied access for this functionality. Only the Admin/Superuser can access the admin Panel(would need sign in credentials).The Database URL and secret key are stored in the env.py file to prevent unwanted connections to the Database and this was set at an earlier stages of development. Cross-Site Request Forgery (CSRF) Tokens are used on all Forms within the App for added protection.


Can't Access Message


Return to Table of Contents

7. Future Implementation


The site in it's present form offers basic blog and recipe content, which is a good foundation but it could be developed further to offer more options to the user. Within the blog area, I would like to add some extra functionality such as adding favourites for Users and highlighting the blogs that have received the most likes.

In regards to the recipes, there are a number of extra options I would like to introduce including vegetarian, and vegan recipes, the present recipes are not categorised in this way. I would like to also enhance the site by including information on food allergies, highlighting which recipes would have known allergens for the safety of the user. There could also be a dish of the week, as an incentive to users to submit their best recipes.

I would like to introuduce more interaction into the site, possibly using a forum where users can document their own experiences when adopting a vegetarian/vegan lifestyle. This would increase the social aspect of the site and would utilize the social media platforms more fully.

The present profiles could be expanded to include more information, such as the user's own social media links so that users can interact with each other outside of the site. I was going to add blogs and recipes that the user has created within the profile page, but have not included this within the present project scope.

At present there is no contact page and this would also be introduced, to encourage users to contact the web owner with messages, and it would be hoped their interaction would help the site owner to develop new ideas based on their suggestions.

The about page mentions relaxation as a factor, so I would like to add a section on the site dedicated to relaxation techniques and offering resources to the user in relation to stress relief and mindfulness. Within this area I could include video or audio resources for basic meditations that the user could try. I would also include links for further investigation, if they wanted to dig deeper into this subject area.


Return to Table of Contents

8. Tools and Technology

Language Used:

Technology Used:

Django Packages

Return to Table of Contents

9. Testing


Go to the TESTING DOCUMENT

Return to Table of Contents

10. Bugs and Issues

There have been various issues along the way, that I have resolved as they came up.


Resolved


When I first added profiles, I had the intention to include the profile image in the navbar when the user logged in, but when I used the code to allow this to happen, the image would not show. Up to this point I had not needed to to use content from one app within another, so that was a big issue. I talked with my mentor and I looked into the area of context processors, and added one within the blog app, but that did not fix the issue. Then after talking with Tutor Support I managed to resolve the issue, and the image showed up finally. Once I knew this was possible, I decided to add Bio details of the author within the pos detail and recipe detail pages, so users can learn more about their fellow users.


views code for profile pic


base code for profile image


profile pic in nav


profile in blog detail page


There was one further issue I noticed when testing, if you made a comment and submitted it, the user image in the post_detail(and recipe detail) profile section would disappear, but this was due to a syntax error, and when it was fixed the problem was resolved.

I also had some issues when using the font awesome icons as some seemed unavailable due to Font Awesome user restrictions, but used a different site for icons, and this has resolved the issue.

When testing I found I had an issue with the favicon, and I had not included the webmanifest file or the selection of icons for mobile sites, so added these and they seem to be working ok.

I did have an issue with the add a blog form, during testing I realised I did not have to include the slug field, as it was applying the title as a slug, so removed this field from the form and it's working ok.

In last minute testing I realised that the user would have no access for styling their post and blog entries, throughout the project I have been using HTML and CSS to add posts/recipes, but I can't expect Users to need to know this in order to submit content, so looked into introducing the summernote functionality in the front end, which proved problematic and took a while to sort out. When I finally got the editor showing, the icons were not showing, so I went to a previous commit, and starting process again and it worked. So I have now added this in the add Post and Edit Post in regards to content and in the add Recipe and Edit Recipe in regards to Ingredients and Method. As a result of this working I had to modify the forms so they appeared like the text editor, found that the easier direction than having to style the summernote editor, and am happy with the forms as they are now. The following is an image of the updated Add Post Form:


Updated Add Post Form


In last minute testing I realised the user could add a post/recipe without being logged in, by adding it to the address bar, but modified this now so this cannot happen, also modified the edit and delete forms to prevent the same happening. Although it's not technically a bug, I modified the size of title in the blog and recipe models, as I did not want user to add titles that are too long. I also was going to add created on in the profiles, but did not, because i did not want all the profiles, to appear like they were created at the same time, and even if I had chosen that option if i had tried to sort them, they ould have all had the same date, but in the next projectI would include this at an earlier stage in development.


Unresolved


I did near the end of the project think of adding the blogs and recipes that the user created to be included in the profile page, I experimented a little but decided to instead concentrate my focus on testing the functionality I had already achieved on the site, but have referred to this in Future features.

Initially I was going to use primary key instead of slug, as it was causing issues when I tried to change the name of title/slug of a blog, but instead left it as slug, it does update the blog successfully, but instead of returning you to the amended blog, it returns to you to the main blog page, but the amendments are included and if you select the blog, you can open the amended site to see full details in the post_detail page.

I was going to display a greeting to the user when they registered for the site, but could not get it to work, but would hope to get it working in future iterations, for now I will contend with the message that is automatically displayed to the user when registering. If it was a form I had compiled myself, I would have felt more comfortable modifying the code, but did not want to cause an issue with the built in allauth authorization system. The code I was using follows:


  <button class="btn btn-success" type="submit" onclick="displayGreeting()">{% trans "Sign Up" %} &raquo;</button>

  <script>
          function displayGreeting() {
          //   event.preventDefault();
            let usrname = document.getElementById('usrname').value;
            document.getElementById('outputDiv').innerHTML = 'Hello ' + usrname + ', Welcome to WannabeHealthy Site' + '<br> ' +
              'You are officially a WannabeHealthy member ' + usrname + '!';
          }
  </script>


One last bug relates to the images for the recipes. For the blog I was able to select set sizes from Pexel, but the recipes needed specific images that were not available in Pexels, so had to use the images from the LIDL website, and these were not uniform, so were a little more problematic to work with. Although I did test uploading larger pictures and it did seem to display them correctly. There is always some uncertaintlly however when it comes to users uploading images of different formats.


Return to Table of Contents

11. Deployment

The Project used Heroku for deployment. I used GitPod for development within the project and pushed to the GitHub Repository. This in turn updated the Project in Heroku. I used DEBUG = 'DEV' in os.environ, during development and other than when testing, had it configured so that I could work both locally and could also test the deployed Project on an ongoing basis.


Github

How to make a local Clone

  1. Navigate to the main page of the repository.
  2. Click the green Code Button at top right of the repository.
  3. Copy the url for the repository.
  4. Open Git Bash and Change the current working directory to where you want the cloned directory.
  5. Type git clone, and then paste the URL you previously copied using $ git clone.
  6. Pressing enter will then create your clone.


How to fork a GitHub Repository

  1. Log into GitHub and go to the required Repository.
  2. The Fork button is found at the top right corner of the page.
  3. When you click this button you will have a copy of the repository in your own GitHub account.


More information is available at https://docs.github.com/en, in regards to GitHub and is a great reference point for all GitHub queries.


Code Institute

Student Template

This Template has been provided by the Code Institute and includes a number of tools to make life easier and has been used within this present site.


Django Framework

I used the Resources and Lessons within the Full Stack Frameworks Module to get familiar with the concepts involved in creating the present Project. In particular I did the walkthroughs for 'Hello Django' and 'I Think Therefore I Blog', and I used the cheatsheet, Django Blog Cheat Sheet, which helped me set up the basic Django Project. I also looked at the 'Boutique Ado' walkthrough, as when I was creating the profile app, I wanted to see how it was handled within this project, It also helped me solidify some concepts that I had not grasped in the previous walkthrough.


Heroku


Deploying to Heroku


Changes in Heroku

We received notifications that there was a change in their free plan and new charges would be introduced so we had to make changes in how our project would be deployed. At this point I had already deployed the site on Heroku, so needed to heed the advice from Code Institute and use the student plan, that had previously been set up, to apply for student credits. When these were applied, I changed the current free tier dynos I had to Eco Dynos on the site and migrated existing databases from postgress to ElephantSQL. To ensure this was done successfully, I attended the CI online webinar and followed the instructions in the CI cheat sheets in the following links:

Sign up for ElephantSQL

Migrating Databases

Changing Dynos


Final Deployment


Return to Table of Contents

Credits


Return to Table of Contents

Acknowledgements


Return to Table of Contents