GoFundTree

GoFundTree is an AR mobile web-app that lets you place virtual trees in urban spaces, share these photos, and fund real tree planting projects, fostering green spaces within our cities.

Comment

About GoFundTree

GoFundTree is an Augmented Reality (AR) web application designed for mobile devices. The project was inspired by the need for more green spaces in urban areas, specifically in heavily urbanized cities like Newark, from where our team is based. Our app allows users to visualize how trees could transform their surroundings by placing virtual tree models using AR, snapping photos, and sharing them. In addition, users can donate to raise funds for real-world tree planting projects, turning what they see in AR into reality.

Inspiration

The idea was born from the lack of green areas in urban cities. We want to give people a way to see the possibility of having green spaces in otherwise bare locations and, in doing so, promote the construction of sustainable cities.

What We Learned

Working on GoFundTree allowed us to dive into new technologies and skills, including:

  • Blender for 3D modeling
  • ModelViewer for integrating AR into web applications
  • Managing AR models and data using databases
  • Creating a seamless user interface that ties everything together

It was a challenge to integrate these technologies, but each step brought us closer to our vision.

Challenges

  1. Optimizing 3D Models for AR
    Creating tree models in Blender was just the first step; ensuring they were optimized for AR use presented a unique challenge. We had to strike the right balance between visual detail and performance, ensuring that the models were lightweight enough to run smoothly on mobile devices without compromising on quality. This required extensive iteration, testing, and refinement.

  2. Cross-Device AR Functionality
    Ensuring the AR feature worked consistently across different mobile devices posed another major challenge. With the diversity in screen sizes, processing power, and camera quality, providing a uniform experience was complex. We conducted rigorous testing on various Android and iOS platforms to ensure the app performed well, regardless of the hardware.

  3. Backend Integration and Data Management
    The backend architecture for GoFundTree required careful planning to manage multiple features efficiently. Using Python, Flask, and Jinja, we built a system that handled a range of tasks, including storing user-uploaded images, managing a database of tree models, and processing donations. Ensuring smooth real-time operations across these different elements required meticulous integration and debugging.

  4. API and System Integration
    Developing robust APIs to seamlessly connect the front-end with the backend was critical. These APIs needed to facilitate quick and reliable data exchanges—whether retrieving tree models, saving user photos, or processing donations. Integrating cloud technologies like Google Cloud Platform and Firebase Storage added an additional layer of complexity in maintaining scalability and efficiency.

  5. Real-Time Performance Optimization
    Ensuring users could place virtual trees in real time, without experiencing latency, was essential for the app’s success. We encountered challenges with load times, particularly when dealing with larger models or slower network connections. Through careful optimization of database queries, implementing caching strategies, and refining model loading processes, we were able to significantly enhance performance.

  6. User Experience and Accessibility
    Designing a user interface that was intuitive, yet capable of handling complex functionalities, was crucial. We aimed to ensure users could easily interact with the AR features and make donations without encountering any friction. Achieving this balance required ongoing adjustments and extensive user testing to create a streamlined, user-friendly experience.

Overcoming these challenges not only strengthened our technical capabilities but also provided valuable insights that we will apply in future projects.

How We Built It

We built GoFundTree using a wide array of cutting-edge technologies:

  • Blender for procedural generation and 3D tree modeling.
  • ModelViewer to seamlessly enable AR camera functionality on the web.
  • Python, Flask, and Jinja for backend development and system integration.
  • Google Cloud Platform and Firebase Storage for hosting and data management.
  • A modern front-end stack with HTML5, CSS3, and JavaScript for responsive design.
  • Docker for containerization and deployment across environments.
  • GitHub for version control and collaboration.

With this diverse tech stack, we were able to create a highly interactive and scalable solution to promote urban greenery.

Share this project:

Updates