Javascript Devs. No designers :(

Team Members

Launch Site

The Big Wall

A a virtual implementation of "the wall" so graffiti artists can draw on it.

V800 team 7c67ade2def6ea5efb250e6e0fa664d8 1479087314

Description

It is a virtual wall that spans USA Mexico border where people can draw graffiti on. Its purely for the purpose of fun! It represents a real wall. So everything is public.

Features

  • The map: Shows a map with markers for each current user. Click on the relevant marker to got that position of the border.
  • The toolbar: Tools representing various styles / sizes of ink.
  • The wall: A big canvas space horizontally expandable. Can draw on!
  • Persistance: Everything you or anyone draw is saved. So they survive page refreshes, also you can see them later unless someone else remove them or draw on them.
  • real time: What you draw is available to be seen by other users real time.

Limitations

  • It represents a real world wall. So no access control. What you draw is free to be drawn on or removed by someone else.

Instructions

  1. Wait a bit for the current graffiti to load and be drawn. Takes a few seconds when there are lots of them.
  2. Pick a drawing tool, click and drag on the wall
  3. To delete, pick eraser and click on a line path segment you want deleted. Small line segments are difficult to be deleted. (Hope to work on making delete easier)
  4. Pick the 'hand' tool. Click and drag to move along the wall. You get more canvas space this way!
  5. Alternatively, use left/right arrow keys to walk the wall.
  6. Share on FB twitter. The link shared will bring your friends to the exact location you shared it from. So they can see what you just drew for them!

View the screencast:
https://www.youtube.com/watch?v=JpvwYLIR8MA

Built With

node modules

  • firebase
  • paperjs
  • rc-color-picker
  • react
  • react-google-maps
  • react-share
  • create-react-app
  • express

Icons and images

APIs

  • Firebase
  • Google Maps API

Feedback / Ratings (12)

All Feedback