We're all guilty of spending a significant amount of time playing online and mobile games, which probably does us more harm than good. Through this hackathon project, we wanted to turn that idea on its head by repurposing the addictive nature of cute and fun games for the better of our community. What better way to promote charities than by allowing users to play their favorite game all the while supporting nonprofits? In other words, we help users "click it forward" and show their "agape" (Ancient Greek for brotherly or unconditional love) for helping out great causes!

What it does

Our business model relies on generating large amounts of user traffic to “click” and grow their own adoptables. At the same time, our business partners and sponsors will match each click with a fixed sum towards multiple charities of the user’s choice. It’s a win-win for everyone: users get entertainment value out of our game (plus cute graphics to boot), and sponsors boost their reputation and get more exposure. Most importantly: both parties get to play the good Samaritan.

How we built it

Through hard work and dedication. But seriously, to better organize our ideas, we started off with a basic wireframe: layouts and user interface features. Then, we implemented them using a front end framework, namely Vue.js, and connected the front end to our own API for creating, retrieving, and updating data. We created our own graphics using design and digital art software to up the aesthetic appeal of our game and maintain user interest.

Challenges we ran into

Too many.

The very first wall we ran into was login: we initially tried using Firebase to authenticate but we decided to abandon ship due to frustrating errors, instead opting for OAuth. Next up, we had a heck of a time making requests to our own API, thanks to the CORS policy; we even climbed a thirty degree slope to ask for a mentor’s help.

Unfortunately, one of our members ran up against missing dependencies and spent a lot of time debugging as a result, but we managed to power through.

Also learning on the go is really hard. We had limited familiarity with our front end framework, so uncaught errors weighed us down more than we would have liked.

Finally, as artists, designers, and creators, we are perfectionists. Being a perfectionist is definitely a double edged sword, and sometimes we wanted to collectively pull our hair out, but hey, it was worth it, right?

Accomplishments that we're proud of

This was our first ever hackathon! Go go go team! For our first time collaborating and hacking away together, we worked like a single unit. By braving our fear of the unknown and learning new frameworks and software, we made something from nothing (and something we’re very proud of at that). Not to mention, we combined our love for design with our love for practical problem solving to create a game reminiscent of our long-distant childhoods. Wait, who are we kidding? We're all kids at heart for loving adoptables.

What we learned

This hackathon was an incredible learning journey for us! We learned how to make a design-heavy interactive website focusing on user experience, use frameworks for the frontend and connect it to a database in the backend, face obstacles and use what resources we had, and network with different people.

What's next for Agape Adopts

We definitely would like to get our domain name working properly, rather than just having our domain redirect to our Heroku-hosted URL. It’s just more professional that way. And as for another potential source of financial support, we would probably incorporate Google Adsense.

And the most obvious: as a pet adoptable site, we have an incredibly disappointing total of one available adoptable. So watch out for more adorable critters courtesy of Pi!

Share this project: