EcoCampus AI

Introduction

EcoCampus AI is a Smart Plastic Waste Analytics, Segregation, and Sustainability Management System designed specifically for college campuses. The platform empowers students to report plastic waste, classify waste categories, identify waste hotspot locations, view analytics, and contribute to campus sustainability efforts.

System Overview

EcoCampus AI is a full-stack web application leveraging modern web technologies to provide a seamless and interactive user experience. The system is designed to facilitate the reporting and management of plastic waste on college campuses, promoting sustainability and environmental responsibility among students and staff.

Technology Stack

• Frontend: Next.js, React, TypeScript, Tailwind CSS
• Backend: Firebase Authentication, Firestore Database, Firebase Storage
• Data Visualization: Recharts

Theme

• White Theme
• AB Sans Font
• Modern Dashboard Design
• Mobile Responsive
• Clean Academic UI
• Rounded Cards
• Soft Shadows

Functional Requirements

• As a Student, I should be able to log in, sign up, reset my password, and log out.
• As a Student, I should be able to report plastic waste by uploading an image, selecting a waste category, entering a location, and adding a description.
• As a Student, I should be able to view analytics on waste reports, including total waste reports, waste category distribution, monthly trends, and department contributions.
• As a Student, I should be able to view a leaderboard showing student and department rankings based on green scores.
• As a Student, I should be able to identify waste hotspots on campus.
• As a Student, I should be able to view my profile, including my name, USN, department, total reports, and green score.
• As an Admin, I should be able to view, approve, and reject waste reports.
• As an Admin, I should be able to manage users and view analytics.
• As an Admin, I should be able to export data for further analysis.

User Personas

1. Student
   • Can report waste, view analytics, check leaderboards, and manage their profile.
2. Admin
   • Can manage reports, users, and view comprehensive analytics.

Core User Flows

• Student Reporting Waste: Log in -> Navigate to Report Waste -> Upload image -> Select category -> Enter location -> Add description -> Submit report
• Admin Managing Reports: Log in -> Navigate to Admin Dashboard -> View reports -> Approve/Reject reports -> Manage users

Visuals Colors and Theme

• primary: #2A9D8F (Teal)
• primary_light: #A8DADC (Light Teal)
• secondary: #E63946 (Coral)
• accent: #F4A261 (Orange)
• highlight: #E76F51 (Burnt Orange)
• bg: #F1FAEE (Off White)
• surface: rgba(255, 255, 255, 0.9)
• text: #1D3557 (Dark Blue)
• text_muted: #457B9D (Muted Blue)
• border: rgba(69, 123, 157, 0.2)

Signature Design Concept

The EcoCampus AI homepage will feature an interactive 3D campus map using @react-three/fiber and @react-three/drei. Users can navigate through the campus by clicking on different buildings, each representing a section of the application (e.g., Analytics, Leaderboard, Waste Hotspots). As users hover over buildings, they will animate with a subtle glow effect, and clicking will transition them into the respective section with a smooth zoom-in animation. This immersive experience will make navigating the application intuitive and engaging, reflecting the campus's commitment to sustainability and innovation.

Interaction Model & Motion Direction

• Landing Page: Parallax interaction model with layered depth via scroll, providing a visually rich first impression.
• Internal Pages: Animated interaction model with moderate scroll-triggered reveals and hover transitions for a polished user experience.

Non-Functional Requirements

• The system must be responsive and accessible on both desktop and mobile devices.
• The application should handle up to 10,000 concurrent users.
• Data should be stored securely with regular backups.

Tech Stack

• Frontend: Next.js, React, TypeScript, Tailwind CSS
• Backend: Firebase Authentication, Firestore Database, Firebase Storage
• Data Visualization: Recharts

Assumptions and Constraints

• The application will primarily serve college campuses in India.
• User data privacy and security are paramount, adhering to local regulations.

Glossary

• USN: University Serial Number
• Green Score: A metric representing a user's contribution to sustainability efforts.
• PET Bottle: Polyethylene Terephthalate Bottle
• HDPE Plastic: High-Density Polyethylene Plastic