Experience our live website here!
Welcome to tonne (german for: Waste Bin) - the Waste Management site and your go-to solution in the quest for efficient and eco-friendly waste handling! 🚀
⤴️ preview of the site on different devices
We are not just about managing waste, it's about creating a sustainable future, one tonne at a time. Here's what we offer:
📅 Waste Collection Reminders:
👥 Community Interaction:
Join us in building a community-driven resource that's making a real difference. Together, we can create a cleaner, greener world - one bin at a time! 🌳
I used a subtle green and white colour scheme to reflect the eco-friendly nature of the app. Coolors was used to generate the colour palette.
⤴️ Screenshot of the colour palette from Coolors
--pigment-green: #25a55f
- used for primary buttons and highlights--emerald: #57d992
- used for secondary buttons and highlights--dark-spring-green: #1c7b47
- used for darker highlights--jet: #2a2a2a
- used for bright backgrounds--platinum: #e6e6e6
- used for light buttonsIn order to have easier access to my colour scheme within my code i used CSS :root
variables. These also include transparent versions of the colours for backgrounds.
:root {
--primary-color: #25a55f;
--secondary-color: #57d992;
--darker-secondary-color: #1c7b47;
--primary-transparent-background: #25a55f45;
--secondary-transparent-background: #1c7b47db;
--dark-background: #2a2a2a;
--light-background: #e6e6e6;
}
Josefin Sans was used for all titles and subheadings. It's a modern, elegant font that stands out, complementing the otherwise minimalistic colour scheme and design.
Lato was used for body and all other text. It's a clean, easy-to-read font that ensures a smooth user experience.
Font Awesome icons were used throughout the site, such as the social media icons in the footer.
To follow best practice, wireframes were developed for mobile, tablet, and desktop sizes. I've used draw.io to design my site wireframes.
View the original draw.io file of the wireframes. (click on the "Open with" button and select "draw.io")
Page | Mobile Wireframe | Tablet Wireframe | Desktop Wireframe |
---|---|---|---|
Landing Page | ![]() |
![]() |
![]() |
Schedule List | ![]() |
![]() |
![]() |
Schedule Detail and Editor | ![]() |
![]() |
![]() |
Dashboard | ![]() |
![]() |
![]() |
Schedule Builder | ![]() |
![]() |
![]() |
Check out the User Story Map created for this project using Github Projects. It includes all user stories and makes them easier to manage as they are grouped by Epic and MoSCoW priority. Meaningful accepance criteria were added to each user story in order to make development more goal focused.
⤴️ Screenshot of the User Story Map
Listed below are only the user stories that were prioritized as Must Have.
For all user stories and especially to see the acceptance criteria for each story listed below, please refer to the User Story Map instead. Note that MoSCoW prioritization of the user stories is frozen at the beginning of the last iteration to give more insight in the development process.
The following flowchart depicts possible user journeys in the waste management app. The app tries to let the user do as much as possible without having to sign up or log in. The user is only prompted to sign up when they want to subscribe to a schedule or create a new one. The flowchart also shows the user journey for the schedule builder and the dashboard.
⤴️ Flowchart of the user journey
When first visiting the site, users are greeted with a clean, modern and inviting landing page. It includes a hero image, a brief description of the site, and a call-to-action form to get started.
The landing page is designed to be simple and user-friendly, providing a quick overview of the site's purpose and functionality. It encourages users to explore the site further and get started with their waste management journey.
⤴️ Screenshot of the landing page
relevant project files: index.html
The navigation bar is fixed at the top of the page, ensuring easy access to the most important links. It includes the logo (which is a link to the homepage), links to the schedule list, the schedule builder, the dashboard and login/register.
The navigation bar is designed to be simple and intuitive, providing quick access to the site's main features. It is responsive and collapses into a hamburger menu on smaller screens using the Bootstrap framework.
⤴️ Screenshot of the navigation bar
Some custom Javascript code was used to change the navigation bar's opacity once scrolling down the page. This was done to make the hero section of the landing page cleaner and more focused.
relevant project files: base.html, index.js
The footer includes links to the site's social media profiles, such as Facebook, Twitter, and Instagram. It also includes a link to the About page and displays a copyright notice.
The footer is designed to be simple and unobtrusive, providing additional information and links for users who are interested.
⤴️ Screenshot of the footer
relevant project files: base.html
The About page provides a brief overview of the site's purpose and the creator. It also identifies the site as a Code Institute student project.
The About page is designed to be informative, providing users with background information. It helps to establish trust and credibility with users, ensuring they feel comfortable using the site.
⤴️ Screenshot of the about page
relevant project files: about.html
The schedule search bar allows users to search for their postcode and receive a list of waste collection schedules. The search bar is displayed prominently as the CTA (Call to Action) on the Landing page and in the Schedule List page.
Once the user has entered their postcode, they are presented with a list set of schedule cards that match their search criteria. From here, they can already like and/or subscribe to a schedule.
The schedule list has enabled pagination, so that the user can easily navigate through the list of schedules.
The search bar and list are designed to be simple and intuitive, providing users with a quick and easy way to find the information they need.
⤴️ Screenshot of the search bar and schedule list
A custom form validator using a regex pattern was used to ensure that the user enters a valid postcode and gets appropriate feedback if they don't.
<div class="form-floating">
<input type="text" id="postcodeInput" class="form-control rounded-corners"
placeholder="Search by postcode" aria-label="Search by postcode"
aria-describedby="button-addon2" pattern="^\d{5}$"
title="Please enter a 5 digit postcode (only German postcodes are supported)" required>
<label for="postcodeInput">Search by postcode</label>
</div>
relevant project files: schedule_list.html, index.js
When a user clicks on a schedule card, they are taken to the schedule detail view. Here, they can see all the details of the schedule, including the waste types, collection days, title, location and description. They can also like and subscribe to the schedule.
Below the schedule details is a list of user comments, allowing users to share their thoughts and experiences with the schedule.
For the schedule as well as for each comment, the owner of the item can edit or delete it.
The schedule detail view is designed to be informative and engaging, providing users with all the information and possibilites to take action they need in one place.
⤴️ Screenshot of a schedule detail view
relevant project files: schedule_detail.html, comments.js, only_schedule.js
Besides the regular built in Django superuser functionality, I have added a custom superuser functionality that allows the superuser to delete or edit any schedule. This can be done while viewing any schedule detail page as a superuser.
This feature is very rudimentary and only allows the superuser to delete or edit schedules. It does not include any kind of moderation or approval process for schedules and there is no feedback to the owner of the schedule when a superuser deletes or edits a schedule.
relevant project files: schedule_detail.html
Users can like and subscribe to schedules, as well as leave comments. This allows them to interact with the site and the community, providing feedback and sharing their experiences.
A like is a simple way for users to show their appreciation for a schedule. Other users can see how many likes a schedule has received - thereby indicating its popularity and reliability.
Subscribing to a schedule means that the user will be able to set up notifications for this schedule. A subscribed to schedule will be displayed on the user's dashboard. Subscriptions also contribute to indicate the reliability of a schedule.
Subscriptions and likes can be added and removed by the owner via the schedule list and schedule detail pages.
Comments allow users to share their thoughts and experiences on a schedule. They can ask questions, provide feedback, or share additional information. Comments are displayed below the schedule details and can be edited or deleted by the owner. Comments can be added, edited and deleted via the schedule detail page.
The like, subscribe and comment features are designed to encourage user interaction and engagement, creating a sense of community and trust.
⤴️ Screenshot of the comments section and the like and subscribe buttons
relevant project files: comments.js, schedule_detail.html, schedule_list.html, dashboard.html
The schedule builder allows users to create a new waste collection schedule. They can add waste types, collection days, and any additional notes. Once the schedule is created, it is added to the database and can be viewed by other users.
The schedule builder is split up into 3 steps:
The schedule builder allows users to create a new waste collection schedule. It consists of three steps:
Location Form: Here the user can enter their postcode. If a schedule for this postcode already exists, the user is notified.
Schedule Title / Description / Image Form: Here the user can enter a title and description for the schedule. They can also upload an image to help validate the schedule.
Collection Events Calendar Form: Here the user can add collection events to the schedule. They can select the waste type and the collection day directly from a calendar. The calendar is implemented using the FullCalendar library. The user can add recurring events, such as weekly or monthly collections, as well as one-time events. The deletion of recurring events is not yet implemented because the FullCalendar library doesn't support it natively. Singular events and all events that are part of the same recurrence can be deleted. Compare Issue #32.
The schedule builder is designed to be intuitive and user-friendly, providing a step-by-step process for creating a new schedule. It allows users to contribute to the site and share their knowledge with the community. And it even includes a step-by-step progress bar!
Location Form | Schedule Title / Description / Image Form | Collection Events Calendar Form |
---|---|---|
![]() |
![]() |
![]() |
relevant project files: location_form.html, schedule_form.html, calendar.html, edit_calendar.js
The dashboard is a user-specific page that displays all the schedules the user has created. It also displays any schedules the user has subscribed to.
From the dashboard, the user can edit or delete their schedules. It provides a quick overview and a general starting point for established users that are already familiar with the site.
⤴️ Screenshot of the dashboard
relevant project files: dashboard.html
Users can export their schedules to their calendar app via an ics file. This allows them to receive notifications and reminders directly on their phone or computer. When Downloading a Schedule, a modal containing instructions on how to import the schedule into a calendar app is displayed.
The export feature is designed to provide users with a convenient way to receive reminders for their waste collection days. It ensures that users don't miss any important events and helps them stay organized.
⤴️ Screenshot of the export modal
relevant project files: dashboard.html, dasboard.js
Users can register for an account on the site, providing a username and password. Once registered, they can log in to the site using their credentials. They also have the option to register and sign in using their Google account. This feature is implemented using the Django Allauth package as well as the Google OAuth2 API.
The site tries to prompt the user to register or log in only when it is necessary. This means that the user can do as much as possible without having to sign up or log in. Only when the user has to perform any kind of CRUD operation or if they want to see their dashboard, they are asked to sign up or log in. For an overview of the user flow, see the flowchart.
![]() |
screenshot |
⤴️ Screenshot of the registration page
relevant project files: find the adapted Allauth templates in the templates/account folder.
Django messages are used to provide feedback to the user. They are displayed at the top of the page and disappear after a few seconds. They are used to confirm successful actions, such as creating a schedule, as well as to provide error messages, such as when a user tries to access a page they are not authorized to view.
The messages are designed to be unobtrusive and informative, providing users with feedback on their actions and helping them navigate the site.
![]() |
screenshot |
⤴️ Screenshot of a success message
relevant project files: base.html
Custom 404 and 500 error pages are displayed when a user tries to access a page that does not exist or if there is an internal server error. The pages are designed to be informative and user-friendly, providing users with feedback on what went wrong and how to proceed.
404 Error Page | 500 Error Page |
---|---|
![]() |
![]() |
⤴️ Screenshots of the error pages
relevant project files: 404.html, 500.html
The site is fully responsive and optimized for all devices. It looks great on mobile, tablet, and desktop screens, ensuring a smooth user experience no matter the device. The responsive design was implemented using the Bootstrap CSS framework. Custom CSS was used to create a unique design that fits the site's theme.
relevant project files: all template files and style.css (for custom styles)
All Ideas for Future Features are organized as user Stories by Epic and MoSCoW priority in the User Story Map - check it out, there are some good ideas in there!
These are my three favorite ideas for future features:
git add
, git commit
, git push
)A relational database was used for this project. The database schema was designed using dbdiagram.io before development began. The schema was then implemented using Django's built-in ORM. Throughout the development process, the schema was adjusted and updated as needed. The initial and the final version of the schema can be found below.
At the core of the database design is the Schedule
model. This model represents a waste collection schedule and includes fields for the schedule title, description, and image. On the left side of the ERD view below are models that allow users to like, comment on, and subscribe to schedules. On the right side are models that handle individual collection events. They mostly adhere to the RRule standard, which allows for complex recurring events to be defined.
⤴️ the initial ERD
Link to the initial ERD
I have used pygraphviz
and django-extensions
to auto-generate an ERD.
The steps taken were as follows:
sudo apt update
sudo apt-get install python3-dev graphviz libgraphviz-dev pkg-config
Y
to proceedpip3 install django-extensions pygraphviz
settings.py
file, I added the following to my INSTALLED_APPS
:
INSTALLED_APPS = [
...
'django_extensions',
...
]
python3 manage.py graph_models -a -o erd.png
erd.png
file into my documentation/
folder'django_extensions',
from my INSTALLED_APPS
pip3 uninstall django-extensions pygraphviz -y
⤴️ the final ERD
source for django ERD generation: medium.com
Note about migration files: While debugging the project, migration files were deleted and recreated which results in the migrations
folders only containing one migration file each. The migration history can be recreated in older versions of the github repository. Thanks for John from the tutor team for the help with debugging my migrations! (see commit ea26c6f)
GitHub Projects served as an Agile tool for this project. It isn't a specialized tool, but with the right tags and project creation/issue assignments, it can be made to work.
Through it, a user story map was created, and issues were managed in an Agile way. User stories were created using a custom User Story Template.
User stories are grouped by Epic and MoSCoW priority. The epics were determined before development began as part of the design process. In depth information about the conception of the idea for the site and the User Stories can be found under the Design Thinking Progress section at the bottom of this file.
Throughout the development process, user stories were reevaluated after each iteration and adjusted accordingly. At this time, they are frozen at the beginning of the last iteration to give more insight into the development process.
⤴️ Screenshot of the User Story Map
I've decomposed my Epics into stories prior to prioritizing and implementing them. Using this approach, I was able to apply the MoSCow prioritization as custom project fields to my user stories within the project settings on GitHub.
GitHub Issues served as an another Agile tool.
Github issues was mainly used to track bugs and smaller feature requests that weren't big enough to be considered a user story. They also contain the user stories which means that filtering is key to keep an overview over the issues.
⤴️ Screenshot of the open issues (this screenshot shows open issues of an earlier date to showcase the structure of the issues throughout development. The actual list of currently open issues can be found by following the link above.)
⤴️ Screenshot of the closed issues (the same note as above applies here as well.)
[!NOTE] For all testing, please refer to the TESTING.md file.
The live deployed application can be found deployed on Heroku.
This project uses a Code Institute PostgreSQL Database.
To obtain my own Postgres Database from Code Institute, I followed these steps:
[!CAUTION]
- PostgreSQL databases by Code Institute are only available to CI Students.
- You must acquire your own PostgreSQL database through some other method if you plan to clone/fork this repository.
- Code Institute students are allowed a maximum of 8 databases.
- Databases are subject to deletion after 18 months.
This project uses the Cloudinary API to store media assets online, due to the fact that Heroku doesn't persist this type of data.
To obtain your own Cloudinary API key, create an account and log in.
CLOUDINARY_URL=
as part of the API value; this is the key.This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
Deployment steps are as follows, after account setup:
[!IMPORTANT] This is a sample only; you would replace the values with your own if cloning/forking my repository.
Key | Value |
---|---|
CLOUDINARY_API_KEY |
user's own value |
CLOUDINARY_API_SECRET |
user's own value |
CLOUDINARY_CLOUD_NAME |
user's own value |
CLOUDINARY_URL |
user's own value |
DATABASE_URL |
user's own value |
DISABLE_COLLECTSTATIC |
1 (this is temporary, and can be removed for the final deployment) |
SECRET_KEY |
user's own value |
Heroku needs three additional files in order to deploy properly.
You can install this project's requirements (where applicable) using:
pip3 install -r requirements.txt
If you have your own packages that have been installed, then the requirements file needs updated using:
pip3 freeze --local > requirements.txt
The Procfile can be created with the following command:
echo web: gunicorn app_name.wsgi > Procfile
The runtime.txt file needs to know which Python version you're using:
python3 --version
in the terminal.python-3.9.18
For Heroku deployment, follow these steps to connect your own GitHub repository to the newly created app:
Either:
Or:
heroku login -i
heroku git:remote -a app_name
(replace app_name with your app name)add
, commit
, and push
to GitHub, you can now type:
git push heroku main
The project should now be connected and deployed to Heroku!
This project can be cloned or forked in order to make a local copy on your own system.
For either method, you will need to install any applicable packages found within the requirements.txt file.
pip3 install -r requirements.txt
.You will need to create a new file called env.py
at the root-level,
and include the same environment variables listed above from the Heroku deployment steps.
[!IMPORTANT] This is a sample only; you would replace the values with your own if cloning/forking my repository.
Sample env.py
file:
import os
os.environ.setdefault("CLOUDINARY_API_KEY", "user's own value")
os.environ.setdefault("CLOUDINARY_API_SECRET", "user's own value")
os.environ.setdefault("CLOUDINARY_CLOUD_NAME", "user's own value")
os.environ.setdefault("CLOUDINARY_URL", "user's own value")
os.environ.setdefault("DATABASE_URL", "user's own value")
os.environ.setdefault("SECRET_KEY", "user's own value")
# local environment only (do not include these in production/deployment!)
os.environ.setdefault("DEBUG", "True")
Once the project is cloned or forked, in order to run it locally, you'll need to follow these steps:
python3 manage.py runserver
CTRL+C
or ⌘+C
(Mac)python3 manage.py makemigrations
python3 manage.py migrate
python3 manage.py createsuperuser
python3 manage.py loaddata db6.json
python3 manage.py runserver
You can clone the repository by following these steps:
git clone https://github.com/benschaf/waste-schedule.git
Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.
Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed. A tutorial on how to do that can be found here.
By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:
All the Credits and hyperlinks can be found in the respective files on the indicated lines.
Additionaly, Chris Beams article "How to Write a Git Commit Message" was used as a guideline for writing commit messages.
The tonne logo was drawn by me, adapting the design from a vecteezy graphic.
Images for sample Waste Schedules featured in the fixtures were taken from the following websites and uploaded to Cloudinary as an example usecase in the project:
All images used in this project were generated using the Copilot Designer
[!NOTE] This Section is added at the end of the README file to keep it clean and concise. Though it is not part of the usual README structure, it was added to provide a more detailed insight into the project's conception and development process.
The design thinking process was used to develop the idea for this project. The process consists of five stages: Empathise, Define, Ideate, Prototype, and Test. Each stage was used to understand the problem, generate ideas, and create a solution that meets the needs of the target audience.
For this stage, I created 4 user personas to represent the different types of users that would interact with the app.
For each persona, I considered their "5 Cs" (circumstances, constraints, context, criteria, and compensating behaviors) related to waste management and waste management reminders. This helped me understand their needs and motivations better.
Eco-Conscious Emma: Emma is a young environmental enthusiast living in a bustling city like Berlin. She actively separates her waste into different bins, composts organic materials, and participates in local recycling programs. Emma is passionate about reducing her ecological footprint and encourages her neighbors to do the same. She would appreciate an app that provides real-time reminders for waste collection days, educates users about proper waste sorting, and offers tips on sustainable living.
Busy Bernd: Bernd is a working professional in Munich. His busy schedule often leads to forgetfulness, and he occasionally misses waste collection days. He needs an app that sends notifications a day in advance, reminding him to take out his bins. Bernd also wants information on nearby recycling centers and drop-off points for hazardous waste. A feature that tracks his waste reduction progress would motivate him to be more diligent.
Senior Sigrid: Sigrid, a retiree in Hamburg, values simplicity. She finds the current waste management system confusing and struggles with the various colored bins. Sigrid needs an app with clear instructions on waste separation, including visual cues. Additionally, a feature that connects her with local volunteers or services for assistance with heavy bins would be helpful.
Family-Focused Felix: Felix lives in a suburban area near Frankfurt with his family. Managing waste for a household of four can be overwhelming. He wants an app that syncs with family members’ calendars, reminding everyone about collection days. Felix also seeks advice on minimizing waste, especially with kids in the house. Perhaps the app could gamify waste reduction to involve the whole family.
Considering all the user personas, I defined problem statements for each of them:
Overarching Problem Statement: In a world grappling with stress and environmental challenges, our project aims to develop an integrated waste management solution that addresses the diverse needs of individuals — ranging from busy professionals and eco-conscious citizens to seniors and families. By providing a platform for community engagement, we strive to minimize the stress and confusion that accompany waste management, fostering a sense of responsibility and empowerment among communities. Our mission is to empower everyone, regardless of age or lifestyle, to actively participate in waste reduction, ultimately fostering a cleaner and greener planet.
Considering the problem statements, I brainstormed potential solutions that could address the needs of each user persona. Here are some ideas already with an added priority value (p1: high priority, p2: medium priority, p3: low priority):
Eco-Conscious Emma:
Busy Bernd:
Senior Sigrid:
Family-Focused Felix:
After ideating I created wireframes and content for the prototype of the site which is of course this repository.
Check out the full prototype including wireframes, user stories, and the working site by browsing around the readme and the repository. Also check out the tonne website itself.
The prototype of the site was tested manually and progamatically to ensure that it is working as intended. Testing in the sense of design thinking has not been very extensive yet. This will be done in the future.