Houseplant Heroes

Milestone Project 3: Data Centric Development - Code Institute

Houseplant Heroes was created as a response to the growing popularity of houseplants which, whilst aesthetically pleasing can often be difficult to maintain! The website allows users to access information on houseplant care as well as contribute their own insights and experiences.

Table of Contents

1. UX

   • User Stories

     • First Time User Goals
     • Returning User Goals
     • Frequent User Goals
     • Site Owner Goals

   • Design

     • Colour Scheme
     • Typography
     • Imagery
     • Icons
     • Layout
     • Styling
     • Wireframes
2. Features

   • Existing Features

     • Elements on every page
     • Homepage
     • Plants Page
     • Plant Profile Page
     • Login Page
     • Join Page
     • User Profile Page
     • Add Plant Page
     • Edit Plant Page

   • Features Left to Implement

3. Information Architecture

   • Database Choice

   • Collections Data Structure

4. Technologies Used

   • Languages

   • Frameworks, Libraries & Programs Used

5. Testing

   • testing.md
6. Deployment

   • Requirements

   • Making a Local Clone on Gitpod

   • Heroku Deployment

7. Credits

   • Content

   • Media

   • Code

   • Acknowledgements

UX

User Stories

First Time User Goals

1. As a First Time User, I want to easily understand the purpose of the website and the services it offers
2. As a First Time User, I want to be able to navigate intuitively through the site

Returning User Goals

1. As a Returning User, I want to browse plants
2. As a Returning User, I want to search for plants
3. As a Returning User, I want to know which plants are easiest/most difficult to care for
4. As a Returning User, I want ask questions about the plants
5. As a Returning User, I want to find care instructions
6. As a Returning User, I want to create my own posts

Frequent User Goals

1. As a Frequent User, I want to see the plants that I have posted
2. As a Frequent User, I want to edit and delete my posts
3. I want to discuss the plants with others in the community
4. As a Returning User, I want feedback on my posts

Site Owner Goals

1. As Admin, I want the ability to edit/delete any posts deemed inappropriate or unnecessary

Design

The overall design of the website is clean and simplistic, this allows the plants themselves to be the main focus.

Colour Scheme

• The colours were chosen to compliment the hero image used on every page of the site. The muted tones are unobtrusive so as not to detract from the natural colours provided by the plant images.

• The add and edit plant form input uses the Materialize CSS default, on click, colours. They provide users with visually instinctual validation feedback:

Green for go

Red for stop

Typography

• The Poppins font is used on all pages with Sans Serif as the back-up font due to it's clean presentation, the letters were also spaced apart by 2px to increase this effect.

• A range of font sizes and weights were used to denote importance.

• The white text used on the the hero image includes a text shadow to ensure readability.

Imagery

Hero Image

• The hero image is used on each page of the site to create consistency and promote lasting brand image.
• The image was chosen as it emphasizes the natural aesthetic of house plants. It also isn't overly busy so as to obtrude upon the overlaid content.
• A liner gradient of (rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), is used to ensure content is visable on top.
• The hero image is resized on each page depending on the size of hero image content but is always recognisable as the same image.
• This image is coded as a background-image in css and set to background-size: cover; this making the image responsive.

Carousel

• A Slick Carousel is used to display the most recently added posts on the homepage.

• The carousel image links to the plant post for easy navigation for users.

• The carousel also states who the plant was posted by. The username was included to encourage users to post their own plants to be displayed on the front page.

• Lazy loading is used to postpone loading of images outside the browser viewport, decreasing loading time.

• The decision to use slick was purely aesthetic as the carousel provided by Materialize CSS appeared either too big or too small and were rigid in their customisability.

Icons

Icons are used throughout the site to provide the user with visual cues and create a more interesting aesthetic.

• The use of icons in the plant profile page are particularly important as there may be quite a lot of information for the user to digest. The icons allow the user to easily scan the page for the information they are looking for. They also break up the information to make it more manageable for the user.

• Arrow and Chevron icons are used throughout, with hover, to indicate directional links.

• A Plant Pot icon from [Icons8] is used for the site favicon to distinguish the website from other tabs sites for the user. The icon is also used in the footer for consistency.

• Social media icons are clearly positioned within the footer in accordance with user expectations. Dead links are used as the social media pages to exist at present.

Layout

• Materialize CSS Grid was used to created the layout and make it responsive. The layout is simplistic, with no overcrowding of objects. This ensures users are able to clearly see and access the information they are looking for. Use of clean lines adds to this effect.

• A Masonry grid was used to tidy up the layout of the cards in all_plants.html and profile.html. This was important as users are permitted to add images of varying dimensions, without masonry there could be large white spaces between each card.

Styling

• Materialize CSS was used in conjunction with custom spacing and colours to provide much of the styling for the site. This includes all buttons, forms, cards and nav bars.

• Materialize CSS Cards cards were utilized on all_plants.html and profile.html to display the lists of plants. They contained a condensed amount of information to allow the user to decide whether they wanted to proceed to the full care guide for the plant, for which a link is provided.

Wireframes

• Homepage

• Plants

• Plant Profile

• Login

• Join

• User Profile

• Add Plant

• Edit Plant

Features

Existing Features

Elements on every page

• Navbar

  • The navigation bar has the Houseplants Hero title in the top left corner for clarity

  • The navigation links are on the top right hand corner.

  • For visitors who are not logged in, the links are:

    1. Home
    2. Plants
    3. Login
    4. Join

  • For users who are logged in, the links are:

    1. Home
    2. Plants
    3. Profile
    4. Add plant
    5. Log out

  • Python checks whether a user is logged in or not with if 'user' in session, this data is padded to Jinja to display the correct navbar for the user.

  • For mobile, the navbar collapses in to a burger icon with side navigation on the left of the screen.

  • Active classes are added to active page to show the user what page they are currently on.

  • The nav bar is fixed to the top of the screen to allow for accessible navigation regardless are where the user is on the page. This simplicity in the design of the nav bar ensure that it is not too obtrusive for the user.

• Hero Image

  • See Imagery.

• Flash Messages

  • Flash messages are used to provide feedback to the user for certain actions, e.g. when a posted is updated
  • The messages are laid over the hero-image and come before the heading so they are, generally, at eye height for the user.

• Heading

  • Each page has a heading position towards the centre of the hero image. This reassures the user where they are on the site.

• Subheading

  • Each page has subheading to expand upon the purpose of the page.

• Footer

  • The footer contains:
    • Logo
    • Copywrite information
    • Social media links
    • In the future, contact information can be added

Homepage

As the first thing the user sees, the homepage was designed to be clear and informative.

Search Bar

• The search bar is conveniently placed for user to start using the website straight away.
• A tool-tip explains to the user the search terms that can be used.
• In line with user expectations, users can either hit the enter key or press the search button to enter search term. This takes them to the plants page.

Redirect Buttons

• If the user is not logged in they will have button links for, "Plants", "Login" and "Join" pages. These (as well as the homepage) are all the pages that can be accessed when a user is not logged in. This feature is particularly targeted at first time visitors as it clearly presents them with all actions.

• Buttons are hidden on mobile due to sizing issues. See testing.

Promo Content

• This section is for promotional purposes, providing the user with immediate information of the features of the site. The majority of which cannot be accessed without an account. This encourages user to create an account in order to have full access to these features.

• Links are provided for convenient access.

Recently Added Carousel

• See Imagery.

Plants Page

If users have arrived at the Plants page via the search bar on the home page:

• If no matches have been found, a flash message will be displayed to user "No results. Please try again or browse all plants below." With all plants displayed below.

• If a match has been found, the user will be presented with their search results.

Search Bar

• See Search Bar in Homepage

Search Bar Reset Button

• Resetting the search results displays all plant posts in the database, eliminating the need for the user to refresh or go back.

Cards List

• See Layout and Styling
• Posts are sorted newest first

Plant Profile Page

Users arrive on this page following a link from either the All Plants Page or User Profile Page card lists.

Hero Image Content

• Contains content to assure the user they are on the plant they expected

• The plant nickname is used as the page header at it is generally the most recognisable name.

• The plant botanical name is used as the subheading

• The plant description provides a little more information the plant, it is capped at 400 characters to ensure there is no overflow.

Plant Info

• This section contains more detailed information on the plant.

• To the left or top of section(depending on screen size):

  • The plant image, which uses Materialize CSS's responsive image class to ensure responsivity.
  • Shows who the plant is posted by.
  • Shows whether the plant is air purifying.
  • Shows when the plant was last updated. This initially, will show the date and time the plant was added. If the plant is edited, it will update accordingly. This was included to allow users to see whether any updates have been made since their last viewing.

• Care instructions:

  • Shows all details obtained from the add plant form.
  • Materialize layouts and icons were used to break up the information.

Edit/Delete

• Edit/Delete buttons are only visible if the session user matches the "posted_by" of the specific plant, or is admin.

• Clicking the edit button takes users to the Edit Plant Page.

• Clicking delete triggers a defensive modal:

  1. If yes, delete:
     • the plant post is removed from the database and the modal is closed.
  2. If no, keep:
     • the modal is closed immediately, cancelling the action and the plant post remains in the database.

Comments The comments section allows users to leave comments about specific plants. The aim is to increase user engagement and stimulate conversation.

• All comments show username and date/time posted

• Comments are displayed, oldest to newest. This decision was based on this post from Ux Stack Exchange in which it is concluded that reverse chronological order is more conducive to natural conversation.

• If no user is logged in they will see:

  • The user must be logged in to comment as it shows who the comment is posted by to increase and accountability and allow for more developed conversation.
  • Comments are visible to all visitors as they provide further information and encourage visitors to make an account.

• If user is logged in they will see:

  • The input field is limited to 350 characters so that they are easy for readers to digest.

• The delete buttons is only visible if the session user matches the "posted_by" of the specific comment, or is admin.

• The ability to edit the comment was removed as editing a comment may change the flow of conversation or cause confusion.

Login Page

Form

• The login page features a simple form for user to enter their username and password.

• Python checks whether the password and passwords match what is held in the database.

• If both are correct:

  • user is directed to their profile page.

• If either or both are incorrect:

  • flash message is displayed "Incorrect username and/or password please try again.". It is not specified which is incorrect to increase security.

Redirect Links

• A link for the join page is provided "New? Join here ->" in case the user has found themselves in the wrong place and needs redirecting.

Join Page

Form

• Similarly, to the login page, a simple form is used for the user to enter a desired username and password.

• If the chosen username already exists in the database (checked by Python):

  • flash message will appear, "Username already in user, please try another".

• Users are asked to confirm password, (checked by Python). If the passwords don't match a flash message is displayed, "Passwords don't match, please try again"

• Tooltips are used to tell users what is required for a valid username and password.

• If user input does not meet requirements:

  • input field will be underlined in red, see (colour scheme)[#colour-scheme].
  • on submit, they will not be permitted to proceed.

• If user input meets all requirements:

  • input field will be underlined in green, see (colour scheme)[#colour-scheme].
  • on submit, user will be directed to their newly created profile page.

Redirect Links

• A link for the login page is provided "Already have an account? Login ->" in case the user has found themself in the wrong place and needs redirecting.

User Profile Page

Unable to provide responsive image due to necessity for session cookie

• The main purpose of the user profile page is to allow the user to see a list of the plants that they have posted. Users have the ability to edit and delete their own posts and this gives them easy access to do so.

Hero Image Content

• The heading welcomes the user

• The subheading directs users to look at their plants or add a new one

User's Plants list

• If the user has no plants to show they will see:

  • The add button takes users to the Add Plant Page.

• If the user has already added plants they will see a list of their plants:

  • A link to add Add Plant Page is included to encourage users to continue adding plants.
  • Cards are used to display the list of user's plants. See Layout and Styling.

Add Plant Page

Hero Image Content

• The subheading reassures users that they will be able to edit or delete their plant should the wish to later. This was include so that users do not over-think their posts.

Form

• The form asks users to input information on their plants

• Feedback is provided to the user by underlining in either green or red, see (colour scheme)[#colour-scheme]. The form will not be submitted until everything is green.

• As MongoDB, alone, is not capable of storing images. Users are asked to paste an imaged url instead. A tooltip provides instructions on how to do this.

• A switch is used for the "Is the plant air purifying" as it can only be yes or no.

• A dropdown selection is used for the maintenance level in order to limit the user input. This makes it easier for users to search plants by maintenance level as it can only have three specific terms: easy, medium and hard. Materialize CSS does not provide validation for select options so a jquery method was taken from this stack overflow answer from user Imran Saleem.

• The add button submits the form, adding the post to the database.

Edit Plant Page

The edit plant page is almost identical to the add plant page (above) with a few exceptions:

• All form information is prefilled with the current plant information, this allows users to edit only edit small amounts if necessary.

• There is both an edit and cancel button at the end of the form:

  • The edit button submits the form. Updating the current post in the database and returning the user back to the plant's profile page, with the newly updated information.
  • The cancel button returns the user back to the plant's profile without any change.

404 Page

• The custom 404 page contains links to refirect the user back to either the homepage or the plants page.

Features Left to Implement

1. User password reset

   • Allow users the ability to reset their password if forgotten

2. Pagination

   • Pagination is needed on the Plants and User Profile pages.
   • At present this is not necessary as there are so few plants but as the database grows the results per page should be limited. This will decrease loading time.

3. Autofill of search input

   • This would provide users with guidance of search terms.

4. Favourite Plant Button

   • To allow users to have a list of their favourites displayed on their profile page.

5. Plant Tracking Dashboard

   • Eventually, I would like to implement a plant tracking system.
   • This would allow users to input information and track their plants in their profile page.
   • E.g. a "water plant" button would remind users of the last time they watered their plants.
   • This type of information is likely more suited to an SQL database.

6. Reply to comment

   • Reply to a specific comment in the comments section to aid ability to answer questions

7. Comment/Post Deleted By

   • I would like a message to display to users when a comment or post has been deleted.
   • This would eliminate any potential confusion caused by deletion.

8. Back-end Validation

   • Materialize CSS forms provide front-end validation but back-end validation would be ideal to ensure posts are entered and added correctly to the database.

9. Contact Page

   • A contact page would allow users to contact admin with any questions or issues they have.

10. Admin Dashboard

    • Increase admin's capabilities to manage the site.
    • Allow admin to delete or contact users directly.

11. Sort by

    • User a select box on Plants Page to allow user to decide what they would like to order the posts by (currently newest first) e.g. newest first.

12. Comments Notification

    • Notify users when a plant that they have posted recieves a comment.

13. Image URL validation

    • Currently, users are able to add an incorrect image url, resulting in a default to alt image.

Information Architecture

Database Choice

MongoDB was chosen for its usability.

Collections Data structure

In order to access relational data, shared inner objects were used inside the data structure:

1. Users Collection is linked to Plant_Posts Collection via username (posted_by)
2. Plant_Posts Collection is linked to Comments via plant_post_id

1. Users Collection - c

2. Plant_Posts Collection

• Two data types were included for the post date. The date version allows for back end filter functionality, the string version formats the date for the front end.

3. Comments Collection

4. Mainenance Level Collection

Technologies Used

Languages

• HTML5
• CSS3
• JavaScript
• Python

Frameworks, Libraries & Programs Used

1. Am I Responsive

   • Was used to create images of each page displayed on different screen sizes for this readme file

2. Font Awesome:

   • Font Awesome icons were used throughout

3. Flask

   • Flask was used to to construct and render html pages

4. Git

   • The Gitpod terminal from Git was used to commit to Git and Push to GitHub

5. GitHub:

   • GitHub was used to store the code after being pushed from Git

6. Google Fonts:

   • Google fonts was used to import the ‘Poppins’ font into the style.css

7. imagesLoaded

   • Images loaded was used in conjunction with the masonry grid to stop unloaded images from overlapping see here for details

8. Jinja

   • Jinja was used to displa data from the backend to the front-end displayed to the user

9. jQuery:

   • jQuery was used in conjunction with MaterializeCSS for interactive components

10. Materialize CSS

    • MaterializeCSS was used for styling, components and creating responsivity on a range of devices

11. Masonry

    • Masonry was used to create the cascading grid layout library when plant lists were used

12. MongoDB:

    • MongoDB Atlas is the database for this project

13. PIP

    • Pip was user to for install tools needed in this project

14. PyMongo

    • PyMongo was user to communicate between python and mongoDB

15. Slick Carousel

    • Slick carousel was used to create the carousel on the homepage

Testing

See testing.md

Deployment

Requirements

Required tools:

• Gitpod or other IDE

Must be installed on your machine:

• PIP
• Python 3
• An account withMongoDB Atlas or MongoDB running locally on your machine.
  • See how to set up your Mongo Atlas account here.
• If using an IDE other than Gitpod: Git

Making a Local Clone on Gitpod

1. Navigate to this project's github repository https://github.com/irahbt/houseplant-heroes

2. Above the list of files, click "Clone"

3. The default is to clone the repository using HTTPS, under "Clone with HTTPS", to clone the repository using an SSH key click "Use SSH"

4. Click the icon next to the link to copy your link

5. Open terminal

6. Change the current working directory to the location where you want the cloned directory

7. Clone repository with terminal command:

git clone <paste copied link>

8. Install all required modules with terminal command:

pip -r requirements.txt

9. Create a file called env.py

10. Create a file called .gitignore

11. Type env.py in to .gitignore file

12. Create a SECRET_KEY variable and a MONGO_URI to link to your own database

13. The env.py must contain the following variables (see Heroku Deployment step 8. for details of how to obtain these):

os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", "<your_secret_key")
os.environ.setdefault("MONGO_URI", "<your_mongo_uri")
os.environ.setdefault("MONGO_DBNAME", "houseplant_heroes")

14. Run application with terminal command:

python3 app.py

Heroku Deployment

1. Create a requirements.txt file with terminal command:

pip freeze > requirements.txt

2. Create a Procfile with terminal command

echo web: python app.py > Procfile

3. git add and git commit -m the new requirements in terminal and Procfile and then git push the project to GitHub.

4. Create an account on Heroku

5. Once logged in, create a new app by clicking the "New" button in your dashboard. Give it a name and set the region to Europe.

6. Confirm that the heroku app is linked to the correct GitHub repository.

7. On the Heroku dashboard for the app, go to "Settings" > "Reveal Config Vars".

8. Set the config vars

• To get your MONGO_URI read the MongoDB Atlas documentation

9. In the heroku dashboard, go to "Deploy"

10. In the heroku dashboard, click "Deploy"

11. Select deployment method > "GitHub"

12. Select "Enable Automatic Deployment"

13. Make sure master branch is selected

14. Click "Deploy Branch"

15. Once app has been built, click "View" to launch your deployed app

Credits

Content

• The majority of information for plant posts, where "Posted by Admin", was sourced from Patch Plants.

Media

• The hero image was sourced from Unsplash.

• Tiny PNG was used to compressthe hero image size.

• The majority of image URL's for plant posts, where "Posted by Admin", were sourced from Patch Plants.

• Real Favicon Generator was used to generate the website's favicon.

• Icons were sourced from either Font Awesome or Icons8

Code

• Materialize CSS code was used throughout.

• Code for the hero image was adapted from this W3School post.

• Code to validate Materialize CSS select was takend for this Stack Overflow post.

• Code for the slick carousel was taken from Kenwheeler's website.

• Code was adapted from the Code Institute Solutions Task Manager project.

Acknowledgements

Special thanks to my Code Institute mentor, Dick Vlaanderen, for his guidance throughout this project.