Inspiration
We were inspired by our Non-profit Organization called the American Hands Association (AHA). The organization works primarily with newly introduced immigrants and cultural clothing to continue integrating with their favorite aspects of their culture. In this organization, individuals fill out a form to donate clothes and then we send out a volunteer to pick up the clothing.
We used a similar idea in the scope of E-Waste. In recent years, E-Waste has drastically increased in significance, leaving people unsure as to what to do with old technology prompting increasingly more waste to be disposed of incorrectly. We wanted to do our part in helping this issue, bringing the concepts and ideas we learned from AHA and applying them to E-Waste.
What does it do?
We created a website that identifies and provides the optimal solution for the growing global issue- e-waste. The website has a form where people can input information to donate their E-Waste according to different categories. People can use an integrated AI-ChatBot to help them identify what types of E-Waste they have so they can input it correctly. Then on the employee end, we have a portal that requires people to have credentials to access. This is for the volunteers/employees that will be doing the E-Waste Pickups and includes everything that the donors inputted in the form. As well, the employee portal allows workers to automatically create a Google Maps list of all the addresses they are visiting and organize them in them for the most efficient route for pickup. Finally, as volunteers pick up the waste, they can mark the locations as completed.
How we built it
Our initial idea was to create a Next.js website with 3 pages: a landing page for customers, a submission page with a form that would submit pickup data, and an employee portal that accesses the submission form.
Our landing page was simple React components with some special imported UI components and libraries (Shadcdn, ReactBits, Tailwind).
For our submission form, we used the built-in Shadcdn form components to beautify our form and allow for easier data processing through the Zod library. We then use Prisma and Next.js API routing to send this data to the backend, which is held in a Postgres Relational Database, storing the user information and the items in separate linked tables. The form also contains a chatbot popup, where a user can talk to a chatbot LLM (llama-3-8b instruct) that is instructed to help categorize their e-waste into the 10 EPA categories.
For our employee page, we put a login page that requires user credentials (later renditions will actually require authentication and provide user data based on the privilege level). This leads the employee to a dashboard where pending order can be viewed and selected. Once selected the website sends the data (through Next API routing) to a local Flask server running Selenium. This will then take the inputted data and create a Google Maps list using Selenium (there is no API to programmatically create lists) and returning the link to the Employee, which they can use to navigate to the pickup location. The employees can then mark the entries as complete, which will move them into a separate category.
Challenges we ran into
We ran into challenges while attempting to implement some features.
Selenium Cloud
While we got the selenium script to work pretty early into our development, the real issue came with creating a stable cloud environment. We attempted to use Docker to create a 'mini-vm' to host the script and the chrome-drivers required to run the chrome instance, but we came across many issues, and the only solutions were paywalled. We ended up running the function in a local Flask app, but we were unable to host it on the cloud
Image Recognition
We attempted to add image recognition into the submission form by allowing users to drop images into the description box, which would be sent to an image-to-text LLM with a system prompt asking it to describe the image. The LLM, however, was too unstable and wouldn't give consistently accurate and relevant information.
Prisma Functionality
When initially attempting to implement Prisma, we struggled to comprehend the architecture and attempted to use it as a connection-based client instead of it's full capabiliites. After taking a step back, we reworked our database to accomodate Prisma from the start and we were able to properly utilize
What we're proud of
Learning Experience
Many our team members are inexperienced with this being our second hackathon. During our first hackathon, we came across many issues early into development and weren't able to create a final product. This hackathon, we came with much more preparation and were able to create a product that we were proud of.
What we learned
Next.js
Our use of Next.js and our product requirements required us to learn how different Next.js libraries like Zod, Prisma, and Replicate work. We also got experience with complex server routing using the NextResponse and NextRequest.
Selenium
Our use of Selenium was much more expansive than previous projects and allowed us to explore different solutions for cloud browser automation testing
Git
Our use of git and proper git standards (like creating branches for new features that were merged back into the main branch helped us learn more about version control and proper developer practices
What's next for Eeko?
One major thing we wish to add is further Employee Authentication and management systems. This will include the ability to monitor volunteer work and track their locations while they are doing their pickups. This will be integrated into the Mobile App we hope to create for donors and workers. For the donors, we hope to integrate more AI/ML into our website where donors can take pictures of their E-Waste and the AI Model will recognize the type to make it easier on the user in the image recognition process. Then, for the volunteers we wish to make it easier to mark locations as completed by having the donors print out a QR code for the pickup, this way the volunteers can scan it automatically and mark it.
Built With
- ai
- flask
- genai
- google-maps
- javascript
- llama-3-8b-instruct
- next.js
- pgadmin
- postgresql
- prisma
- psql
- python
- reactbits
- replicate
- selenium
- shadcn
- webscraping
- zod
Log in or sign up for Devpost to join the conversation.