Skip to content
Fullstack Academy team capstone project. Pixalive is a free, multi-user, real-time editor for animated sprites and pixel art., HTML Canvas, and pure functional React components with Hooks.
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 4016271 Oct 30, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
client solve merge conflicts May 21, 2019
server Merge branch 'master' into server-save-timer Jun 27, 2019
.babelrc color-picker May 6, 2019
.gitignore change gitignore May 6, 2019
.travis.yml Merge branch 'master' into krnsk0-patch-1 Jun 5, 2019
webpack.config.js sets up webpack and react properly May 3, 2019

Build Status

Initial setup

See Pixalive in action here: Video:

Pixalive is a free, multi-user, real-time editor for animated sprites and pixel art. To invite friends to collaborate with you, simply send them the URL to your sprite. All changes are automatically saved and sent to all collaborators.

Code highlights

Namespace-enabled socket IO server:
Drawing & multi-user undo, server-side:,
Flood-fill-based paint bucket tool:
Client-side root component w/ reducer and contexts:
Canvas render handling, mouse updates, outgoing event throttling:
Client-side diffing to prevent uncessary redraws:


Initial setup

After cloning, run npm install. You'll need a working postgres install-- and to create a db called pixalive.

Dev server

Run npm run start-dev and navigate to http://localhost:3000/. There is a seed script (npm run seed), but it isn't necessary to run it to be able to serve the application.

CI / Deployment

Travis is set up to build all feature branches on push as well as master on merge/push. Only the master branch is deployed. URL: To view the server log, do heroku logs --tail -a pixalive.

You can’t perform that action at this time.