1. About

   • Why this project?

2. UX

   • User Stories
   • Design
     • Framework
     • Color Scheme
     • Icons
     • Typography
   • Wireframes
   • Data Integration

3. Features

   • Existing Features
     • Navigation bar
     • Footer
     • Homepage
     • Base template
     • Plants page
     • Add plant page
     • Edit plant page
     • Delete plant modal
     • Add category page
     • Edit category page
     • Delete category modal
     • No result found page
     • 404 error page
     • Defensive features
   • Features Left to Implement

4. Technologies Used

   • Front-End Technologies

• Back-End Technologies

4. Testing

• User story validation
  • Layout responsiveness
  • Compatibility
  • Testing left
  • Validators
  • Known Issues

5. Deployment

   • Deployment – Live website
   • Deployment – Run locally

6. Credits

   • Content
   • Media
   • Code
   • Acknowledgements

The general purpose of The Green Corner is gathering plant specifications and identifying flora across the globe. And this anytime, anywhere as this application is available on various devices as desktops, tablets and mobile.

I've decided to create a modern responsive Web tool for gathering plant specifications and identifying flora worldwide. Because I enjoy gardening and I look for information about plants depending on the season (planting, growth, potting, care, trimming, cutting, etc. ) which are located in different places (saved online, written in books/magazines, saved in a folder on my computer, etc.).
This was the good opportunity to finally have a single application to gather all my botanic experiences and knowledge centralized in one site. A few friends and family members like plants as well and we like sharing information. With this app I can easily provide all my plant information from only one location and My Green Corner can easily be shared.
In a future version of this app the users will have the possibility to authenticate so it will allow others to store their own plant information, their own Green Corner while having access to all plant data shared.

Back to top

This project is part of my Code Institute Full Stack Software Development studies, the Data Centric Development module. The objective of this milestone project is building a full-stack site that allows your users to manage a common dataset about a particular domain using CRUD operations: Create, Read, Update, Delete the selected dataset.

For this project we could choose from one of the following ideas:

• Bring your own idea(s) to life, based on providing value to users to address a specific real or imagined need.
• Create an online cookbook
• Create a jargon glossary/dictionary for a particular domain
• Build a book review and recommendation site

My modern responsive Web tool for gathering plant specifications and identifying flora worldwide is built using HTML, CSS, Materialize CSS, JavaScript, jQuery, Flask, Jinja, Python and MongoDB.

Back to top

"As a user, I want to _____"

• View the site from any devices (mobile, tablet, desktop)
• View the presentation homepage
• View all the plants
• Add a plant
• Edit a plant
• Delete a plant
• View all the categories
• Add a category
• Edit a category
• Delete a category
• Search by scientific name, common name
• View a specific message if no search results found
• View a error page if the page doesn't exist

Back to top

Ideas which pop up in my mind when people talk about botanic and gardening are a calm and relaxing atmosphere, a sober and simple design, Green color obviously but not only, natural colors as well.
This is why I have designed my entire project around natural and sober colors representing the elements of Nature.

I choose first the website logo representing the idea of identifying flora worldwide. Then I selected the palette by using the color scheme generator from a photo of the website logo, named Coolors.co.
From my opinion ( I might be wrong :) ) the logo, the colors, the pictures - the visual design of the website in general - are what people memorize first and it's what people will remember over time. It gives them a first impression and a first feeling. If the global visual design of the website looks and feels good - if the user like it - he/she will give the application a try. If not they are lot of chances he/she will probably look for another application among the numerous applications available on the market. So visual design and feeling is a significant aspect I believe.

I used the Parallax Template from Materialize CSS which I customized in my vision of the concept of the elements of Nature. This template was a good base to the sober and simple design I wanted to create.

Back to top

• Materialize CSS 0.100.2 - Responsive front-end framework based on Material Design
• Flask 1.1.2 - Lightweight (micro) framework for building web applications

Back to top

In keeping with the the elements of Nature idea, I have chosen a natural and sober color scheme referring to the elements of Nature. I first choose my logo from Flaticon(https://www.flaticon.com). From there, I used the color scheme generator Coolors.co which generated the following palette from my logo picture. And finally I selected pictures which fit well in my color scheme and in the space allocated.

• #98CAE9- Light Cornflower Blue
• #1c5925- Lincoln Green
• #31628b- Lapis Lazuli
• #3caf4e- Green Pantone
• #000000- Black
• #fafafa
• #444
• #3997e5
• rgba(0, 0, 0, 0.05)
• rgba(0, 0, 0, 0.2)
• rgba(0, 0, 0, 0.87)

Back to top

• Font Awesome 5.14.0
• It fits my needs for this project in complementary with Material Design icons
• Material Design
  • It fits my needs for this project in complementary with Font Awesome icons

Back to top

• I have decided to use the Google Font B612 throughout the website. And I have imported the Google Font Amatic SC as a secondary font for the 404 error page. Both fonts are easy to read.

Back to top

I have used Balsamiq Wireframes for my wireframes because:

• Code Institute have provided all students a free licence until end of 2020. I got to use this software a few years ago and I am pretty happy to get the chance to use it again.
• The simplicity, rapidity and ease of use by focusing on structure and content.

My wireframes for this project can be found here in the wireframes sub-directory.

Back to top

I decided to use MongoDB Atlas for my project in case the website gets a big amount of data in the future. I also wanted the user to be able to choose what data they gather in the plant form. I believe MongoDB offers more flexibility concerning my website in the long run. Moreover before this project I've never used MongoDB so it was the opportunity to get new knowledge and learning a new technology.

Back to top

• The navigation menu is fixed on the top thus facilitating the access of the navigation from anywhere on the website without having to scroll.
• Clicking on the logo link reloads the Homepage.
• Two dropdown menu items displaying 2 sub-menu items which are linked to the relevant page allowing the user to navigate smoothly between pages.
• Search bar allowing the user to search a plant by scientific name, common name. If the search field is empty or there are no search results matching with the search entry a message is shown letting the user know they are no results found.
• In mobile view, the navigation bar is collapsed allowing the users more space on the screen. The users can click on the collapsed menu icon and still receive the full menu as a drop down function.
• On mobile view, the side bar menu displays a background image with the logo in foreground, a search bar and the two dropdown menu items I mentioned above.

• The footer contains a Company bio description, a Contact section with Github and Twitter icon links opening in a browser new tab, a Support description with a button redirecting to the Patreon website (as no Patreon account has been created yet for this projet) in a browser new tab, a Contact description and a button redirecting to the Gitter website (as no Gitter room has been created yet for this projet) in a browser new tab.
• A copyright mention is displayed with my name beside a GitHub icon link which opens my Github home page in a new browser tab.

Back to top

• This is an introduction page presenting the project and the application.
• A title section with the short description of the website and a button "Get started" redirecting to the Plants page.
• A section displaying the main motivations and benefits of the website
• A section displaying a Contact description and a button redirecting to the Gitter website (as no Gitter account has been yet created for this project) in a browser new tab.

• A title section with the short description of the website on the top of the page are common elements of all pages.
• A content section which loads all the various pages I am going to detail below.
• A section with the short description of the website at the bottom of the page are common elements of all pages.

• View all plant records. Scientific names and common names are displayed.
• Collapsible menu with all the plant fields organized in sections: Identity, Category, Botanic, Culture, Note.
• Delete and Edit buttons

Back to top

• Access to this page by clicking on the Plants dropdown and then on the sub-menu item "Add Plant"
• A form for adding a plant is displayed and organized by sections, Identity, Category, Botanic, Culture, Note, with the relevant fields.
• Add plant and cancel buttons. Add plant button triggers the creation of the plant record in the database.

• Access to this page by clicking on the Edit button of the selected plant in the Plants page.
• A form for editing a plant is displayed and organized by sections, Identity, Category, Botanic, Culture, Note, with the relevant fields.
• Edit plant and cancel buttons. Edit plant button triggers the update of the plant record in the database

Back to top

• Access to this modal by clicking on the Delete button of the selected plant in the Plants page.
• The modal displays a delete confirmation message and two buttons, yes and no. Yes button triggers the suppression of the plant record in the database. No button redirects the user to the Plants page.

• View all category records. Category name is shown.
• Delete and Edit buttons.

• Access to this page by clicking on the Categories dropdown and then on the sub-menu item "Add Category".
• A form for adding a category is displayed.
• Add category and cancel buttons. Add category button triggers the creation of the category record in the database.

Back to top

• Access to this page by clicking on the Edit button of the selected category in the Categories page.
• A form for editing a category is displayed.
• Edit category and cancel buttons. Edit category button triggers the update of the category record in the database.

• Access to this modal by clicking on the Delete button of the selected category in the Categories page.
• The modal displays a delete confirmation message and two buttons, yes and no. Yes button triggers the suppression of the category record in the database. No button redirects the user to the Categories page.

• Humoristic picture and message letting know the user no result have been found matching with his/her search.
• Link redirecting to Homepage.

Back to top

• Humoristic picture and message letting know the user the page does not exist.
• Link redirecting to Homepage.

• All plants and categories fields throughout the various pages (View/Add/Edit/Delete pages) are mandatory except the note field. If a required field is empty when submitting, a message is displayed letting know the user the field has to be filled.
• If the search field is empty or if there are no search results matching with the search entry, a message is shown letting the user know they are no results found.
• If the page doesn't exit the 404 error page is displayed informing the user.

Back to top

• A "profile photo" of the plants to be displayed in the Plants list page.
• User can upload photos of plants for making the identification easier.
• User authentication

Back to top

• GitHub - Used as remote storage of my code online.
• Atom - Used as a local IDE.
• Compressjpeg - Used to compress images for loading faster
• Techsini - Used to generate multi-device website mockup

Back to top

• HTML - Used as the base for markup text.
• CSS - Used as the base for cascading styles.
• Materialize CS 0.100.2 - Used as responsive front-end framework, based on Material Design.
• JavaScript - Used for user interactions.
• jQuery 3.5.1 - JavaScript library, used to simplify some of the DOM manipulations.

Back to top

• Flask

  • Flask 1.1.2 - Used as a Lightweight (micro) framework for building web applications.
  • Jinja 2.11.2 - Used for templating with Flask.

• Heroku

  • Heroku - Used for app hosting.

• Python

  • Python 3.8 - Used as the back-end programming language.
  • [MongoDB Atlas]((https://www.mongodb.com/) - Used to store a document oriented database in the 'cloud'.
  • PyMongo 3.10.1 - Used as the Python API for MongoDB.

Back to top

My testing coverage for this project can be found here in the testing sub-directory or below.

Back to top

Back to top

Back to top

I tested the website across the 6 main browsers in both desktop and mobile configuration to ensure a large number of users can use it successfully.

• Chrome v.84.0
• Edge v.85.0
• Firefox v.80.0
• Safari v.5.1.7 for Windows 10
• Opera v.70.0
• Internet Explorer v.11

• IE: Some CSS3 properties and HTML5 elements are not fully supported

• Safari v.5.1.7: It’s an outdated version and lacks many of the features present in the latest version of Safari. The last version of Safari for Windows was released on May 9, 2012.

Back to top

• There is no way to install the latest version of the Safari browser on Windows 10 as Apple stopped developing Safari for Windows operating system long ago. For testing this website on the latest version of Safari, I will have to install the newest version of macOS on Windows 10 in a virtual machine.

Back to top

HTML

• W3C HTML Validator
  • Jinja template syntax not understood. Relative errors shows : {{ variables }}, {% for %} {% endfor %}, etc.
    • No errors for the remaining code

CSS

• W3C CSS Validator
  • No errors

Javascript

• Javascript Validator
  • No errors

Chrome DevTools

• Chrome DevTools
  • Console Navigating through the Website rendered no critical fails/errors in the console that were necessary to fix.

Python

• Python validator
  • No errors

Back to top

• When a search entry matches with some results, this list is not displayed as expected in the Plant search results page. The search results list fails to be displayed correctly.
• When a category is updated/deleted, the category_name field associated in plants pages is not updated/deleted.

Back to top

This site is currently deployed on Heroku using the master branch on GitHub. To implement this project on Heroku, the following steps were taken:

1. Create a requirements.txt file so Heroku can install the required dependencies to run the app.
   • sudo pip3 freeze --local > requirements.txt
   • My file can be found here.
2. Create a Procfile to tell Heroku what type of application is being deployed, and how to run it.
   • echo web: python run.py > Procfile
   • My file can be found here.
3. Sign up for a free Heroku account, create your project app, and click the Deploy tab, at which point you can Connect GitHub as the Deployment Method, and select Enable Automatic Deployment.
4. In the Heroku Settings tab, click on the Reveal Config Vars button to configure environmental variables as follows:
   • IP : 0.0.0.0
   • PORT : 5000
   • MONGO_URI : <link to your Mongo DB>
5. Your app should be successfully deployed to Heroku at this point.

Please note - in order to run this project locally on your own system, you will need the following installed:

• Python3 to run the application.
• PIP to install all app requirements.
• Any IDE.
• GIT for cloning and version control.
• MongoDB to develop your own database either locally or remotely on MongoDB Atlas.

Next, there's a series of steps to take in order to proceed with local deployment:

• Clone this GitHub repository by either clicking the green Clone or download button and downloading the project as a zip-file (remember to unzip it first), or by entering the following into the Git CLI terminal:
  • git clone https://github.com/sctlcd/the-green-corner.git.
• Navigate to the correct file location after unpacking the files.
  • cd <path to folder>
• Create a .env file with your credentials. An example can be found here. Be sure to include your MONGO_URI
• Install all requirements from the requirements.txt file using this command:
  • sudo -H pip3 -r requirements.txt
• Sign up for a free account on MongoDB and create a new Database called the_green_corner. The Collections in that database should be as follows:
  • database documentation in the database sub-directory
  • database diagram or here in the database sub-directory

plants

_id PK int
scientific_name string
common_name string
genus string
species string
family string
category_name string FK >- categories.category_name
plant_type string FK >- plant_types.plant_type_name
shade_tolerance string FK >- shade_tolerance.shade_tolerance_name
note NULL string

categories

_id PK int
category_name string

plant_types as pt

_id PK int
plant_type_name string

shade_tolerance as st

_id PK int
shade_tolerance_name string

• You should now be able to launch your app using the following command in your terminal:
  • python app.py
• The app should now be running on localhost on an address similar to http://127.0.0.1:5000. Simply copy/paste this into the browser of your choice.

Back to top

• My inspiration comes from
  • Pl@ntNet, the "Shazam" of Botanic, allowing you to identify plants that you photograph during your country walks.
  • Aujardin, a site dedicated to gardening with advices on plant cultivation, maintenance and development of gardens, vegetable gardens, orchards,...
  • Garden.com, a website for learning how to garden and grow plants successfully.
  • Better home & garden, inspiring ideas for gardening,...
  • Garden.ie, a website which offers accurate horticultural advices.
    • Bored panda - creative 404 error pages for the 404 error page

Back to top

• Aujardin, a site dedicated to gardening with advices on plant cultivation, maintenance and development of gardens, vegetable gardens, orchards,...
• Garden.com, a website for learning how to garden and grow plants successfully.

Back to top

Sources of the images used on this site:

• From images sub-directory - Github
  • garden-min - Pexel | copyright Mike
  • gooseberry-min - Pixabay | copyright GLady
  • leaves-min - Pixabay | copyright Gregovish
  • lemon-min - Pixabay | copyright GregMontani
  • meadow-min - Pexel | copyright Freddie Ramm
  • wild-flowers-min - Pixabay | copyright DreamyArt
  • the_green_corner_logo-min - Flaticon | copyright Freepik
  • humour404error - Pinterest | copyright Joe Dunaway
  • favicon - Flaticon | copyright Freepik
  • noresultsfound - Free vectors | copyright BSGStudio

Back to top

• Parallax Template - Materialize CSS
• Parallax Materialize CSS - Materialize CSS parallax
• Flask 1.1 documentation - Flask
• Jinja 2.11 documentation - Jinja
• MongoDB Atlas 3.10 documentation - MongoDB Atlas
• Readme file information - Tim Nelson Software Developer and Tutor at Code Institute
• Environment variables - Igor Basuga Tutor at Code Institute
• Environment variables - Code Institute archive resources

Back to top

• Anthony Ngene
  • Thanks to my Code Institute mentor for his time, suggestions, and constructive feedback

Back to top