PixelPerfect

• 

  Drawing interface

• GIF

  Pan/zoom, coloring demo

Inspiration

This idea was spawned by a desire to hold ourselves and our friends accountable on reoccuring tasks while aligning with the goal of collaboration, fostering connection, and creating shared memories. To gamify this experience and incentivize people to play, we built and deployed a community art web application inspired by the r/place social experiment, with a twist to encourage productivity and routines.

What it does

Users join small, "local boards" with groups of friends or peers, or even solo! When they complete tasks associated with those local boards (go to the gym, grind Leetcode, and so on) they are rewarded points in the form of pixels that they can use to draw on their local boards. When the community reaches milestones in their local art boards, they are rewarded with pixels they can use to draw on the global board that is visible to all users. More difficult tasks are rewarded with higher numbers of pixels. Complete your tasks and be productive!

How we built it

We split up into teams to implement the frontend and backend. We communicated frequently but this made the division of labor a lot more doable. We prioritized the most critical features for completion first to ensure our app is functional. In the backend, we scaled up using MongoDB locally before integrating to Atlas. Quick real-time frontend backend communication was made possible using the WebSocket protocol. The frontend was made from scratch in Node.JS.

Challenges we ran into

Implementing any and everything! Auth0 was particularly painful to integrate since it was new to all of us. Building a database that functioned and met our needs took a lot of time and brainpower as well.

Accomplishments that we're proud of

Everything!!! Especially delivering an app that has so much room to expand in feature set but still works well in the ways we would like it to.

What we learned

The power of perseverance. The idea that everything will go wrong, How to effectively compromise and collaborate as a team. Workflow for taking a product from the earliest kernels of an idea to a completed project.

What's next for PixelPerfect

We want to continue building out features with the hope that this is one day open to the general public to incentivize their own productivity.

Built With

• auth0
• html/css
• javascript
• mongodb
• node.js
• socket.io