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 🌍
Please give it a Try🌲🌲🌲
If you like👍 the idea and 🩷the project don't forget to like and comments.
Or if you think, it's need any improvement or have any bugs then feel free to mentioned it in the comment below.
Top comments (0)