A webapp to coordinate aid and care in the Twin Cities. https://twin-cities-mutual-aid.org/
This project is only a few weeks old, and things are changing very rapidly. We'll do our best to keep this readme up-to-date, but if something doesn't look right, it's probably out of date.
This project is unusual because there are two separate teams working in tandem:
- Website team: This team (us) is using a channel within the Open Twin Cities slack to communicate. There's a link at the top of the Open Twin Cities website to join, if you'd like to help out.
- Twin Cities Mutual Aid Project: TCMAP is a collective, all-volunteeer effort that works to coordinate with aid sites and manage the data that feeds the site on a day-to-day basis. Over 100 volunteers have now been involved in the project. Leadership and tech-oriented volunteers from TCMAP coordinate with stakeholders to source designs, product direction, feature requests and feedback that drive development. TCMAP spawned from a large Facebook group called South Minneapolis Mutual Aid Autonomous Zone Coordination that emerged in the wake of the uprisings in Minneapolis in May 2020.
Participation is welcome both on the web team and TCMAP sides of this project. Some developers have engaged through Github and the Open Twin Cities Slack channel alone; others have joined TCMAP to help coordinate efforts, or just to better understand use cases. You can join TCMAP through the volunteer page on their website.
We're using Github Issues to manage tasks, and have a kanban board set up. If you'd like access to the kanban board reach out in the OTC slack channel.
If you've got a feature request or feedback to share on the website, feel free to submit an issue on GH issues, or bring it up in slack.
Data is sourced from a google spreadsheet.
- Example spreadsheet
- Google Apps Script utility script also available to automatically update a row timestamp and insert latitude and longitude when an address cell is added or updated: https://github.com/mc-funk/community-map-google-scripts/
To test locally with your own copy of the spreadsheet, duplicate the example spreadsheet, make your changes, and re-publish it. Then follow the steps https://www.freecodecamp.org/news/cjn-google-sheets-as-json-endpoint to extract the sheet ID out of the url to plug into the DATA_URL const.
const DATA_URL = 'https://spreadsheets.google.com/feeds/list/1XJhbzcT_AubgnqAJRsbOEbMO3HPTybG3yNcX6i-BgH0/1/public/full?alt=json'
- Information about adding, editing and maintaining languages can be found in Language Translation
This started as a very lightweight, single page html file, and we've tried very hard to keep things as simple as possible.
- Install node at the version specified in the
.node-version
file. If you use a version manager like nodenv or nvm, this should be detected automatically. - Install dependencies with npm
npm install
- Configure environment variables
- Build and run the application with npm
npm run dev
- Visit the application in your browser at http://localhost:8080
- Start building!
The application uses environmental variables to manage configuration between environments. These values are set in a .env
file in the project root directory.
To set up a .env
, copy the .env.example
file, which lists needed configuration values. For example, in the Mac OS terminal:
cp .env.example .env
A set variable in the .env
file will look like this:
SNOWPACK_PUBLIC_MAPBOXGL_ACCESS_TOKEN=1234
If you're a member of the Twin Cities Mutual Aid organization you can find the default values for the local development env
file here:
https://github.com/Twin-Cities-Mutual-Aid/secrets/blob/master/.env
If not, you can ask for the most recent values of the configuration values from the Open Twin Cities slack #tc-aid-dev
channel.
If you need to introduce a new environmental variable, please coordinate with developers in the #tc-aid-dev
channel, add it to the .env.example
file, and note it in your pull request.
To run a development server that will auto-reload on save, run this command from the project directory:
npm run dev
A server will run on http://localhost:8080
- Add your dependency with
npm install --save <dep>
- Use your dependency with
import <whatever> from '<dep>'
- Run
npm run snowpack install
to vendor the dependency
- Import the sheet from the dist folder like
import '<dep>/dist/stylesheet.css
- That's it.
- Create a stylesheet in
src/styles
- Import the sheet either in the index or from whatever js file the styles apply to.
Images go in public/images
and will be served under <url>/images/image_name.whatever
If you need to add some other kind of static file, it should go somewhere in the public folder.
Contributors to the project are expected to follow the Code of Conduct.