rippl.it

Your action of sharing a link to a cause in need makes an impact. With rippl.it, you can now track the generations of support you have helped raise. Watch your ripple grow one share at a time.

Comment

Inspiration

Hmm, how did this idea come about? Well, we've always found numbers fascinating, but what captured us, even more, is the pay it forward movement. If you haven't seen the movie, we highly recommend it. For a quick example, Person A does something nice to Person B, and Person B pays it forward to Person C, and so on. Now, we're wondering how far will Person A's impact go? It's so fascinating to see how one small action can lead to such a huge ripple effect. So, we decided to build an app filled with statistics, so we can track how far our impact can go. We thought fundraising and bringing awareness to nonprofits was the best place to introduce this idea.

What it does

  • Click on "Start a rippl.it", which will bring you to a form. This is how you create your first Rippl.it. Only title and organizations are required.
  • This brings you to your link page for the Rippl.it. Towards the bottom, you can click on the link to copy it and send it to someone else. If you go to the link yourself, the URL will stay the same, but if someone accessed it, it will automatically redirect to a new link page. They now have their own link page to track their own statistics such as visitors, views, descendants, etc. Refresh your own page when someone else accessed it, you will notice your statistics changed. Click on each stat card to see what each stat means.
  • Check out the Explore page to see trending Rippl.its. Click the title on any of them to create your own links for them that you can share.
  • Check out the About page for more information

How we built it

  • We used React for the frontend, Flask for the backend, MongoDB for our database, and an AWS EC2 instance for hosting.
  • We use Chakra UI and Material UI for frontend components. We use both because we liked Chakra's style, but Material offered some components that Chakra didn't have such as search select inputs in the form.
  • We have four different models, ripples (a tree of links), link (page users share to others), user, and organization.
  • We automatically generate a new link if someone hasn't visited any link of the Ripple yet, but if they have, we bring them back to the link already generated. We store cookies in the backend to remember if a user has already visited the Ripple.
  • We have an EC2 instance running with Ubuntu. We use nginx and gunicorn to deploy our app.

Challenges we ran into

  • Designing the models & system involved a lot of debate.
  • Efficiency in how to update all the statistics count (right now, we calculate on each visit). But, moving this to an async process makes more sense.

Accomplishments that we're proud of

  • We built a full-stack web application in less than a month
  • Our automatic link generation for each visit
  • Storing cookies to make each link unique to the visitor
  • Being able to deploy something

What we learned

  • How to deploy a React + Flask app on AWS
  • Mobile view is hard

What's next for rippl.it

  • The Explore page could use some more work. If we had more time, we would add better filtering options and give it a more aesthetic appeal to it.
  • Currently, we don't track amount raised for each nonprofit, but that's something we need to debate about, whether to work with the nonprofit's API or raise the money on our own and then donate it (something like GoFundMe).
  • Also, tracking miles is not set because we're figuring out the best way to balance user's privacy and aggregating useful information
  • Cool user pages to keep track of all rippl.its they make
Share this project:

Updates