🌍 Plantera — Plant Trees on a Living Earth

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: workin on it

💻 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:

• users
• plants_planted
• plant_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 🌍