EcoVision Tracker is your personal sustainability companion that makes eco-friendly living accessible and rewarding. By combining intuitive tracking tools with AI-powered features, we help you build sustainable habits and measure your positive environmental impact.
- Track your sustainability journey with visual metrics
- Monitor your eco streak and carbon footprint reduction
- View personalized eco tips and challenges
- Log daily sustainable actions like using reusable items or taking public transit
- Complete challenges to build eco-friendly habits
- Maintain streaks to reinforce positive behavior
- Upload photos of waste items for instant AI classification
- Learn whether items belong in recycling, compost, or landfill
- Receive educational tips on proper waste disposal
- Earn Buds rewards for recycling correctly
- Get personalized sustainability advice through natural conversation
- Ask questions about recycling, composting, and eco-friendly practices
- Receive tailored recommendations for reducing your carbon footprint
- Learn about environmental topics in an interactive, engaging way
- Earn "Buds" (eco-currency) for sustainable actions
- Track your transaction history
- Redeem Buds for badges, merchandise, or donations to environmental causes
- Earn badges for completing eco challenges
- Showcase your environmental accomplishments
- Unlock special rewards as you progress
- Mobile-friendly responsive design
- Intuitive navigation and clean interface
- Dark/light mode support
- Backend API proxy for Supabase operations to protect API keys
- Secure handling of sensitive credentials through Flask backend
- Improved data validation and error handling
- Frontend: React with TypeScript, Vite, Tailwind CSS
- Backend: Flask API with Gemini AI integration
- Database: Supabase (PostgreSQL)
- Authentication: Clerk
- State Management: React Query
- UI Components: shadcn/ui, Radix UI primitives
- Visualizations: Recharts
- AI Services: Google's Gemini AI for trash classification and eco-assistant chatbot
# Install dependencies
npm install
# Start development server
npm run dev# Create and activate virtual environment (optional)
python -m venv .venv
source .venv/bin/activate # On Windows: .venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
# Start Flask server
python app.py- Node.js (v18+)
- Python 3.9+
- Supabase account
- Clerk account
- Gemini API key (for AI features)
Create a .env file with:
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_key
VITE_CLERK_PUBLISHABLE_KEY=your_clerk_key
VITE_GEMINI_API_KEY=your_gemini_api_key
VITE_API_BASE_URL=your_api_server_url # For production deployment
Track your daily sustainable actions, from using reusable containers to reducing water usage. Each action earns Buds and contributes to your environmental impact score.
Our AI-powered waste classification system uses Google's Gemini API to analyze images of waste items and provide accurate disposal recommendations, educational tips, and Buds rewards.
Get personalized sustainability advice through natural conversation. Ask questions about recycling, composting, and eco-friendly practices. Receive tailored recommendations for reducing your carbon footprint. Learn about environmental topics in an interactive, engaging way.
Manage your earned Buds currency, view transaction history, and redeem rewards. The wallet provides a tangible incentive system for sustainable behavior.
Earn badges for milestones like "Early Adopter," "Waste Warrior," and "Carbon Cutter" to gamify your sustainability journey.
- AI-powered waste classification
- Real-time feedback
- Educational tips
- Waste diversion tracking
- Personalized sustainability advice
- Interactive environmental education
- Recycling and composting guidance
- Carbon footprint reduction tips
- Powered by Google's Gemini AI
- Visual progress tracking
- Carbon footprint calculator
- Achievement badges
- Weekly/monthly reports
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.
eco-action-logger-06/
├── src/
│ ├── components/
│ │ ├── ui/ # Reusable UI components
│ │ ├── home/ # Home page components
│ │ ├── layout/ # Layout components
│ │ └── dashboard/ # Dashboard components
│ ├── pages/ # Route components
│ │ ├── Dashboard.tsx
│ │ ├── Index.tsx
│ │ ├── NotFound.tsx
│ │ └── TrashScanner.tsx
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions and configurations
│ └── App.tsx # Main application component
├── public/ # Static assets
└── ...config files # Various configuration files
-
Prerequisites
- Node.js (v18 or higher)
- npm or yarn
-
Installation
# Clone the repository git clone [repository-url] # Navigate to project directory cd eco-action-logger-06 # Install dependencies npm install --legacy-peer-deps
-
Development
# Start the development server npm run devThe application will be available at
http://localhost:8080 -
Building for Production
# Build the application npm run build # Preview the production build npm run preview
npm run dev- Start development servernpm run build- Build for productionnpm run build:dev- Build for developmentnpm run preview- Preview production buildnpm run lint- Run ESLint
- Log daily sustainable actions
- Track your eco streak
- View historical data
- Set personal goals
- AI-powered waste classification
- Real-time feedback
- Educational tips
- Waste diversion tracking
- Personalized sustainability advice
- Interactive environmental education
- Recycling and composting guidance
- Carbon footprint reduction tips
- Powered by Google's Gemini AI
- Visual progress tracking
- Carbon footprint calculator
- Achievement badges
- Weekly/monthly reports
- Responsive design
- Dark/light mode
- Intuitive navigation
- Real-time updates
- shadcn/ui for the beautiful UI components
- Tailwind CSS for the utility-first CSS framework
- Vite for the blazing fast build tool
- Radix UI for accessible component primitives
- React Query for efficient data fetching
- Recharts for beautiful charts