- Hey! Are you a plant lover?
- and / or do you want to become the Christopher Columbus of plants?
- A modern responsive Web tool for gathering plant specifications and identifying flora worldwide
- 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
- 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
- Materialize CSS 0.100.2 - Responsive front-end framework based on Material Design
- Flask 1.1.2 - Lightweight (micro) framework for building web applications
#98CAE9- Light Cornflower Blue#1c5925- Lincoln Green#31628b- Lapis Lazuli#3caf4e- Green Pantone#000000- Black#fafafa#444#3997e5rgba(0, 0, 0, 0.05)rgba(0, 0, 0, 0.2)rgba(0, 0, 0, 0.87)- 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
- 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.
- 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.
- 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.
- 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
- 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
- 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.
- 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.
- 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.
- 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
- 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
- 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.
-
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.
- 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.
- 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.
- W3C HTML Validator
- Jinja template syntax not understood. Relative errors shows :
{{ variables }},{% for %} {% endfor %}, etc.- No errors for the remaining code
- Jinja template syntax not understood. Relative errors shows :
- W3C CSS Validator
- No errors
- Javascript Validator
- No errors
- Chrome DevTools
- Console Navigating through the Website rendered no critical fails/errors in the console that were necessary to fix.
- Python validator
- No errors
- 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.
- 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.
- 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.
- 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.
- 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>
- IP :
- Your app should be successfully deployed to Heroku at this point.
- 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.
- 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
.envfile 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
- 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. - 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.
- 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.
- 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
- 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
- Anthony Ngene
- Thanks to my Code Institute mentor for his time, suggestions, and constructive feedback
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:
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 _____"
- [x] *marked the item as implemented successfully*
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
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.
Back to top
Back to top
Back to top
I have used Balsamiq Wireframes for my wireframes because:
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
Back to top
Back to top
Back to top
Back to top
Back to top
Back to top
Back to top
Back to top
Back to top
Back to top
My testing coverage for this project can be found here in the testing sub-directory or below.
| Galaxy S5 | Pixel | Pixel 2 XL | iPhone 6/7/8 | iPhone 6/7/8 Plus | iPhone X | iPad | iPad Pro | Desktop 1024px | Desktop >1200px | |
|---|---|---|---|---|---|---|---|---|---|---|
| View the site from any devices (mobile, tablet, desktop) | Pass | - | Pass | - | Pass | - | Pass | - | Pass | - |
| View the presentation home page | Pass | - | - | - | - | - | - | - | - | - |
| View all the plants | Pass | - | - | - | - | - | - | - | - | |
| Add a plant | - | - | Pass | - | - | - | - | - | - | - |
| Edit a plant | - | - | - | Pass | - | - | - | - | - | - |
| Delete a plant | - | - | - | - | Pass | - | - | - | - | - |
| View all the categories | - | - | - | - | - | Pass | - | - | - | - |
| Add a category | - | - | - | - | - | - | Pass | - | - | - |
| Edit a category | - | - | - | - | - | - | - | Pass | - | - |
| Delete a category | - | - | - | - | - | - | - | - | Pass | - |
| Search by scientific name, common name | - | - | - | - | - | - | - | - | - | Fail |
| View a specific message if no search result found | Pass | - | - | - | - | - | - | - | - | - |
| View a error page if the page doesn't exist | - | Pass | - | - | - | - | - | - | - | - |
Back to top
| User Stories - As a user, I want to... | Steps | Expected outcome | Actual outcome |
|---|---|---|---|
| View the site from any devices (mobile, tablet, desktop) | - | The website should be responsible and displayed correctly | as expected |
| View all the plants | Click on Plants menu then View plant or on "Get started" button from the home page, the list of plants should be displayed | Each plant should have a collapsible menu containing fields organized by section (Identity, Category, Botanic, Culture, Note) and modify and delete buttons | as expected |
| Add a plant | Click on Plants menu then Add Plant sub-menu, fill all the fields and submit | The plant should be added in the Plants page and in the database | as expected |
| Edit a plant | Click on Edit button for the chosen plant in the Plants page, update fields and submit | The plant should be updated in the Plants page and in the database | as expected |
| Delete a plant | Click on Delete button for the chosen plant in the Plants page. A confirmation modal should pop up with yes and no buttons. Agree | The plant should be updated in the Plants page and in the database | as expected |
| View all the categories | Click on Categories menu then View category | The list of categories should be displayed and modify and delete buttons in the Categories page | as expected |
| Add a category | Click on Categories menu then Add category sub-menu, fill all the fields and submit | The category should be added in the Categories page and in the database | as expected |
| Edit a category | Click on Edit button for the chosen category in the Categories page, update fields and submit | The category should be updated in the Categories page and in the database | as expected |
| Delete a category | Click on Delete button for the chosen category in the Categories page. A confirmation modal should pop up. Agree | The category should be updated in the Categories page and in the database | as expected |
| Search by scientific name, common name | Enter a scientific plant name (or part of it) and submit. Redo this test case with a common plant name (or part of it) | The result of the search should be displayed in the Plant search results page | The search results list fails to be displayed as expected. |
| View a specific message if no search result found | Enter a search which does not exist | The No results found page should be displayed (example: aaaaa ) | as expected |
| View an error page if the page doesn't exist | Enter an URL which does not exist | The 404 error page should be displayed (example: https://the-green-corner.herokuapp.com/get_plants/bb ) | as expected |
Back to top
| Galaxy S5 | Pixel | Pixel 2 XL | iPhone 6/7/8 | iPhone 6/7/8 Plus | iPhone X | iPad | iPad Pro | Desktop 1024px | Desktop >1200px | |
|---|---|---|---|---|---|---|---|---|---|---|
| website is responsive < 767 px | Good | Good | Good | Good | Good | Good | n/a | n/a | n/a | n/a |
| website is responsive > 768 px | n/a | n/a | n/a | n/a | n/a | n/a | Good | Good | Good | Good |
| home.html | ||||||||||
| Navigation bar: logo / buttons / links / search | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Content page: Images / text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Footer: text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| plants.html | ||||||||||
| Navigation bar: logo / buttons / links / search | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Content page: Images / text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Footer: text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| addplant.html | ||||||||||
| Navigation bar: logo / buttons / links / search | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Content page: Images / text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Footer: text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| editplant.html | ||||||||||
| Navigation bar: logo / buttons / links / search | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Content page: Images / text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Footer: text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| categories.html | ||||||||||
| Navigation bar: logo / buttons / links / search | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Content page: Images / text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Footer: text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| addcategory.html | ||||||||||
| Navigation bar: logo / buttons / links / search | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Content page: Images / text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Footer: text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| editcategory.html | ||||||||||
| Navigation bar: logo / buttons / links / search | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Content page: Images / text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Footer: text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| noresultsfound.html | ||||||||||
| Navigation bar: logo / buttons / links / search | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Content page: Images / text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Footer: text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| plantsearchresults.html | ||||||||||
| Navigation bar: logo / buttons / links / search | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Content page: Images / text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Footer: text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| 404errorpage.html | ||||||||||
| Navigation bar: logo / buttons / links / search | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Content page: Images / text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
| Footer: text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
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.
| All pages | Chrome | Edge | Firefox | Safari | Opera | IE |
|---|---|---|---|---|---|---|
| Expected appearance | Good | Fair | Good | Poor | Good | Poor |
| Expected responsiveness | Good | Good | Good | Poor | Good | Poor |
Back to top
Back to top
HTML
CSS
Javascript
Chrome DevTools
Python
Back to top
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:
Please note - in order to run this project locally on your own system, you will need the following installed:
Next, there's a series of steps to take in order to proceed with local deployment:
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
Back to top
Back to top
Back to top
Sources of the images used on this site:
Back to top
Back to top
Back to top