Home
Dashboard with green score, recycled weight, and quick navigation.
App Demo (Video/GIF, max 3 mins)
Replace the placeholder below with your final demo video or GIF recorded from a physical device or simulator.
Put your demo file under docs/assets/ as one of:
demo.mp4, demo.webm, or demo.ogg.
Tip: Keep the demo focused on classify, rewards, forum/chat, and profile flow.
Problem
Many users are unsure how to sort waste correctly, and motivation to sustain eco-friendly behavior is often low without feedback or rewards.
Solution
EcoSort AI combines guided waste classification, behavior evaluation, gamified rewards, and social participation to turn awareness into action.
Core App Modules
These six modules match the final app architecture and navigation.
Classify
Image-based waste recognition with category confidence and disposal tips.
Rewards
CO2 reduction evaluation, points accumulation, and badge redemption.
Forum
Community posting, comments, likes, and peer interaction.
Messages
Direct chat conversations with text/image messaging support.
Profile
User info, recognition history, point history, and badge records.
Application Screens
Real screenshots from the current build.
UX Journey, Storyboarding, and Wireframe Flow
Presentation-ready user journey from first use to sustained engagement.
-
Step 1: Entry & Authentication
User registers/logs in and enters a personalized app shell.
-
Step 2: Waste Identification
User captures/selects image, gets classification confidence and disposal guidance.
-
Step 3: Eco Action Evaluation
User records eco behavior, receives calculated CO2 reduction and points.
-
Step 4: Motivation Loop
User redeems badges, tracks progress in profile and dashboard metrics.
-
Step 5: Community Participation
User joins forum/chat discussions to share practical sorting experiences.
Data Collection, Handling, and Management
Collected Data
- User account/profile data (name, email, city, avatar)
- Classification logs (image URL, mapped category, confidence)
- Eco action records (quantity, CO2 reduction, points)
- Forum/chat interaction data
- Badge and point history
Handling Strategy
- MySQL-backed persistence with service-layer abstraction
- Token-based API authorization (Bearer token)
- Input validation and explicit JSON error responses
- Seed data + schema upgrade helpers for stable local development
Technical Integration (App + Services)
How mobile frontend and backend services work together.
Frontend (Flutter)
Uses a centralized ApiClient for REST communication,
with modular screens and graceful fallback behavior in selected pages.
Backend (Dart Shelf)
Exposes authenticated REST endpoints for classification, rewards, forum, messaging, and profile data.
External Services
Integrates Alibaba Cloud image recognition (optional runtime config) and maps results into project waste categories.
Conclusion: What We Would Improve with More Time
- Upgrade classification quality with a dedicated ML/CV model pipeline.
- Expand automated tests for authorization, transactions, and chat concurrency.
- Strengthen security (password hardening, token lifecycle, stricter CORS).
- Enhance analytics and observability for engagement and performance.
- Add multilingual UX and richer accessibility support.
15-Minute Presentation Breakdown
Aligned with your marking rubric.
1. Demo Video/GIF (20%)
Up to 3 minutes showing key app tasks and user outcomes.
2. Landing Page (20%)
This page showcases value proposition, functionality, and architecture.
3. App Overview (50%)
Cover design inception, storyboarding/wireframes, data handling, interactivity, and API/service integration.
4. Presentation Style (10%)
Clear flow, visual consistency, and confident delivery.