Branch: master
Clone or download
sayansaha1143 and Khoawala Share saved resources URL (#191)
* Share Icon

* Fixed header bug to refresh to admin page

* Share button css changes

* Share functionality 1.0

* Search functionality 1.1
Latest commit 6593090 Feb 15, 2019

Community Connect

"Community Connect" is a health resource web application that aims to consolidate information about businesses and organization available in communities that promote healthy lifestyle choices. A health resource is defined as services or materials that improve the quality of life of others, ranging from affordable child care, substance abuse counseling, domestic violence support, and more. We are working in conjunction with Massachusetts General Hospital's Center for Community Health Improvement, MGH Revere HealthCare Center, and Revere CARES Coalition to create an extensive database in our pilot region of Revere, Charlestown, and Boston.

To suggest businesses and/or organizations in the area that are not presently listed, please visit:

  1. Stage 1 - Simple Name Search, Category Filter, Semi-clickable List, Map with Pins.
  2. Stage 2 - Fuzzy search, Mobile Compatibility, organized card with all relevant information about selected resource on Map, overlaying public transportation and other information to increase accessibility, import and maintain up-to-date information about resources.
  3. Stage 3 - Login form for Social Workers including "To-Do List" Feature, Expand Resources to Chelsea, Charlestown, and Boston.

How this works

Resources are stored in a google spreadsheet (New).

The spreadsheet automatically publishes its contents to a json endpoint that this app consumes. Members of the community can add unvetted resources to the spreadsheet via a google form. Trusted members with access to the spreadsheet will vet submitted resources & mark them as vetted. The app will only display vetted resources.

Note that this project was bootstrapped with Create React App. Create React App gives us lots of functionality not documented in this readme.

New Developer Setup Instructions

  1. clone the repo
  2. install npm (it may be installed already)
  3. install dependencies npm install
  4. start server npm start

Where to start

Our open issues are listed on the project's Issues tab. The best places to start are unassigned issues with the label "good first issue". Those with "bug" and "help wanted" are great too, but may require more experience. Avoid issues labeled "epic" until you're more familiar with the project.

A great first issue to look into doing is the React warnings that can be found in the developer console. To solve a React warning there is no need to create a issue. Just make an announcement in Slack that you are going to work on which ever specific warnings. Then put together a pull request with the code changes.

Beginner resources

Connect with the team

Join our Code for Boston slack channel: #community-connect or look for us at the CfB Tuesday meet-ups.

Want your own spreadsheet?

Prefer to see a gif of this process instead of reading steps? Click here

  1. Visit the current spreadsheet
  2. Click File and select Make a Copy
  3. Click OK
  4. When viewing your copy, click SHARE in the upper-right hand corner.
  5. Click "Get shareable link" in the upper-right hand corner of the modal.
  6. Ensure that "Anyone with the link can view" is selected.
  7. Copy link
  8. Click done
  9. Click File and select "Publish to the web"
  10. Click Publish
  11. Open "src/App.js" in the codebase
  12. Replace "revere_key" with a portion of the URL in your clipboard


Replace the "revere_key" value with "1FRd8Jw7y4CnnHCKIvkM-pjNjRVFHFHuobVU-ajXre6M"

Start your server using npm start

Why would I want my own spreadsheet?

  1. Some features may require you to modify the data to validate your code.
  2. The production spreadsheet should not be modified for testing purposes.

Editor setup

Syntax highlighting To configure the syntax highlighting in your favorite text editor, head to the relevant Babel documentation page and follow the instructions. Some of the most popular editors are covered.

Ignore generated files Your editor will search all the files in the project - including large generated ones & dependencies unless you tell it not to. Look into how your editor can ignore node_modules/* and build/*


The original architectural design for this app was designed proven out by Bob Breznak for an organization assisting with the refugee crisis in Greece in 2016, Prosper. They needed help consolidating, vetting and displaying resources on the web. In May 2018 he re-wrote the frontend in react.js to create an app that assists homeless people Seeking Shelter and resources. In August 2018 Code for Boston’s Community Connect project had similar aims and the repo was moved into their org.