Inspiration
We were really inspired by a good person doing a good cause. We stumbled upon a YouTube video the other day of a young man that was #teamtrees and wanted to help raise and donate $20,000 dollars to a tree plantation. That got us thinking, what is a way we could 1) display this data 2) engage the user to continue to donate 3) help users track their donations in an entertaining way? That brought about the idea of "Charitree"!
What it does
"Charitree" is a user platform that has a unique way of combining the idea of tracking charity purchases with the idea of visually building icons such as "flowers" and "trees" for the user to see their donation come to life in real time.
The concept we have is of a user solar system - the solar system will hold different planets which are the charities that the user has or is willing to donate to. The user can then go into one of their planets/charities and explore donations to that charity that has been made in the past by them or other contributors.
The icons that show up (flower, mushroom, tree) are dependent on the amount of their donation. They can hover over the icons to see the details such as contributor and amount.
We have a form button on the page that when clicked will show a form where the user can enter their donation and credit card details. This is what allows them to add icons to their planet. Icon placement is randomized but they can move them around if they would like to create a more aesthetically pleasing garden.
How we built it
Tech Stack: React ThreeJS HTML5
Challenges we ran into
We faced challenges with importing modules for different JS functionality and combining it with the ThreeJS library that was being used to display these 3D models.
Accomplishments that we're proud of
We're proud of the product that we've built over the past 24 hours. This was just an idea on a blackboard yesterday, but today we have an application that we can show the judges and a concept that we can bring to life even further in the future. We're also happy about our little wins throughout the project - building unique icons using ThreeJS box geometry, making it so that we can zoom into the planets from the external user solar system - but mostly we're proud of all the hard work we put in!
What we learned
We were initially very ambitious and had tons of unique ideas for the project's initial concept. Within 24 hours, we worked with an unfamiliar library, learned useful javascript techniques, and overall, had a great time collaborating on GitHub. As four software developers, we are proud that we could come out of our comfort zone and try 3d model animations for the first time. It was definitely a great learning experience.
What's next for Charitree
We would like to expand this idea even further:
- By expanding our icon library that allows for more variety of animated objects depending on the donation amount.
- Enabling multiple payment methods to facilitate the user experience
- Friend list to allow users to explore their's friends' solar systems
- adding a status bar for tracking user donation vs personal goal/charity goal
- Water plants: If a user is a regular donator, they could water and grow their plant on the planet
Last but not least, we would also like for Charitree to be able to partner up with charities and make personalized planets / mini-games / donation goals to make the platform more enjoyable!
Log in or sign up for Devpost to join the conversation.