ForestFund

Framing the Problem

Splitting expenses among friends, family, or flatmates is something nearly everyone deals with - whether it’s sharing rent, buying group gifts, or paying for nights out. However, the process often becomes confusing, awkward, and stressful. People forget who owes what, miscommunicate about amounts, or feel uncomfortable reminding others to pay them back.

This lack of structure leads to unpaid balances, frustration, and unnecessary tension in relationships. It’s not just a financial issue - it’s also emotional and social. Many people find it uncomfortable to bring up money, especially with friends, and this hesitation can strain even the closest connections.

Existing solutions like spreadsheets or payment apps tend to feel overly formal or impersonal, offering no motivation or emotional connection to the process. There’s a clear gap for a solution that makes managing shared costs feel lighthearted, intuitive, and rewarding, instead of a chore.

ForestFund was created to address this problem - not only by simplifying expense tracking but by reshaping the emotional experience around paying people back.

Idea Explanation

ForestFund turns the process of repaying shared expenses into a fun, gamified experience. Users can easily track how much they owe and how much others owe them, all in one simple interface. Each time a user contributes toward repaying their debt, their virtual tree grows, symbolising financial progress. Once the debt is fully cleared, the user can harvest fruits to gain XP and bake a virtual dessert (apple pie🥧) as a playful reward, this incentive can thus make the app more interactive.

By transforming a tedious and awkward responsibility into an engaging, goal-driven journey, ForestFund encourages positive financial habits while making debt repayment more enjoyable, motivating, and rewarding

Implementation

ForestFund is built using Next.js (React framework) and TypeScript, creating a fast, scalable, and modern frontend.

For styling, we used Tailwind CSS, which allowed us to build a responsive and clean UI quickly. Our app structure follows a modular component-based design, with reusable files under /components and utility hooks in /hooks for mobile responsiveness and toast notifications.

We also aimed to implement Firebase Authentication for user sign-up and login using email and password. However, during setup, we faced an issue where environment variables weren’t loading correctly in Next.js, causing this error:

TypeError: Cannot read properties of undefined (reading 'VITE_FIREBASE_API_KEY')

This occurred because Vite-style environment variables (import.meta.env) aren’t directly supported in Next.js, which requires process.env.NEXT_PUBLIC_... instead.

To maintain app stability for the hackathon demo, we chose to temporarily remove the Firebase authentication feature and focus on delivering a clean, functional, and visually engaging prototype. Our priority was ensuring a seamless user experience within the time constraints. In future iterations, we plan to reintroduce Firebase authentication by correctly configuring environment variables to ensure full compatibility with Next.js.

Challenges

Throughout the development of ForestFund, our team encountered several technical and design-related challenges that tested both our problem-solving and time-management skills.

One major challenge was integrating Firebase authentication for email and password sign-up. Our goal was to allow users to securely create accounts and track their financial progress individually. However, during deployment, we encountered an error related to environment variables in Next.js: TypeError: Cannot read properties of undefined (reading 'VITE_FIREBASE_API_KEY')

This issue occurred because the app couldn’t correctly access Firebase configuration values through the environment file. We spent time debugging and researching how to properly set up environment variables for a Next.js environment, but due to limited time during the hackathon, we decided to temporarily remove Firebase integration to ensure the app remained stable for the demo.

To maintain progress and stability, we focused on perfecting the core UI and frontend experience, ensuring that all other features - such as expense tracking, tree growth animations, and user interactions - worked smoothly. This approach allowed us to deliver a clean, functional prototype without compromising reliability.

Another challenge involved using APIs and managing asynchronous data. Initially, we planned to include a weather API to match the forest’s background theme with real-time UK weather conditions. However, due to API key limitations and account setup issues, we had to postpone this feature. Still, it provided valuable learning experience in handling external APIs, fetching data, and debugging unexpected crashes.

Lastly, the time constraint of the hackathon required us to prioritise efficiently. Balancing aesthetic design with functional logic was tricky, but we learned how to iterate quickly, divide responsibilities, and make pragmatic decisions - focusing on delivering a stable MVP rather than an incomplete full-stack system.

In the end, every challenge pushed us to better understand Next.js, API configuration, Firebase setup, and the importance of modular design. These lessons will directly inform how we approach future projects with stronger backend integrations and more robust error handling.

Accomplishments

Working on ForestFund was an incredibly valuable learning experience that helped us grow both technically and collaboratively.

Throughout the project, we gained a deeper understanding of how to translate an abstract idea into a functional prototype under strict time constraints. We learned to prioritse essential features, stay adaptable when things didn’t go as planned, and make decisions that balanced creativity with technical feasibility.

From a technical perspective, we explored key concepts such as:

• Setting up a React and Next.js project from scratch

• Organising components and managing reusable UI structures

• Handling asynchronous operations and API requests

• Experimenting with Firebase authentication and understanding environment variable setup

• Deploying and testing a project locally using Node.js and npm

On the teamwork side, we discovered the importance of clear communication, collaboration, and adaptability. We learned to divide tasks based on individual strengths - whether it was UI design, frontend logic, or debugging - and to support each other when challenges arose.

Most importantly, we learned the value of iteration and persistence. Even when features didn’t work as expected, we found creative alternatives and focused on delivering a clean, visually appealing, and functional prototype that effectively showcased our idea.

Completing ForestFund reminded us that hackathons are not just about building the most advanced product, but about learning fast, experimenting fearlessly, and working as a team to bring an idea to life.

Next Steps

• Integrating Firebase Authentication:
  We aim to properly configure Firebase within the Next.js environment to enable secure email sign-up and login functionality. This will allow users to have personalised accounts where their financial progress and virtual forests are stored safely in the cloud.

• Adding Real-Time Weather Integration:
  We plan to reintroduce the WeatherAPI to dynamically update the forest background based on live UK weather conditions. This feature will make the user experience more immersive and visually engaging, allowing users to see their virtual environment change with the real world.

• Expanding Gamification Elements:
  In future updates, we hope to include achievements, levels, and streak systems to make debt repayment even more rewarding and consistent.

  • Potentially, allowing the user to customise their own avatar rather than a generic avatar, as well as choosing their spirit guide, so that instead of a default fairy, they can have options such as: a wise owl, a sage/wizard, a fire flame spirit, and so on. Moreover, users can choose between different themes such as seasons, or depending on if it's a festive occasion such as Halloween, Easter, or Christmas. And, we could incorporate a tracker to see how many trees have grown

• Database Integration for Expense Storage:
  Eventually, we’d like to connect a backend database to persist expense and progress data, enabling multi-session tracking and a more complete user experience.

• Sustainability Eco Feature

  • We also plan to introduce a real-world sustainability layer - once users grow their in-app tree by paying debts on time, a real tree could be planted through verified environmental partners (like Ecologi or One Tree Planted). This will transform ForestFund from just a financial tool into a socially and environmentally conscious platform, where responsible money habits directly contribute to a greener planet. A real life tree could be planted when a user reaches a certain amount of XP (points).