back to all projects

Web Development

Plix

Online community for location-based collaborative pixel art, built with Node.js and Socket.IO

Pixel art on the Next House board in Plix.

I created Plix with my friend Jessica Tang in January 2018. It won 1st Place in MIT 6.148 (now web.lab), a campus-wide web programming class and competition.

Note: Plix currently only has boards on MIT campus, so you'd need to be at MIT to draw on a board. However, you can always view boards other Plixers have created by logging in with username test and password test, and then clicking the icon.

Open Plix

The Idea

Plix was inspired by public art and murals. At MIT, murals play a large role in dorm culture—students love to paint murals in the hallways, and often the art created by each living group reflects its unique community.

Chalkboard mural in Next House Lego mural in East Campus

left: MIT Next House, right: MIT East Campus

Building mural in Boston Subway train mural in NYC

left: Boston, MA, right: New York, NY

There is art to be found in communities, and community to be found in art, in places all over the world. People love to make art together, but it's often difficult to secure physical spaces to do so. Plix's online platform enables artists to collaborate with others nearby to create pixel art and share it with the world.

There is art to be found in communities, and community to be found in art, in places all over the world.

Walkthrough

Homescreen

When you visit Plix, you'll find the homescreen, which prompts you to login or sign up for an account. The parallax pixel clouds (and the occasional pixel pizza, watermelon, or coffee) are randomly generated each time you load the page.

Plix homescreen

Parallax pixel clouds, and the occasional pizza.

Main Features

Plix's main features include location-based discovery, community leaderboards, and personalized history.

Plix's main features

Location-based discovery: Plix's main screen is a map showing boards near you, represented by flags. As you move around, you can discover more boards and view the art Plixers are creating nearby.

Community leaderboard: If you're located within range of a board, you can draw on it by selecting a color and clicking a pixel on the board. You'll also see a leaderboard showing the users who currently own the most pixels on that board. As other Plixers draw, the pixel art and the leaderboard update in real-time.

Plix board

Board interface and community leaderboard.

Personalized history: You can find a list of your contributions on your profile — this is a fun way to keep track of places you've visited and watch how the art there evolves. The color of each board is determined by the color of the pixel you last placed on it.

Plix profile

Personalized history on profile.

How It Works

Plix is built with Node.js and Express, and it interfaces with a MongoDB database using Mongoose. The frontend uses jQuery, Handlebars.js templating, and the SASS CSS preprocessor.

We also brought in Google Maps API to render a map and grab the user's location, SocketIO to implement real-time updating boards and leaderboards, and the jscolor library to create a color picker.

What I Learned

Jessica and I worked closely across all aspects of Plix, splitting the code at a fine-grain level. Through this project, I strengthened my web development skills across the full stack.

On the backend, I learned how to implement sessions and user authentication, and I became more familiar with Javascript callback functions, MongoDB schemas, and SocketIO. On the frontend, I gained experience with sending HTTP requests, templating with Handlebars, and writing SASS/CSS to create Plix's playful look.

What's Next

There are many directions in which we could take Plix! Here are a few ideas we came up with:

One small thing we're proud of is Plix's name. It's a spin on the word pixel, and we think it makes for a pretty catchy verb. Maybe it'll catch on one day — for now, we'll Plix on!

back to all projects