EcoTracker is a comprehensive environmental monitoring and sustainability platform that helps users track their carbon footprint, energy consumption, water usage, and waste management. The application combines data visualization with AI-powered assistance to promote eco-friendly practices.
- Real-time environmental metrics tracking
- Weekly energy usage visualization
- Active sustainability challenges
- EcoPoints reward system
- Electrical Energy Management: Monitor home appliances and devices
- Vehicle Energy Tracking: Track transportation energy consumption
- Device efficiency monitoring with optimization suggestions
- Energy-saving tips and recommendations
- Community leaderboard with EcoPoints ranking
- Weekly energy efficiency competitions
- Achievement tracking and badges
- Historical performance analysis
- Active sustainability challenges
- Progress tracking with visual indicators
- Reward system for completed goals
- Community events and announcements
- Integrated AI chatbot for eco-friendly advice
- Personalized energy-saving recommendations
- Real-time Q&A about sustainability practices
- Connected to n8n workflow automation
- Interactive charts and graphs using Recharts
- Carbon footprint tracking over time
- Renewable energy usage breakdown
- Water conservation progress
- Waste management analytics
- Device efficiency comparisons
- Vehicle energy consumption analysis
- React 19 with TypeScript
- Vite for build tooling
- Tailwind CSS for styling
- Recharts for data visualization
- Radix UI for accessible components
- Lucide React for icons
- Node.js with Express
- CORS for cross-origin requests
- n8n integration for AI workflows
- Dotenv for environment management
- ESLint for code linting
- TypeScript for type safety
- PostCSS for CSS processing
- Vite for fast development
EcoTracker/
├── Backend/
│ ├── package.json
│ └── server.js
├── frontend/
│ ├── public/
│ │ └── vite.svg
│ ├── src/
│ │ ├── components/
│ │ │ └── ui/
│ │ │ ├── card.tsx
│ │ │ ├── chart.tsx
│ │ │ └── select.tsx
│ │ ├── lib/
│ │ │ └── utils.ts
│ │ ├── assets/
│ │ ├── App.tsx
│ │ ├── App.css
│ │ ├── EcoCharts.tsx
│ │ ├── SimpleCharts.tsx
│ │ ├── index.css
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── index.html
│ ├── package.json
│ ├── vite.config.ts
│ ├── tsconfig.json
│ ├── tailwind.config.js
│ └── components.json
└── README.md
- Node.js (v18 or higher)
- npm or yarn package manager
-
Clone the repository
git clone <repository-url> cd EcoTracker
-
Install Backend Dependencies
cd Backend npm install -
Install Frontend Dependencies
cd ../frontend npm install
-
Backend Configuration
Create a
.envfile in theBackenddirectory:PORT=5000 NODE_ENV=development # Add any additional environment variables here
-
Frontend Configuration
The frontend uses Vite's default configuration. No additional environment setup required.
-
Start the Backend Server
cd Backend node server.jsServer will run on
http://localhost:5000 -
Start the Frontend Development Server
cd frontend npm run devFrontend will run on
http://localhost:5173
-
Build Frontend
cd frontend npm run build -
Preview Production Build
npm run preview
npm run dev- Start development servernpm run build- Build for productionnpm run lint- Run ESLintnpm run preview- Preview production build
node server.js- Start production servernpm test- Run tests (not implemented)
- POST
/api/chat- Description: Send messages to AI assistant
- Request body:
{ "message": "your message here" } - Response:
{ "reply": "AI response" }
The application uses a custom design system built with:
- shadcn/ui components for consistency
- Tailwind CSS for styling
- Radix UI for accessibility
- Custom animations and transitions
- Dark theme optimized for environmental awareness
- Home Devices: LED lights, HVAC, water heating, electronics, appliances
- Vehicles: Electric cars, gasoline vehicles, airplanes
- Efficiency Monitoring: Real-time efficiency ratings and consumption data
- Carbon Footprint: Monthly CO2 emissions tracking
- Renewable Energy: Solar, wind, and hydro energy consumption
- Water Conservation: Usage vs. savings tracking
- Waste Management: Recycling, composting, and landfill percentages
- EcoPoints System: Reward sustainable behaviors
- Weekly Challenges: Energy reduction goals
- Community Competitions: Leaderboards and rankings
- Achievement Badges: Recognition for milestones
The AI chat feature integrates with n8n for advanced workflow automation:
- Webhook endpoint:
https://temp23.app.n8n.cloud/webhook-test/device-assistant - Handles natural language processing for environmental advice
- Provides personalized recommendations based on user data
The frontend can be deployed to:
- Vercel (recommended for Vite projects)
- Netlify
- GitHub Pages
- Any static hosting service
The backend can be deployed to:
- Heroku
- Railway
- DigitalOcean
- AWS EC2
- Any Node.js hosting service
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the ISC License - see the LICENSE file for details.
For support and questions:
- Create an issue in the repository
- Contact the development team
- Check the documentation for common solutions
- Mobile application development
- IoT device integrations
- Advanced AI recommendations
- Social features and community challenges
- Real-time data from smart home devices
- Carbon offset marketplace integration
- Detailed reporting and analytics
- Multi-language support
- React community for excellent tooling
- Recharts for beautiful data visualization
- Tailwind CSS for rapid UI development
- n8n for workflow automation capabilities
- Open source contributors and environmental advocates
EcoTracker - Making sustainability tracking simple, engaging, and effective. Together, we can make a difference for our planet! 🌍💚