Project Info

MoleculeIQ

This project did not submit a demo video on Devpost.

Inspiration

: The idea for Molecule-IQ Waste Management was inspired by the increasing need for efficient and sustainable waste management solutions. With growing concerns around waste disposal and the environmental impact, I wanted to create a platform that not only streamlines the waste reporting process but also motivates users to take eco-friendly actions. By incorporating AI for real-time waste verification and using gamification to engage users, we aimed to create a community-driven approach to addressing the waste crisis.

What it does

: Molecule-IQ Waste Management is an AI-powered platform that simplifies waste reporting and rewards users for making sustainable choices. The platform leverages real-time AI verification to ensure accurate waste categorization, and gamification features—such as points and leaderboards—encourage users to engage more actively. It promotes a community-focused solution to waste management by rewarding users for their eco-friendly actions and providing a seamless, user-friendly experience.

How we built it

: I built the platform using a modern, full-stack tech stack, including: • Next.js 14 for fast, server-rendered pages and seamless API integration. • Tailwind CSS for responsive, elegant design. • Google Gemini AI for real-time AI-assisted waste categorization and verification. • Drizzle ORM to handle database interactions with Neon Database. • Web3Auth for secure and decentralized authentication. The entire platform was designed with scalability and performance in mind, ensuring that as more users engage, the system remains efficient and responsive.

Challenges we ran into

: I faced several challenges throughout development: • Database Connection Issues: Integrating Drizzle ORM with Neon Database led to numerous hiccups. Ensuring stable database connections was a recurring issue, especially when working with real-time data. • Deployment Errors: While the platform worked perfectly on our local network, deploying it on Vercel introduced unexpected authentication errors, particularly around Web3Auth. Debugging and solving these deployment-specific issues took more time than anticipated.

Accomplishments we're proud of

: Despite the challenges, I successfully built a beautiful, fully functional full-stack web application. The platform features a working database, responsive design, and operational APIs, all seamlessly integrated into a cohesive user experience. We’re particularly proud of the fact that we created a visually appealing product that functions as intended and addresses a real-world problem

What we learned

: Originally, I was working on a different project related to drug research, but after realizing that it lacked a clear problem statement, I decided to pivot towards Molecule-IQ Waste Management. This experience taught us the importance of recognizing when to stop and change direction while staying focused on the broader goal. We had to adapt quickly and work efficiently under time constraints, learning several new technologies in the process. We also gained deeper experience working with Git, especially in managing version control and collaborating effectively on a team.

What's next

: Moving forward, I and others aim to take Molecule-IQ Waste Management to the next level by getting real users on board. Gathering feedback is crucial for improving the platform, so we plan to establish a feedback loop where user suggestions can directly influence future updates. Our goal is to refine the user experience, enhance the AI-powered features, and expand the platform’s reach to become a staple solution in sustainable waste management.

MoleculeIQ - Waste Buster

🎓 What You'll Learn:

Next.js 14 fundamentals and best practices
Full stack development with Next.js
Integrating AI (Google's Gemini AI) into your Next.js app
TypeScript implementation in Next.js
State management with React hooks
Responsive design using Tailwind CSS
Authentication with Web3Auth
Database integration using Drizzle ORM
Deployment of Next.js projects

📚 Project Highlights:

AI-assisted waste verification
User reward system for eco-friendly actions
Real-time waste collection task management
Interactive leaderboard for community engagement

👨‍💻 Step-by-Step Guide:

Setting up a Next.js 14 project
Creating a responsive layout with Tailwind CSS
Implementing Web3Auth authentication
Database design and integration with Drizzle ORM
AI model integration for waste verification
Building interactive UI components (e.g., leaderboard, reward system)
Deploying your Next.js application

📚 Materials/References:

GitHub Repo (give it a star ⭐): https://github.com/mendsalbert/zero-t
README (assets & code): https://github.com/mendsalbert/zero-t

Installation

Clone the repository:

git clone https://github.com/vishomallaoli/mol-iq-waste-mgmt
cd mol-iq-waste-mgmt

 2.	Install dependencies:

npm install

3.	Set up environment variables:

Create a .env.local file in the root of the project and add the following variables:

NEXT_PUBLIC_WEB3AUTH_CLIENT_ID=your_web3auth_client_id FIREBASE_API_KEY=your_firebase_api_key FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain FIREBASE_PROJECT_ID=your_firebase_project_id

4.	Start the development server:

npm run dev

5.	Visit http://localhost:3000 in your browser to view the app.

Deployment

To deploy the project, follow these steps:

1.	Build the project:

npm run build

2.	Deploy on Vercel:
•	If you haven’t already, sign up for Vercel and link your GitHub repository.
•	Configure environment variables on Vercel to match your .env.local.
•	Deploy your app with just one click or using the Vercel CLI:

vercel --prod

Your app should now be live at https://your-app-name.vercel.app.

Contributing

We welcome contributions! Here’s how you can help:

1.	Fork the repository.
2.	Create a feature branch (git checkout -b feature-branch).
3.	Commit your changes (git commit -m "Add a feature").
4.	Push to the branch (git push origin feature-branch).
5.	Open a pull request.

Please make sure to update tests as appropriate.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Analysis

Compare with all teams

View

Metric

No commits on this project resolved to a GitHub account.

Technology

Found in codeClaimed only

CSSIn code
Google GeminiIn code
JavaScriptIn code
Next.jsIn code
ReactIn code
Tailwind CSSIn code
TypeScriptIn code
VercelClaimed

7 of 8 appear in the indexed code. 1 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.

AI coding agents

No AI coding agent signals were found in this repository.

Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.

Codebase size

Source size

132 KB

Source files

Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.

Feature verification

9 Verified1 Code-supported

AI-powered waste image verification (Google Gemini)Verified
Real-time AI verification using Google Gemini AI to categorize waste type, quantity, and confidence from uploaded images
Claimed on Devposthigh confidence
- src/app/report/page.tsx:102 — GoogleGenerativeAI client instantiated with gemini-1.5-flash model and sent an image plus a JSON-structured prompt to classify waste type/quantity/confidence
- src/app/collect/page.tsx:119 — Collection flow also runs Gemini-based verification before saving the collected waste
Drizzle ORM + Neon Database integrationVerified
Drizzle ORM handles database interactions with Neon Database
Claimed on Devposthigh confidence
- src/utils/db/dbConfig.jsx:1 — neon() serverless client wrapped with drizzle-orm/neon-http
- src/utils/db/schema.ts:4 — pgTable schema defines Users, Reports, Rewards, CollectedWastes, Notifications, Transactions tables used throughout actions.ts
Google Maps location pickerVerified
google-maps listed as a built-with technology
Claimed on Devpostmedium confidence
- src/app/report/page.tsx:6 — Uses @react-google-maps/api StandaloneSearchBox with GOOGLE_MAPS_API_KEY for location autocomplete in the report form
Leaderboard for community engagementVerified
Interactive leaderboard ranks users by points to encourage engagement
Claimed on readmehigh confidence
- src/app/leaderboard/page.tsx:25 — Leaderboard page fetches getAllRewards() and renders ranked users
- src/utils/db/actions.ts:309 — getAllRewards queries Rewards joined with Users ordered by points desc
Notifications system for point awardsVerified
Seamless, user-friendly experience with feedback on rewarded actions (implied by gamification/UX claims)
Claimed on Devpostmedium confidence
- src/utils/db/actions.ts:59 — createReport calls createNotification to notify users of points earned
- src/utils/db/schema.ts:49 — Notifications table backs this feature
Points / reward system for eco-friendly actionsVerified
Users earn points/rewards for reporting and collecting waste, gamifying eco-friendly actions
Claimed on Devposthigh confidence
- src/utils/db/actions.ts:50 — createReport awards 10 points via updateRewardPoints and logs a transaction
- src/utils/db/actions.ts:100 — updateRewardPoints increments Rewards.points for a user
- src/app/rewards/page.tsx:1 — Rewards page reads/redeems points via getAvailableRewards/redeemReward
Real-time waste collection task managementVerified
Platform manages waste collection tasks in real time for collectors
Claimed on readmemedium confidence
- src/app/collect/page.tsx:53 — Collect page fetches getWasteCollectionTasks and lets collectors update task status
- src/utils/db/actions.ts:220 — getWasteCollectionTasks and updateTaskStatus manage CollectedWastes/Reports status transitions
Waste reporting workflow with database persistenceVerified
Users can report waste (location, type, amount, image) which is saved and streamlines the reporting process
Claimed on Devposthigh confidence
- src/app/report/page.tsx:165 — handleSubmit calls createReport with location/type/amount/image/verification result
- src/utils/db/actions.ts:25 — createReport inserts into Reports table via Drizzle
Web3Auth authenticationVerified
Secure, decentralized authentication using Web3Auth
Claimed on Devposthigh confidence
- src/components/Header.tsx:38 — Web3Auth instantiated with client ID and chain config; login()/logout() call web3auth.connect()/logout(), and getUserInfo() populates the session
Interactive map display (Leaflet/OpenStreetMap, not Google Maps)Code-supported
Implied by 'streamlines waste reporting' and google-maps tag, but actual map rendering component
Claimed on readmemedium confidence
- src/components/Map.tsx:3 — Map component is built with react-leaflet/OpenStreetMap tiles, not the Google Maps JS API, so the visual map itself does not match the 'google-maps' built-with claim even though Google Places search is used elsewhere

An AI agent derived these features from the project’s Devpost page and readme, then searched the code for each one. Verified features are backed by cited code; claimed-only features had no supporting code, which is not by itself proof a feature is missing.