Stem & Leaf - A Plant Care Space for Beginners

Author

Cara McAvinchey

Project Overview

• The Stem & Leaf blog is a place for plant care beginners to visit and learn about how to take care of their plants. Each blog post is dedicated to a popular house plant, with a short write up and care tips.
• You can view the deployed website here.

Table of Contents

• STEM & LEAF - A PLANT CARE SPACE FOR BEGINNERS
  • Author
  • Project Overview
  • UX
  • Project Goal
  • User Stories
  • Design Choices
  • Colors
  • Typography
  • Images/Icons
  • Animations
  • Responsiveness
  • Wireframes
  • Post List
  • Post Detail
  • Features/Structure
  • Navigation
  • Plant List
  • Plant Detail
  • Likes
  • Comments
  • Register
  • Login/Logout
  • Footer
  • Error 404/403/500
  • Features for Future Development
  • Data Model
  • Testing
  • Technologies Used
  • Deployment
  • Credits
  • Media
  • Acknowledgements

UX

Project Goal

• The aim of the project is to provide easily digestible information about popular house plants for beginners and to allow for conversation and sharing of experiences in taking care of them.

User Stories

• For sight users:

  1. As a site user, I can register an account so that I can interact with blog posts.
  2. As a site user, I can view a list of posts so that I can select one to read.
  3. As a site user, I can click on a post so that I can read the full article and find out more about plant care.
  4. As a site user, I can view the number of likes on each post so that I can see which plants are popular.
  5. As a site user, I can like a post so that I can engage with the blog content.
  6. As a site user, I can view comments on a post so that I can read other user feedback.
  7. As a site user, I can leave comments on a post so that I can share my own feedback.
  8. As a site user, I can edit and delete my comments on a post so that I can customise or remove my thoughts if required.
  9. As a site user, I can use the search bar so that I can find plants I am looking for.
  10. As a site user, I can save my favourite plant posts so that I have all my houseplants I care for in the same place.
  11. As a site user, I can rate blog posts on a scale of 1-5 so that I can give feedback about which content I enjoy most.
  12. As a site user, I can return to the home page of the blog if there is an error so that I don’t get lost on the website.

• For admin users:

  13. In order to create and control the content for the blog as an admin user, I can access the admin panel using admin login details.
  14. In order to finish writing or publish content later as an admin user, I can create draft posts.
  15. In order to manage the blog content as an admin user, I can create, read, update and delete posts using the admin panel.
  16. In order to maintain a positive community atmosphere as an admin user, I can approve/disapprove comments.

Design Choices

Colors

• The natural color palette links to the theme of plants and plant care.
• The headings, icons and body text are darker to ensure clear contrast and readability for the user across the site.
• The green header and footer ensures clear contrast and delineation between sections.

Typography

• The font combination was chosen using guidance article from Mai Knoblovits here.
• The logo and headings use Amatic SC with a fallback of cursive and the body text uses Roboto Condensed with a fallback of san-serif.
• The choice of fonts were selected and installed using Google Fonts.

Images/Icons

• The icons were chosen to provide clear understanding of each plant and its care requirements.
• Each summary card has the same information structure with all icons standard throughout the site.

Animations

• The navbar, social icons and buttons across the site have a subtle grow effect when hovered over by the user.
• All links have a color change and underlined effect when hovered for clear distinction from the body text.

Responsiveness

• The website was designed mobile-first using flexbox to ensure responsiveness throughout the website.
• The standard grid from Bootstrap was used to achieve this.

Wireframes

Post List

• The post list page was designed using cards to show a quick summary of each plant.
• The user can click and find out more about a plant that interests them.

Post Detail

• Each blog post provides detail about the plant and a list of instructions to care for it.
• The registered user can also comment and like the post if desired.

Features/Structure

Navigation

• The users will have a choice of home, login/logout & register when visiting the site.
• There is a subtle hover state on each of the navigation items for better user experience.
• For mobile devices, the navigation toggles to a hamburger menu.

Plant List

• The users will have a list of posts with a title, excerpt and summary card of care required for each plant.
• The image and title are linked, so users may click on either and be taken to the plant detail page.
• There is a hover state on the title to show the user they can click on the post.
• This summary card is later repeated in each plant detail post for continuity across the site.

Plant Detail

• Each post has a short article about the plant including its care information in detail.
• The structure of each post is consistent, starting with the card at the top and excerpt from the plant list and then the main content and bulleted list of care instructions at the end.

Likes

• If the user isn't logged in, they will see the below information:

• If the user is logged in, they will be able to like the post:

• The user is able to easily return to the home page using the go back button or clicking the logo at the top of the page.

Comments

• If a post doesn't have any comments, the user will see the below if not logged in:

• If logged in, users will be encouraged to share their experience in caring for the plant they've read about:

• The user will be able to edit their comment using a form and be alerted using a message that disappears after 3 seconds.

• The user will be able to delete their comment after being prompted and can go back if desired or will proceed and receive a success message:

Register

• The user will be able to easily sign up as a user using the below form.
• If users are already registered, there is a link to easily navigate to login instead

Login/Logout

• The users can easily sign in using the below form with an option to 'remember me' if desired.
• If a user hasn't registered, there is a link to easily navigate to sign up instead.

• The user is prompted with a message before logging out:

• The user will receive a message that disappears after 3 seconds to say they have logged in/logged out:

Footer

• The footer links directly to the social media pages of the plant care blog.
• There is a subtle hover state on each icon for better user experience.

Error 404/403/500

• There are error pages in place in case a user is taken to a restricted area or the page doesn't exist.
• The return home button will take the user back to the plant list page.

Features for Future Development

• It will become less efficient for the user to scroll through many posts in the list view so a search bar will allow users to find specific plants they want to read more about.
• It would increase user experience to add a method to 'save' blog posts so users can keep their favourite plants in one place.
• To increase user interactivity from readers, users could rate blog posts on how helpful the information was and give feedback.
• Pending comments can be added so users are aware they are awaiting approval.

Data Model

• A relational database was designed and the data is represented above in an ERD with one custom models.
• The comment model was based off 'I think, therefore I Blog' walkthrough project.
• The Plant model was customised according to the data needed for the Stem & Leaf blog concept.
  • This included 2 choice fields for plant light and plant level.
  • For plant thirst, this was represented as a decimal field.

• [X] C - Site users can create/register their own profile to interact with the plant posts.
• [X] R - Site users can open and read the plant blog posts for details and read comments from other users.
• [X] U - Site users can like a post, updating the details and analytics for a plant detail post.
• [X] D - Site users can eliminate their like if desired on a plant detail post.

• [X] C - Site users can create their own comments using a validated form on each blog post.
• [X] R - Site users can read comments from other users.
• [X] U - Site users are able to update/edit their comments using a form.
• [X] D - Site users are able to delete their comments.

Testing

Please refer to the TESTING.md file for all testing performed.

Technologies

Languages

• HTML, CSS, JavaScript, Python

Database

• sqlite3, ElephantSQL

Frameworks

• Django
• Bootstrap

Libraries & Packages

• Font Awesome
• Django allauth
• Django Crispy Forms
• Summernote
• gunicorn
• psycopg2

Programs

• GitPod
• GitHub
• Favicon.io
• Balsamiq
• Diagrams.net
• Tiny PNG
• Cloudinary
• Heroku

Deployment

ElephantSQL

1. Login to ElephantSQL, access the dashboard and create a new instance (input a name, choose tiny turtle, select a region).
2. Return to the dashcoard, copy the URL.

Heroku

1. Create a new app in Heroku, choose a unique name and region.
2. Go to settings and add a new config var of DATABASE_URLpython with the value of the URL from ElephantSQL.
3. Add host name of the Heroku app name to ALLOWED HOSTS in settings.py:

ALLOWED_HOSTS = ['{heroku deployed site URL here}', 'localhost' ]

GitHub/GitPod

1. Create a new repository on GitHub, open a new workspace with GitPod.
2. Install django pip3 install 'django<4python to install Django 3.2 the LTS (Long Term Support) version.
3. Create a new project and run the server to see if the app has installed.
4. Run migrations, create a super-user with a username, email and password.
5. Install pip3 install dj_database_url==0.5.0 psycopg2 and freeze requirements pip freeze > requirements.txt
6. Add import os and import dj_database_url to settings.py
7. Connect the new database, paste in the ElephantSQL URL (do not commit at this stage):

 # DATABASES = {
 #     'default': {
 #         'ENGINE': 'django.db.backends.sqlite3',
 #         'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
 #     }
 # }

 DATABASES = {
     'default': dj_database_url.parse('your-database-url-here')
 }

8. Ensure connection to the external database, run python3 manage.py showmigrations then run python3 manage.py migrate

   

9. Create a new superuser for the new database, same as above.

10. Create an if else statement to setup development and external databases:

    if 'DATABASE_URL' in os.environ:
    DATABASES = {
      'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))
    }
    else:
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.sqlite3',
            'NAME': os.path.join(BASE_DIR, 'db.sqlite3')
      }
    }

11. Install pip3 install gunicorn and run pip freeze > requirements.txt

12. Create a Procfile in the root directory and include web: gunicorn project_name.wsgi:applications

13. Generate a SECRET_KEY, add it to Heroku config vars.

14. Create env.py file (ensure it is included in .gitignore file) and add the SECRET_KEY & DATABASE_URL to environment variables:

    

15. Edit settings.py to the below:

    SECRET_KEY = os.environ.get('SECRET_KEY', ' ')

    DEBUG = 'DEVELOPMENT' in os.environ

    

19. Add, commit and push to GitHub.

20. Go to Heroku, add DISABLE_COLLECT_STATIC = 1 to Heroku config vars.

21. Connect the project to the GitHub repository using personal account login.

22. Login to Cloudinary, copy the API Environmental variable to dashboard and add to env.py (see screenshot above) & to Heroku config vars:

27. Add cloudinary to installed apps in settings.py, add static/media file settings:

28. Add template directories in settings.py, add Heroku host name to allowed hosts and add directory files:

25. Go to settings in Heroku and perform a manual deployment and check for any issues.
26. Go to Heroku settings, enable automatic deployments.

Credits

• The Code Institute 'I Think, Therefore I Blog' walkthrough project assisted and guided in the setup and basic structure of this project.
• The Stockbook Project by Massimo Ranalli assisted with the setup of the edit/delete functions for comments as well as the messaging alerts.
• Seaside Sewing by Kera Kudmore was a great source of inspiration and best practice regarding testing and README structure.
• Code Institute Student Template: gitpod full template.
• The articles on the blog were written myself and any additional helpful articles were linked to for the user to access for more information.

Media

• The fonts were chosen with guidance from an article written by Mai Knoblovits here.
• The colors for the website was generated using Color Space.
• The plant images were sourced using Pexels and Pixabay.
• The icons for the favicon, footer, about page and location headings were taken from Font Awesome.
• The favicon image was converted using Favicon.io.

Acknowledgements

• Thank you to my mentor for continuous helpful feedback and support throughout the project.
• The tutors at Code Institute for their patience and support.
• The Code Institute Slack community for tips and guidance.

Back to the beginning