Inspiration
We started our brainstorming ideas by reading the rules and reviewing the hackathon guide. We needed to choose a specific focus area for the project (that is solvable, of course), and find common ground since we both know different language models. We scrolled through a catalog of problems to find the 80,000 Hours website, but our personal fits varied at first. While one partner was excited about combating engineered pandemics using biotechnology, another was intrigued to study the moral status of digital minds. We wanted to create a project that aligned with our personal vision, so we kept going through the brainstorming process until we found something we both enjoyed—cleaning our communities. This problem is solvable, neglected, and is something that closely aligns with our social and moral compasses.
Our commonality was that we spent our childhood on India’s busy streets, in the middle of traffic, and with the stench of garbage haunting us. However, Archit now lives in Indore, a city that has consistently been ranked the cleanest in India for the past eight years. Well, what makes this city so special? Indore’s Municipal Corporation launched an application to make its city smarter and cleaner. Drawing additional inspiration from this website, we decided to make a similar application, but for everyone across all cities, encouraging cooperation worldwide!
What it does
Trash Talker is a simple-to-use, appealing website designed to minimize trash and broken community equipment, keeping our streets safe and clean. The website is incredibly user-friendly, as volunteers can help out in three ways.
Report an issue. If someone spots something that needs attention, they can capture a photo of the issue and select a category for it, followed by an optional description (e.g., “Broken glass near the playground”). They can use either their live location or select a location on our map to show us exactly where the issue is. Join our crew of dedicated volunteers and make a direct impact on our community. They can use the Google Form linked on the website to sign up for community clean-up initiatives and choose the tasks, timings, and roles that work best for them. Their preferences, ranging from working with tools to selecting their own team roles, are taken into account as well. Track your progress on the leaderboard tab! Donate money to support our mission. The money will be used to buy gloves, bags, tools, and refreshments for volunteers so we can organize more cleanup drives across the city. Payments are processed securely, using simple information. Track your progress on the leaderboard tab!
How we built it
We used GitHub and followed a standard HTML5 structure. We used standard meta tags to make the site mobile-friendly as well (using viewport) and used Google Fonts (Poppins) by importing the font family. Font Awesome was used for icons like the camera.
CSS Styles Root variables in our CSS styles defined the basic color palette and organized it in one common place, so we can easily change it later. The Navbar is fixed to the top with a glass-like blur effect. There are four feature cards at the top (Report, Volunteer, Leaderboard, Donate) that animate/hover up when you move your mouse over them.
The Navigation Bar Trash Talker is displayed in a stacked design, and each link has a unique hover color corresponding to its section in Nav Links (e.g., Pink for Report, Purple for Leaderboard). There is also a CTA Button titled “Report Issue” for quick access. On the Mobile Menu, a hamburger icon appears on the top right to toggle the menu.
The Main Content The hero section displays the main slogan “Let’s talk trash!” and briefly explains the mission to new visitors. The features section has the section header “Unpacking the Process” and uses a CSS Grid system to display three cards side-by-side on desktop and stack them vertically on mobile, with each card linking to a specific page. Each card also includes an icon, title, description, and a small arrow button.
Small Amount of JavaScript A negligible amount of JavaScript was used at the bottom of our code to handle the mobile menu. The toggleMenu() enables the hamburger icon on a phone to add or remove the active class from the navigation links, showing or hiding the menu dropdown.
Challenges we ran into
Our primary challenge while completing this project was time. We were challenged to brainstorm a problem, create a prototype, test our website, and present it as well—all in such a short time frame of a few days. We also used an API to track the location of the user, and this took a lot of time to design. We had to examine a lot of websites and their designs to draw inspiration for the design of our own. Finally, uploading the logo to our website was also a challenge. We designed the thumbnail for our project submission using Canva, and we were also planning on using Canva to make a logo to attach to our website. While we tried downloading both JPG and PNG files to upload to GitHub, neither worked, even though we had no errors in our code. This was a disappointing challenge for us that we weren’t able to overcome.
Accomplishments that we're proud of
The interface allows users to report community civic issues in real-time, anywhere they are! It works in every area of the world (provided there is stable internet connectivity).
We are proud of the responsiveness of our interface. It can be accessed on all devices, both desktop and mobile. It is a user-friendly public communication system that allows for real change to happen, relying on the power of numbers.
It is also interactive. Buttons and cards lift up when hovered over, which creates real and engaging user interaction. Finally, the same colors and fonts defined in the CSS variables are consistently used throughout the page, giving the page a clean, aesthetic look.
What we learned
We learned many useful things from this project. Talking to each other has improved our communication skills, as we have consistently needed to text and schedule times for calls this weekend. We also learned valuable copyright policies and figured out how to license our project under the MIT License. Finally, we have learned to find a balance between our technical skills and our presentational skills, as we need to excel in both areas for a successful submission.
What's next for Trash Talkers
Trash Talkers needs a consistent supply of donors and volunteers to keep it running. While it is likely that there will be many issue submissions, we expect to have a lack of donors and volunteers. Currently, we have a leaderboard for top donors and top volunteers on a weekly, monthly, and all-time basis. We hope this system will incentivize more Trash Talkers to join our community.
We have edited our “Donate” tab to automatically update the currency of money based on the location of the user to encourage global participation. However, our website’s data on leaderboards, as well as the donate tab, are currently just sample statistics used for demo purposes. We need a clearer, more efficient system to truly expand our interface globally across all communities.
Log in or sign up for Devpost to join the conversation.