This is a submission for Weekend Challenge: Earth Day Edition
🌱 What I Built
Plantera is an interactive Earth where users can plant virtual trees on real-world locations and contribute to a global, community-driven green map.
Users can:
- 🌍 Plant trees anywhere on Earth
- 📍 Choose real-world locations using latitude & longitude
- 🖼️ Upload images of their plants
- 💬 Add quotes or messages
- 🌳 Watch the Earth become greener as more people plant
The idea is simple:
Turn environmental awareness into an interactive experience.
Instead of just talking about planting trees, Plantera lets users visually contribute to a greener planet.
🚀 Demo
🌐 Live Demo: https://plantera-phi.vercel.app
🎥 Video Demo:
Sorry for my english in the demo video😁😅
screenshots
💻 Code
GitHub Repository: https://github.com/anupamthakur-dev/plantera
🧠 How I Built It
🌍 Interactive Globe
Plantera uses a 3D interactive globe where users can plant trees across the Earth.
Each planted tree stores:
- Location (lat/lng)
- Plant type
- User information
- Images
- Quote/message
To maintain performance, I used:
- Plant type grouping instead of unique models per plant
- Lazy rendering of markers
- Optimized rendering logic for large datasets
This allows Plantera to scale to thousands of trees smoothly.
🌱 Planting System
Users can plant trees through a bottom floating action bar:
- "Plant a Sapling 🌱" CTA
- Bottom-sheet modal
- Smooth slide animations
- Blur background overlay
The modal system is built as a state machine architecture allowing future expansion without breaking UI.
🖼️ Image Upload System
Users can upload multiple images when planting.
Features:
- Multiple image uploads
- Secure storage using Supabase Storage
- Image cleanup if upload fails
- Optimized upload flow
🗂️ Backend & Database
I used Supabase for:
- Authentication
- Database
- Storage
- Row Level Security
Database structure:
usersplants_plantedplant_images
This allows scalable, secure plant posts.
⚡ Performance Decisions
To keep Plantera fast:
- Lazy loaded modals
- Plant type grouping
- Optimized globe rendering
- Minimal 3D model usage
- Efficient database queries
These decisions help Plantera scale to global-level usage.
🎯 Why Plantera
Earth Day is about taking action, not just awareness.
Plantera turns planting into:
- Interactive
- Visual
- Community-driven
Every planted tree becomes a digital footprint of environmental action.
🏆 Prize Categories
🥇 Best Use of GitHub Copilot
I used GitHub Copilot extensively to:
- Design scalable architecture
- Build modal state machine
- Structure services layer
- Optimize performance logic
- Generate clean TypeScript interfaces
Copilot helped accelerate development and maintain clean, scalable code.
🌍 Future Plans
- Real tree partnerships
- Gamification
- Community challenges
- Tree growth animations
- Environmental impact stats
🌱 Final Thoughts
Plantera is more than an app.
It's a living, growing Earth powered by community.
Plant a tree.
Watch the world grow greener.
Thanks for reading 🌍
Top comments (0)