Greenly

• 

  Main Dash Board

• 

  Actions

• 

  community challanges

• 

  analaytics

• 

  Leader board

• 

  Signup Page

• 

  Certificate

Inspiration

Climate change awareness is growing, but people struggle to track their personal environmental impact and stay motivated with eco-friendly habits.

What it does

Greenly tracks daily eco-actions (transport, energy, waste), calculates real CO₂ savings, builds daily streaks for consistency, generates shareable certificates, and creates community competition through leaderboards.

How i built it

Built with React and TypeScript frontend, Supabase for backend database and authentication, Tailwind CSS for responsive design, and deployed on Vercel with real-time data synchronization.

Challenges i ran into

Implementing accurate CO₂ calculation formulas, designing streak tracking logic, creating certificate generation with HTML5 Canvas, and handling real-time leaderboard updates across multiple users.

Accomplishments that i am proud of

Created a fully functional web app with gamification that makes environmental tracking engaging, implemented secure user authentication, built responsive design that works on all devices, and achieved real-time data updates.

What i learned

Learned advanced React state management, Supabase database design with PostgreSQL functions, real-time subscriptions, certificate generation techniques, and deployment best practices for full-stack applications.

What's next for Greenly

Add mobile app version, integrate with IoT devices for automatic tracking, implement team challenges for organizations, add AI-powered eco-action recommendations, and expand to include carbon offset marketplace.

Built With

• css3
• git
• github
• html5
• javascript
• lucide-react
• node.js
• postgresql
• progressive-web-app-(pwa)
• react
• react-router
• real-time-subscriptions
• recharts
• responsive
• row-level-security-(rls)
• supabase
• tailwind-css
• typescript
• vercel
• vite