Glassbox

When impact is invisible, donors don't return. Glassbox is a retention engine disguised as an impact tracker. We tie dollars to verified outcomes, building lifelong loyalty.

Comment

Inspiration

We were stunned to learn that 82% of first-time charitable donors never give a second time. However, we realized that donors aren't leaving because they don't care about the cause, but rather because they don't know where their money went. After the initial "Thank You" email, a donation effectively vanishes into a black hole. As such, we wanted to build a system that replaces blind trust with concrete evidence of where the expenses go.

What it does

Glassbox connects donors and organizations by providing transparency and measurable impact to their donation. Organizations can login and submit their spendings and budget plans, while donors can see exactly where their money has been spent. Using a first in, first out basis, Glassbox assigns and tracks receipts and specific locations, such as local hospitals and schools for healthcare or educational NPO sectors.

How we built it

We started our development by conceptualizing the user experience and interface within Figma. This allowed us to iterate on the visual design and establish a high-quality prototype before writing any code, ensuring our donor and organisation dashboards were both intuitive and visually compelling.

Translating these designs into a functional application, we engineered the frontend architecture with React. For rapid iteration during the early stages of development, we initially mocked our data structures using a local JSON file. This lightweight approach allowed us to quickly build out the frontend components, establish state management, and refine the user flow without being bottlenecked by backend configuration.

Once the frontend foundation was solidified, we transitioned from a localized proof-of-concept to a complete full-stack architecture. We developed a robust backend API using Express.js to handle our core application logic. Simultaneously, we replaced our mock JSON data with a fully integrated MongoDB database. This migration to a NoSQL document database provided the scalability and flexibility needed to securely manage the complex, dynamic relationships between donor/organisation accounts, donation records, and impact metrics.

Challenges we ran into

With our Express and MongoDB architecture, our major hurdle was completely overhauling the React frontend. During our rapid-prototyping phase, our UI components were tightly coupled to a static, local JSON file. This meant data retrieval was synchronous and instantaneous. To connect to our new backend, we had to decouple our user interface from these hardcoded structures and rewrite our data layer to consume RESTful API endpoints.

Accomplishments that we're proud of

We are incredibly proud to have architected and deployed a completely functional, full-stack application within the strict 24-hour timebox. Transitioning quickly from our initial mocked JSON data, we successfully engineered a robust Express.js backend and integrated a live MongoDB database. Establishing RESTful API routing and ensuring seamless data flow across the entire stack under time constraints, given our team's varying levels of skill, is a massive technical win for our team.

Beyond just making the architecture function, we are proud of making the platform look exceptional. We successfully translated our Figma designs into a polished, production-ready React frontend. We managed to strike a wonderful balance between heavy backend engineering and a highly refined, user-centric interface that effectively communicates the direct impact of every donation.

What we learned

Going into this project, we assumed non-profits primarily struggled with donor acquisition. We were completely surprised to learn that their actual crisis is retention. Discovering the massive churn rate of first-time donors changed our perspective. Even more surprising was the root cause: donors aren't leaving due to a lack of empathy or funds, but they are leaving because of the "black hole" effect. This insight is what pivoted our entire project to our current idea.

On the technical side, making the jump from a localized prototype to a live full-stack architecture was an incredible learning experience. We learned firsthand that connecting a React frontend to an Express and MongoDB backend is far from "plug-and-play." There were lots of complicated refacotring that we had to make so that we could transfer from our fake database to a real one.

What's next for Glassbox

Glassbox is looking to integrate directly into existing financial software, enabling zero-touch data syncing that eliminates manual entry from staff. We may also expand into creating third party verification factors to validate field claims, ultimately strengthening public trust and donor retention.

Share this project:

Updates