Skip to Content

Web App For Local Reforestation Projects & CO2 Tracking

Category

Geospatial Solutions Development

Project size

12+ MMs

Industry

Environment

Technologies
  • Frontend: React, Next.js, Mapbox, Three.js
  • Backend: .NET, Node.js
  • Database: MSSQL
  • DevOps: Docker, Bitbucket CI/CD
  • Other: Vite

Scope of work

Front-End Web Development


About the project

The client is an Australian company focused on empowering individuals and businesses to participate in global reforestation efforts. The client developed a platform that enables users to purchase trees for local reforestation projects, track the CO2 absorption of the trees, and view their claimed trees virtually on an interactive map. The platform serves as a bridge between environmental sustainability and digital innovation, providing users with a unique opportunity to engage in reforestation initiatives while tracking the environmental impact of their contributions.

The client required the development of a web application that included the following key features:

  • User Registration and Profile Management: Allow users to sign up using their Google accounts, manage their profiles, and track their environmental impact.
  • Tree Purchase and Assignment: Users needed the ability to buy trees, which would be assigned to a specific area in a local reforestation project.
  • Geospatial Visualization: Display the purchased trees on a map, with the capability to view the geographical locations of the trees and track CO2 removal in real-time.
  • CO2 Tracking: Calculate and display the amount of CO2 being removed by the trees purchased by each user.


One of the primary challenges during the development of the web app was the complexity of handling map-related features. Specifically, the platform needed to divide large project areas (polygons) into smaller, manageable tiles to assign to users based on their tree purchases. This involved intricate business logic to ensure that each user could claim a specific area without overlapping or splitting tiles, even when purchasing multiple trees. The solution required careful planning and a high level of coordination to meet tight deadlines.


BHSOFT’s development team focused on creating an intuitive, efficient, and user-friendly platform with a strong emphasis on geospatial data visualization. Key steps included:

  • Front-End Development: Using React and Next.js, the platform was built to offer a smooth and dynamic user experience. The integration of Mapbox and Three.js allowed for interactive and engaging visualizations, where users could easily track and view their trees on the map.
  • Geospatial Data Management: The platform required sophisticated handling of geospatial data, where large project polygons were divided into smaller tiles. We developed complex business logic to ensure that each user’s purchased trees were allocated to specific, non-overlapping areas on the map.
  • Real-Time CO2 Tracking: Integrated CO2 tracking functionality enabled users to visualize the environmental impact of their contributions. The system automatically calculated and displayed the amount of CO2 removed by the trees they purchased.
  • User Engagement: We integrated features such as Google account sign-up, user profile management, and interactive map views, ensuring that users could easily engage with the platform and track their progress.

Key Features of the Platform

  • Map-Based Visualization: Users can view the location of their claimed trees on an interactive map using Mapbox and Three.js for real-time, immersive 3D visualization.
  • Tree Purchase and Assignment: Users can purchase trees and have them assigned to specific areas within the reforestation project, ensuring efficient tracking and management.
  • CO2 Tracking: The platform tracks and displays the CO2 reduction efforts of the trees purchased by each user.
  • User Profile Management: Users can manage their profiles, track their contributions, and receive updates on their reforestation impact.
  • Google Account Integration: Easy sign-up and login using Google account credentials.

The Web App for Reforestation was successfully delivered, offering a powerful geospatial tool for users to actively participate in environmental sustainability projects. The platform has successfully met the following outcomes:


  • Enhanced User Engagement: Users can now easily purchase trees, track their contributions, and visualize their impact on a detailed, interactive map.

  • Accurate Geospatial Data Handling: The solution’s intricate tile management system ensures that each user’s purchase is precisely mapped without overlap, providing a seamless user experience.

  • Environmental Impact Visibility: The ability to track CO2 reduction in real-time has enhanced the platform's transparency and effectiveness in showcasing the impact of each user’s contribution.

  • Scalable Platform: The system is built on a scalable architecture, capable of handling increasing amounts of data as more users and reforestation projects are added.


This solution has significantly advanced the client’s mission of engaging the public in reforestation efforts, providing users with an innovative way to participate in environmental sustainability and track their contributions to combating climate change.