Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Design, remix, and share your street – all in your browser! Add bike paths, widen sidewalks or traffic lanes, learn how all of this can impact your community.
JavaScript CSS Shell
branch: master
Failed to load latest commit information.
app
assets
bin [fix #459] Parse MongoDB connection string properly.
config
doc/images Remove unused doc images and move these images from public/ to doc/
lib
public Remove clippaths from SVG icons to workaround an IE bug
test/integration
.gitignore Bump all deps to latest. Changes to API for config, sendgrid and vali…
.travis.yml
CNAME Add CNAME
CONTRIBUTING.md Remove e-mail from bug feedback. All bug reports should be filed thro…
Gruntfile.js
LICENSE.md
Procfile fix Procfile for Heroku
README.md
apiary.apib updating Apiary config file
app.js Refactor index.ejs into several split apart Jade template files. Adju…
index.js a simple smoke test using Protractor and Chromedriver #444
newrelic.js
package.json Bump npm engine per Heroku advice

README.md

Build Status Dependency Status Code Climate

Streetmix

Streetmix is a browser-based interactive tool that lets you design, remix, and share your neighborhood street. Add trees or bike paths, widen sidewalks or traffic lanes, and learn how your decisions can impact your community.

Streetmix is currently live at http://streetmix.net/

screenshot

About

What are street sections?

A "section" is shortened way of saying "cross-section view", a type of 2D non-perspectival drawing commonly used in engineering and architecture to show what something looks like when you take a slice of it and look at it head-on. Similarly, a street section is a cross section view of a street, showing the widths and placement of vehicle lanes, bike lanes, sidewalks, trees, street furniture or accessories (like benches or street lamps), as well as engineering information like how the road is sloped to facilitate drainage, or the locations of underground utilities. Although sections can be simplified line drawings, urban designers and landscape architects have created very colorful illustrative street sections, removing most of the engineering particulars to communicate how a street could be designed to feel safe, walkable or habitable.

example-sections

Why does Streetmix exist?

When city planners seek input from community meetings from the public on streetscape improvements, one common engagement activity is to create paper cut-outs depicting different street components (like bike lanes, sidewalks, trees, and so on) and allow attendees to reassemble them into their desired streetscape. Planners and city officials can then take this feedback to determine a course of action for future plans. By creating an web-based version of this activity, planners can reach a wider audience than they could at meetings alone, and allow community members to share and remix each other's creations.

The goal is to promote two-way communication between planners and the public, as well. Streetmix intends to communicate not just feedback to planners but also information and consequences of actions to the users that are creating streets. Kind of like SimCity did with its in-game advisors!

Streetmix can be used as a tool to promote and engage citizens around streetscape and placemaking issues, such as Complete Streets or the Project for Public Spaces' Rightsizing Streets Guide.

Why the name "Streetmix"?

"Streets" + "remix" :-)

How did this project start?

Streetmix was started as a Code for America hackathon project in January 2013, inspired by community meetings like the one described above, and a similar CfA project in 2012 called Blockee.

Development Setup

First-time setup

On Mac OS X 10

These installation instructions assume that you have already installed the Homebrew package manager.

1) Download and install Node.js.

brew install nodejs

2) Download, install and start MongoDB.

brew install mongodb

3) Download and install Coreutils.

brew install coreutils

4) Clone this remote repository to a folder on your computer.

git clone https://github.com/codeforamerica/streetmix.git

5) Install project dependencies.

cd streetmix
npm install

On Windows

Streetmix was not developed on a Windows platform, and testing is limited. We've been able to successfully stand up a local installation on 64-bit Windows 7-based Dell laptops for an event without Internet access. These instructions below will assume that the user has basic familiarity with Git, GitHub, and the Windows Terminal command line interface, and has administrative permissions to install software on the machine.

Installing core dependencies

You may skip each of these steps if a fairly recent stable version is already present on the system.

  • Install Git.
  • Install node.js. The site should detect your system and provide you with the correct installer, but you may specify the package at http://nodejs.org/download/ (e.g. Windows 64-bit installer).
  • Install MongoDB. Select the appropriate Windows installer package from their downloads page.
  • Install a modern browser. Streetmix has been tested in Chrome (preferred), Firefox, Safari, and Internet Explorer 11. (Previous versions of Internet Explorer will not work.)
Installing Streetmix

1) In the command line terminal, clone a copy of the Streetmix repository to your local machine:

git clone https://github.com/codeforamerica/streetmix.git

You may additionally specify the name of the directory to install to, if you wish.

2) Go into the project’s root directory and install all Node libraries.

cd streetmix
npm install

3) Set up the MongoDB environment. Follow the instructions under “Set up the MongoDB environment” from the MongoDB website.

On all systems

1) Setup environment variables. You can either set these in your .bash_profile (or equivalent, on Mac OSX or *nix-based systems) or place them in a file named .env in the project root directory (great for development environments or Windows environments).

Variable name Description Required?
SENDGRID_USERNAME Your SendGrid username Yes
SENDGRID_PASSWORD Your SendGrid password Yes
TWITTER_OAUTH_CONSUMER_KEY Development Twitter OAuth consumer key, obtained from @streetmix Twitter account Yes
TWITTER_OAUTH_CONSUMER_SECRET Development Twitter OAuth consumer secret, obtained from @streetmix Twitter account Yes
EMAIL_FEEDBACK_RECIPIENT Your e-mail address No
NO_INTERNET_MODE Boolean. Set to true to run a local "demo" without external Internet access No

A sample .env file will look like this:

SENDGRID_USERNAME=username@domain.com
SENDGRID_PASSWORD=p@$$w0rD
TWITTER_OAUTH_CONSUMER_KEY=twitteroauthconsumerkey
TWITTER_OAUTH_CONSUMER_SECRET=twitteroauthsecrettoken
EMAIL_FEEDBACK_RECIPIENT=test@domain.com
NO_INTERNET_MODE=true

Note: If NO_INTERNET_MODE is true, you do not need the Sendgrid or Twitter authentication keys, as those will be disabled due to lack of Internet.

HOWTO: Start the application

1) Start MongoDB.

mongod

2) Start the web server.

cd streetmix
npm start

3) Load the application in your web browser.

open http://127.0.0.1:8000

HOWTO: Run browser integration tests

1) Install test dependencies (only required once)

grunt test:local:setup

2) Run browser tests locally

grunt test:local

Contributing

See CONTRIBUTING.md.

Submitting an Issue

We use the GitHub issue tracker to track bugs and features. Before submitting a bug report or feature request, check to make sure it hasn't already been submitted. You can indicate support for an existing issue by voting it up. When submitting a bug report, please include any details that may be necessary to reproduce thebug, including your node version, npm version, and operating system.

Submitting a Pull Request

  1. Fork the project.
  2. Create a topic branch.
  3. Implement your feature or bug fix.
  4. Commit and push your changes.
  5. Submit a pull request.

Credits

The team is comprised of 2013 Code for America fellows.

You can contact the team at streetmix@codeforamerica.org.

Also, this project was made possible by the support of Code for America staff and other 2013 fellows, as well as our network of urbanists, design and planning professionals, and testers, who have provided us countless amounts of time and feedback towards this development.

Copyright

Copyright (c) 2013 Code for America. See LICENSE for details.

Something went wrong with that request. Please try again.