This is a Code Institute student project for Milestone 3, built to satisfy the requirements for the EKC DigitalLearn Diploma (Level 5) in Web Application Development.
This project has been created in order to provide a community CRUD application on a deployed interactive website. The project was built using Gitpod.
The information has been presented in a way that ensures the users achieve their goals of:
- understanding what the site's function is
- understanding how to create, read, update and delete their own records or posts
- being able to register, log in and log out of this community site
The site also enhances the owner's goals by:
- showcasing their database design skills
- showcasing their Python programming skills
- showcasing their Flask skills
- showcasing their back-end development skills by allowing users to change data in a MongoDB database with the aid of the Flask mini-framework.
- The technologies used were HTML, CSS, Python, Flask and MongoDB.
- This interactive back-end project contains pages to enable users to create, read, update and delete user records in a non-relational database
- This README.md file explains what the project does and the value it provides for the users
- Version control is provided by Git and GitHub
- External code, libraries, templates, images, information, etc. will be listed in the Credits, at the bottom of this README.
- This project is deployed via Heroku. The code stored in a GitHub repository, whilst the data is stored in the non-relational database, MongoDB Atlas.
View the demo video on YouTube.
The aim of the project is to provide a community site for garden and allotment enthusiasts. Users will be able to log in to create records for plants they wish to cultivate. It will be designed to aid the user in deciding which seeds or plants to set (sow/plant) in a particular month. They will also be able to add if the plants are for human (edible) or animal food. On the home page users will be able to see everyone's entries but on their own profile page they will only be able to view their own plants.
The site is designed to be responsive and accessible on a range of devices, making it easy to use for potential users.
✅ denotes current features
"As a user, I would like to _____________________________"
- ✅ create, read, update and delete my own plant records.
- ✅ easily understand how to use the site.
- ✅ keep my information secure.
- ✅ view the site without logging in.
- ✅ search for plants to feed my pet.
- ✅ search for plants that I need to set in a particular month.
"As an owner, I would like to _____________________________"
- ✅ build a Flask app.
- ✅ allow users to store their data via the app.
- ✅ build a community gardening app to also assist pet owners.
- ✅ build an app to be visually attractive.
-
This app was inspired by the Code Institute backend development tutorial for a Task Manager, by Tim Nelson.
-
What is a CRUD app? This type of app allows the user to create, read, update and delete records or posts in a database via graphical interface. In this case the database is MongoDB Atlas 5.0.15 and as the app is developed with Python 3.8.11, the graphical interface is provided by HTML5 and the mini-framework, Flask 2.2 with Materialize CSS 1.0.0.
-
Why this app? Our household has an allotment and every year in the early spring, we excitely purchase lots of seeds for pretty flowers and delicious vegetables. These precious packets are then stored in a 'safe place' until the time comes for sowing. As usual - out of sight, out of mind - these seeds get forgotten about until it is too late. So I developed this app for like minded folk - here we can create our plant posts stating in which month they can be set. A search facility on keywords allows the user to both search their own entries and others. The home page does not require login, but profile pages do. All entries are visible to every one, but only the post owner can edit or delete them.
-
View the website design flowchart to see which Python functions are associated with which web pages of the app:
Flask uses the route() decorator to bind a function to a URL. For example:
@app.route('/')
def index():
return 'Index Page'- Materialize 1.0.0 is a modern and clean layout of Materialize as a front-end framework, with simple documentation.
- jQuery 3.5.1 was used for minimal JavaScript programming.
- Flask 2.2.3 is a microframework used to render the back-end Python with the front-end Materialize.
The following Materialize colour scheme was chosen for simplicity, readability and lends itself nicely to the subject of gardening.
Roboto font is the standard font used by Materialize, which is used for good readability and contrast when required. It is considered both friendly and professional, so should suit most sites and devices.
- In general, all pages have the Materialize white background with dark teal or black text. This ties into the subject matter whilst matching the default shade of teal for Materialize toggle switches and dropdown selectors
- The Home and Profile pages feature the standard Materialize Card Reveal displayed in a grid style of up to three columns across the page. Each card has a image with minimum content, but when clicked, further information is revealed. At the top of the page is a search panel for finding plants via keywords or phrases with Reset and Search buttons.
- The About page contains only text and icons in a Materialize Card Panel
- The Add/Edit/Delete pages include a mixture of text, text inputs, toggle switches and dropdown selectors with Cancel and Add/Update/Delete buttons in a Card Panel.
- The Register and Log In pages also contain text inputs only with Log In/Register buttons within a Card Panel.
- The Categories page features the Basic Card displayed in a grid style of up to four columns across the page.
View the wireframe PDF here.
The pages contain the same functionality and look the same on every device, with the exception to the menus and the number of plant cards displayed across the screen.
- Home
- Profile
- Add / Edit Plants Form
- Categories
- Register
- Log In
- Logged Out Screen
-
Menu
- Logged In
- Logged Out
- Home
- Other Pages - same as for tablet
- Home
- Other Pages - same as for tablet
Database Entity Relationship Diagram (MongoDB)
Collection (Table) Examples
- Plants
- Categories
- Months
- Animals
- Users
- This app consists of nine user pages for:
- Home, About, Log In, Register, Profile, Add Plant, Edit Plant, Delete Plant, Log Out
- Plus two additional administrator pages for:
- Categories and Add Category
- And a further two pages for:
- 404 page not found and 500 internal server errors
Navigation bar will be the default responsive Materialize one for all pages, except those for the 404 and 500 errors, which will have none.
-
Desktops
- the menu items: Vazy Garden branding, Home, About, Profile, Add Plant, LogOut will be inline and fixed across the top of the screen. All pages will have white text on a teal banner and on hover, a dark teal backgound.
- Vazy Garden and Home will navigate to route /get_plants and render plants.html.
- About to /about and render about.html.
- Profile to /profile/(username) and render profile.html.
- Add Plant to /add_plant and render add_plant.html.
- Add Category (administrator user only) to /get_categories.
- Log Out to /login and render login.html.
-
Mobiles
- will feature the collapsed navigation with a hamburger icon, which when selected, will reveal a sidenav slide out menu with black text on a white background. On hover, the text background will change from white to light grey. This menu will contain the same items as the desktop one.
Anyone (guest, member, administrator) can view this page which features everyone's plant cards and a search panel. The plant cards are laid out across the screen in alphabetical order of plant name.
Outlines the reason for the app and it's instructions for use.
Anybody can register for free and create their own unique profile to store their own plants to set. This is built using Werkzeug for password hashing, authentication and authorisation. Passwords are hashed for security purposes. Werkzeug is a comprehensive WSGI (Web Server Gateway Interface) web application library.
This facility is built using Flask wrapper functions and decorators for authentication and authorization in order to validate user details. Two login decorators have been created; one for registered users and another for the administrator.
Flask decorators protect users' profiles and data. Only the current logged-in owner can add, edit or delete their plants. The owner's plants are displayed across the screen in plant-name alphabetical order. Owners select the vertical ellipsis on each plant card to reveal delete/edit buttons.
Logged-in users can add plants with the following information:
- plant category e.g. flower, vegetable, etc
- plant name
- plant description
- month to set (sow or plant)
- indicate if edible (for humans)
- specify an animal to feed
- add an Unsplash image link
- add plant catalogue link for easy purchase
- indicate if the sowing or planting is done
Logged-in users can only edit their own plants and update the plant information previously added. Owners select the vertical ellipsis on each plant card to reveal edit button. On selecting edit, they will then be taken to the Edit Plant page where they can change all fields and update, or otherwise cancel at any time.
Logged-in users can only delete their own plants by selecting the vertical ellipsis on each plant card to reveal delete button. On selecting delete, they will then be taken to the Delete Plant page where they can confirm delete, or otherwise cancel.
Logged-in users can log out of their account.
A 404 page-not-found is visible when the user tries to access an unknown page. This can happen if they mistype an url for a site page, e.g. mistype
vazy-garden.herokuapp.com/loggin
instead of the correct one
vazy-garden.herokuapp.com/login
A link back to the home page is provided.
A 500 internal server error page is visible when the server encounters an unexpected condition that prevents it from fulfilling a request. A link back to the home page is provided.
Only the administrator can view the page with the list of categories. From here they can navigate to the Add Category page.
Only the administrator can view this page in order to add categories.
- Modify the administrator to be a named person, identified by an extra field in the database, e.g. admin: "yes".
- Allow users to change their passwords.
- Allow users to 'like' other's plants.
- Allow users to 'borrow' other's plants for own profile, but not allow editing of these.
- Allow the administrator to delete and edit categories
- Allow users to message each other
- Checking for inappropriate material.
- Cloud developer platform from Gitpod.
- IDE integrated into Gitpod from Visual Studio Code.
- Debugging assisted by Chrome Developer Tools.
- Version control integrated into Gitpod from Git.
- Wireframes from Balsamiq.
- Roboto font from Materialize.
- Colour palette generated by Materialize.
- Icon library and toolkit from Font Awesome 5.
- Favicon created on favicon.cc.
- Online photo editor from Pixlr.
- Stock photos from Unsplash.
- Showcasing the site on different devices by Bytes
- Paint from Microsoft
- Snip and Sketch from Microsoft
- PDF Reader from Adobe Acrobat Reader
- Flowchart by diagrams.net/draw.io
- MongoDB ERD created by DbSchema
- Demo video for YouTube created on Clipchamp
- HTML5 as the base for markup text.
- CSS3 for custom styling the site.
- jQuery 3.5.1 for JavaScript functionality.
- Materialize 1.0.0 is a modern responsive CSS framework based on Material Design by Google.
- Python 3.8.11 is a high-level, general-purpose programming language.
- Flask 2.2 is a micro web framework written in Python.
- Jinja2 for templating with Flask.
- Werkzeug 2.2.3 for password hashing, authentication and authorisation.
- Heroku is used as "Platform as a Service" (PaaS) for app hosting.
- MongoDB Atlas 5.0.15 is used as a non-relational database plugin via Heroku.
- HTML validation from W3C.
- CSS validation from Jigsaw (W3C).
- Python validation from CI Python Linter.
- jQuery validation from JSHint.
- Web page quality improvements assisted by Lighthouse and WebPageTest.
See the document TESTING.md for the code validation, site evaluation and manual tests.
See the document DEPLOYMENT.md for local and Heroku deployment.
A huge thank you to the following people and organisations, because without you, the website would not have been produced in it's present form.
Heroku deployment instructions from Code Institute video tutorial
Readme styling from Tim Nelson's project Unicorn Attractor
Markdown Cheatsheet from Adam Pritchard
Plant images from Dean Lewis on Unsplash
Forget-me-not image from Noah Boyer on Unsplash
Default/fallback plant image (pineapple wearing sunglasses) from Heather Ford on Unsplash
Wallpaper for 404/500 page from Maxim Berg on Unsplash
Emoji shortcodes from Ikatyang on GitHub
Although the code is the work of the author, some of the code has been sourced from or inspired by others.
Many of the references have been embedded as links throughout this document and indicated by the active blue text links.
The code is based on Task Manager Tutorial by Tim Nelson
Fort Knox Password Generator from RandomKeygen
Adding custom validation to Materialize dropdown by Tim Nelson
View Decorators documentation from Flask
Flask Decorators - Login_Required pages Flask Tutorial by Sentdex on YouTube
Rachel Furlong - EKC Training Course Facilitator, for generous support and advice.
Rohit Sharma - Code Institute Mentor, for the continuous feedback and guidance in industry standards.
Alan McGee - Code Institute Tutor, for assisting with some coding issues.