Ethan and I are both part of a Performing Arts organization that had all of its performances canceled this summer, so we really wanted something that would help donors to remember that their donations affect real people and real things, hopefully, encouraging them to donate more. We thought about the idea of making donations tangible: what if you could purchase gift for your favorite nonprofit. That was how we came across this idea of having a store where you can purchase things for a charity.

What it does

This frontend allows nonprofits to use a Stripe account to create products or goals on a metaphorical wish list. These products will then be displayed for the donor to "purchase". When the donor makes the purchase the payments are handled securely by Stripe, and a notification is processed by our server, keeping a log in our databases progress towards goals and donor emails, so that thank you letters can be sent at a later date.

How We built it

We created a React-based frontend for Stripe, the payments processing company, so that a nonprofit can create "products" that they need. When a potential donator visits the site, they see a selection of "products" and can purchase one. These purchase buttons redirect to a Stripe-hosted Checkout page, so that Stripe securely processes all payment.

In order to keep track of these payments, we send information from new payments into MongoDB, which keeps a running total of the amount raised towards a specific goal, as well as the email addresses of those who donate.

The React frontend updates in real time based on information from the database.

We have the donor-facing "store" of our frontend, and we also wanted to add a private dashboard for the nonprofit manager. Using Auth0, we authenticate a user, allowing them into the private section of the app. Within this private segment, the user can see progress towards a goal.

Challenges We ran into

We jumped from tech to tech - we ended up trying out almost every sponsor of the hackathon. We started with Gatsby, taking the inspiration to use Stripe. We had to diagnose a ton of cryptic pythonAnywhere errors, and the docs for that are not very good.

Accomplishments that We're proud of

We came into this hackathon not really knowing very much. I've been studying computer science for about a year, but I only learned React for the first time like a month ago, and Ethan has only taken one computer science class. So we came into this weekend just hoping to learn a lot - which we definitely did. I wasn't really expecting to have a product that's working at this level or at this level of complexity at all. I did not know how to set up a flask server; I didn't know that react could talk to a flask server; and I really had no idea how to deploy an app. We experimented with Gatsby and Vercel and also looked into different services like AWS elastic Beanstalk or digital oceans hosting services. We just ended up learning a lot about what's out there and I'm really really happy that we've created something so, for beginners.

What I learned

I learned that it is really fun to just think about ideas and try to build them. I have a lot of ideas for things but often times I get bogged down in a struggles with planning or deployment. I found that it was fun to just try out lots of different things and to work with a great partner.

What's next for CharityPool

I hope that we will be able to diagnose a lot of the errors that we're currently seeing. We've had the app in various stages of working andright now it's not working at 100% of what we would like, but I really hope to add an email send service and just make the front end a little bit more reliable.

Built With

Share this project: