TreeRender

An AI-powered platform that visualizes forest change, analyzes vegetation, and helps raise awareness about deforestation using interactive maps, satellite data, and immersive 3D experiences.

Comment

🌳 Inspiration

We see news about deforestation all the time. Forest cover is declining, vegetation is changing, and entire landscapes are transforming.

But there was one problem: most of this information lives inside complicated reports, technical dashboards, and numbers that many people never explore.

So we asked ourselves:

What if environmental change was something people could actually see and experience?

That question became TreeRender.

We wanted to turn complex vegetation and forest data into an experience that feels visual, interactive, and easy to understand. Instead of simply telling people that forests are changing, TreeRender helps them explore those changes through maps, satellite-based insights, immersive visuals, and storytelling.

Our goal was simple: make environmental change visible.

🌍 What it does

TreeRender is an interactive environmental awareness platform that helps users explore forest and vegetation conditions in a more engaging way.

Instead of opening multiple technical tools or trying to understand raw environmental data, users can explore everything through one interactive experience.

With TreeRender, users can:

  • 🗺️ Explore environmental locations through an interactive map
  • 🌱 View vegetation and forest-related insights
  • 🛰️ Use satellite-based environmental data
  • 🌳 Understand changes affecting vegetation and forests
  • 🌍 Explore areas through an immersive visual experience
  • 💡 Learn more about environmental change and restoration
  • ✨ Experience smooth animations and 3D environmental storytelling

TreeRender doesn't just show data — it tries to make the story behind that data easier to understand.

🛠️ How we built it

TreeRender is a full-stack web application built by combining modern web technologies with environmental data services.

Frontend

We used React + Vite to build the application and Tailwind CSS for the interface.

To make the experience feel alive, we used:

  • Framer Motion & GSAP for animations
  • Lenis for smooth scrolling
  • Three.js, React Three Fiber & Drei for 3D experiences
  • MapLibre GL for interactive maps
  • Recharts for data visualization
  • Lucide React for UI icons

Backend

The backend was built with:

  • Node.js
  • Express.js
  • TypeScript

For satellite and vegetation-related functionality, we integrated Copernicus services.

Security was important here. Instead of exposing sensitive credentials on the frontend, authentication happens on the backend. We also implemented access-token caching so valid tokens can be reused efficiently.

The frontend is deployed on Vercel, while the backend runs separately on Render, with a dedicated health-check endpoint for monitoring.

Our biggest design goal was to avoid creating a typical data dashboard.

We wanted TreeRender to feel like a journey — where maps, visuals, data, animations, and 3D elements work together to tell the story of environmental change.

⚡ Challenges we ran into

The most interesting part of the project was that building the features was only half the challenge — making everything work in production was the other half.

We faced issues with:

  • Connecting the Vercel frontend to the Render backend
  • CORS configuration
  • Environment variables
  • Production API URLs
  • Copernicus authentication
  • Access-token caching
  • Image and asset loading
  • Backend port binding
  • Monitoring the deployed service

One of the biggest lessons came from deployment: something can work perfectly on localhost and still break in production.

We spent significant time debugging these production-only issues, testing requests, checking backend logs, configuring allowed origins, and monitoring our health endpoint.

Working with maps, 3D assets, animations, and external environmental services also meant constantly balancing features with performance.

There were definitely frustrating debugging moments, but solving those problems is what transformed TreeRender from a local project into a real deployed application.

🏆 Accomplishments that we're proud of

We're proud that TreeRender became more than just a hackathon idea.

Some things we're especially proud of:

  • 🚀 Taking the project from concept to a fully deployed application
  • 🌍 Building a project around a real-world environmental problem
  • 🛰️ Integrating satellite and environmental services
  • 🔐 Keeping sensitive authentication securely on the backend
  • 🗺️ Creating an interactive map-based experience
  • ✨ Combining maps, animations, 3D visuals, and storytelling
  • 🔗 Successfully connecting separately deployed frontend and backend services
  • 🐛 Solving real production CORS and deployment problems
  • ❤️ Creating an experience designed to make people care about environmental change

Most importantly, we're proud that we didn't stop when the project worked locally.

We kept debugging until TreeRender was actually live.

📚 What we learned

TreeRender taught us that building a real product is much more than writing code.

We learned about:

  • Full-stack architecture
  • Production deployment
  • Secure environment variable management
  • CORS and cross-origin communication
  • API authentication and token caching
  • External environmental services
  • Interactive maps
  • 3D development on the web
  • Debugging production issues
  • Building technology around a real-world problem

Our biggest lesson?

The feature is not finished when the code works. It's finished when the user can actually use it.

🚀 What's next for TreeRender

TreeRender is just the beginning.

Next, we want to explore:

  • More detailed historical vegetation comparisons
  • Stronger before-and-after visualizations
  • More forest and environmental regions
  • Deeper environmental insights
  • Improved vegetation change analysis
  • Smarter restoration and tree plantation insights
  • More immersive 3D experiences
  • Better performance for larger datasets

Our long-term vision is to create a platform where environmental change is not hidden inside complicated reports.

We want people to be able to explore it, see it, and understand why it matters.

Because sometimes, the first step toward protecting something is simply being able to see what is happening to it.

That is what TreeRender is trying to do. 🌳

Built With

Share this project:

Updates

Submission history