We found a subreddit where users could paint one pixel on a collective image every hour. It was a social experiment to see how people would collaborate to make designs together. It ended up showing that people could work together to achieve goals really well.

What it does

PixelHeart puts a twist on that idea. It allows nonprofit organizations to set up fundraiser murals. Users can then donate a small amount of money to draw on the murals. This project combines charitable giving, fun for artists, and a technological challenge for developers.

How we built it

We made an Express web app using Node.js. Our custom authentication solution used the bcrypt hashing module from npm and stored JSON Web Tokens in browser cookies. We used a MariaDB instance as our database and queried it with Sequelize.js, which is a JavaScript wrapper for SQL. We used HTML canvases to implement drawing and the Stripe API to process payments. Our front end used the Fomantic-UI CSS framework and a templating engine called Nunjucks.

Challenges we ran into

  • HTML canvases are very difficult to work with
  • Trying to store images files that constantly change requires some intelligent design choices

Accomplishments that we're proud of

We're proud that we were able to come up with an idea that's fun, technologically impressive, and helps support those in need.

What we learned

We had never worked with many of these technologies before. In fact, the only technologies on the list above that we had all used before were Express and Node.js itself. Everything else was new to at least one person, so everyone learned how to use some new technologies. We also got practice making design decisions quickly and trying to come up with a project idea.

What's next for PixelHeart

We'd like to bring this app to production to actually support charities. Before we do that, we need to rethink some of our design choices in terms of data storage. We also need to fix some of the rough-around-the-edges issues that often come with Hackathon projects like poor input validation and security vulnerabilities.

Team Members - Flight Crew

  • Dominic Rutkowski (dominicrutk#3030)
  • Vladimir Tivanski (pɐlʌ#8077)

Built With

Share this project: