Code Monkey home page Code Monkey logo

maple's Introduction

Massachusetts Platform for Legislative Engagement (MAPLE)

A legislative testimony project through Code for Boston!

We are creating a new web platform called MAPLE (the Massachusetts Platform for Legislative Engagement) that makes it easy for residents to submit their testimony to the MA legislature and read the testimony of others. Our goals are to shine a light on the statehouse by 1) providing a public archive of legislative testimony; 2) standardizing and demystifying the testimony process, so that more people can make their voices heard; and 3) creating a space for constituents and legislators to maintain prolonged focus on key issues, and to learn more efficiently about the laws that will shape our lives. Through this, we hope that people can better channel their political energy into productive improvements for our local and state communities.

Essentials

Join the Code for Boston Slack and our #maple-testimony channel. Ask to join the Zenhub project and to be added as a collaborator on Github, and provide your Github username.

Attend a weekly hack night at Code for Boston and join our group.

You can find good first issues here.

Check out the Contributing docs for how to contribute to the project, and the wiki for project documentation.

Links

Live Sites

  • Development site, for testing and development. Feel free to play with the site!
  • Production site, for public use and real testimony. Please only use this site to submit real testimony, not for testing.
  • Version 1 site, for posterity

Getting Started

  1. Fork a copy of the main repo to your GitHub account.

  2. Clone your fork:

git clone https://github.com/YOUR_GITHUB_NAME/maple.git
  1. Add the main repo to your remotes:
cd maple
git remote add upstream https://github.com/codeforboston/maple.git
git fetch upstream

Now, whenever new code is merged you can pull in changes to your local repository:

git checkout main
git pull upstream main
  1. Now you're ready to work on a feature! See the Contributing page for more info, and refer to the wiki for more documentation.

Developing Locally

  1. Make sure that you have node and yarn installed. You can download Node directly here or use a tool like nvm. To install yarn, run npm i -g yarn after installing node.
  2. Install dependencies with yarn install.
  3. If you are developing backend features involving firebase or typesense, install Docker and Docker Compose V2.
  4. Run a command and start developing:
  • yarn dev: Start the Next.js development server. Use this if you're working on frontend features. View the app in your browser at localhost:3000. Make some changes to components/ and pages/. The site will automatically update. Your local site will share the same backend as the live development site.
  • yarn storybook: Start the Storybook development server. Use this if you're working on UI components. View your storybook at localhost:6006. It will update as you make changes to the stories in stories/.
  • yarn dev:up: Run the full application locally using Docker Compose. Use this if you're working on full-stack or backend features in functions/. You can access the emulator UI at http://localhost:3010.
  • yarn dev:up:detach: Run the application, and keep it running once you stop this command.
  • yarn dev:down: Stop the application.
  • yarn dev:update: Update the application images. Run this whenever dependencies in package.json change.

Install the Redux DevTools and React DevTools browser extensions if you're developing frontend

Contributing Backend Features to Dev/Prod:

  • If you are developing backend features involving only Next.js API routes and need to deploy them to the Dev site, download Google application credentials for the dev project (you will need to be added as an editor of the project). Then, run export GOOGLE_APPLICATION_CREDENTIALS=path-to-credentials.json before running yarn dev. This is necessary to authenticate the Firebase Admin SDK. The same would apply to production.

Testing

MAPLE uses Jest for unit and integration testing, and Playwright for e2e testing.

To start running tests, use one of the following commands:

  • yarn test:integration [--watch] [-t testNamePattern] [my/feature.test.ts]: Run integration tests in components/ and tests/integration/. These tests run against the full local application -- start it with yarn up. You can use --watch to rerun your tests as you change them and filter by test name and file.
  • yarn test:e2e: Run e2e tests in tests/e2e with the Playwright UI
  • yarn test:e2e:headless: Run e2e tests in tests/e2e headless (no UI)

For more information on our end-to-end testing, go to our e2e test README. For an introduction on how to write e2e tests with Playwright, go to the Playwright docs. An example of an e2e test can be found in tests/e2e/homepage.spec.ts.

Code Formatting and Linting

We use Prettier and ESLint to check files for consistent formatting and catch common programming errors. When you send out a PR, these run as part of the Repo Checks workflow.

You can install pre-commit so that Prettier and ESLint run automatically when you commit. You can also run yarn fix locally to lint and format your code. You'll need to do one of these and commit the changes if the Linting and Formatting parts of the Code Quality check fails on your PR.

If you use VSCode, consider using our project workspace file (open it in VSCode and click the "Open Workspace" button in the editor). It will ask you to install ESLint and Prettier extensions, which will show lint errors in your editor and set up Prettier as the default code formatter. You can format the current file from the command pallete by typing Format Document. You can also set the editor up to format on save: select Open User Settings from the command pallet, search for format on save, and enable it.

Additional Documentation

See the Wiki

Contributors

Thanks to all our contributors!

0lafe
0lafe

๐Ÿ’ป
Alex Ball
Alex Ball

๐Ÿ’ป ๐Ÿ‘€ ๐Ÿง‘โ€๐Ÿซ
Anna Steele
Anna Steele

๐Ÿ’ผ ๐Ÿ“†
Anthony
Anthony

๐Ÿ’ป
Brian Rutledge
Brian Rutledge

๐Ÿ’ป
Byron Kent Hinebaugh
Byron Kent Hinebaugh

๐Ÿ’ป
Colin MacDonald
Colin MacDonald

๐Ÿ’ป
Colton Almaraz
Colton Almaraz

๐Ÿ’ป
Dev1nxavier
Dev1nxavier

๐Ÿ’ป
Gerlin
Gerlin

๐Ÿ’ป
Ikko Eltociear Ashimine
Ikko Eltociear Ashimine

๐Ÿ’ป
Jeff Korenstein
Jeff Korenstein

๐Ÿ’ป
KY233466
KY233466

๐Ÿ’ป
Kep Kaeppeler
Kep Kaeppeler

๐Ÿ’ป
Kittipong Deevee
Kittipong Deevee

๐Ÿ’ป
Leopoldo Lening Celaya
Leopoldo Lening Celaya

๐Ÿ’ป
Luke Rucker
Luke Rucker

๐Ÿ’ป
Marcos Banchik
Marcos Banchik

๐Ÿ’ป
Mark Trepanier-Cajigas
Mark Trepanier-Cajigas

๐Ÿ’ป
Matthew Zagaja
Matthew Zagaja

๐Ÿ’ป
Mike Yavorsky
Mike Yavorsky

๐ŸŽจ
Miles Baird
Miles Baird

๐Ÿ’ป
Minqi Chai
Minqi Chai

๐Ÿ““
Nathan Sanders
Nathan Sanders

๐Ÿ’ป ๐Ÿ’ผ ๐Ÿ”
Richard Kwon
Richard Kwon

๐Ÿ’ป
Riley Grant
Riley Grant

๐Ÿ’ป
RobertMrowiec
RobertMrowiec

๐Ÿ’ป ๐Ÿ‘€
Rodrigo Passos
Rodrigo Passos

๐Ÿ’ป ๐Ÿ‘€
Scott Solmonson
Scott Solmonson

๐Ÿ’ป
Stacey Ali
Stacey Ali

๐Ÿ’ป
Tim Blais
Tim Blais

๐Ÿ’ป
Tom Magnusson
Tom Magnusson

๐Ÿ’ป
Ujwal Kumar
Ujwal Kumar

๐Ÿ’ป
Veronica Adler
Veronica Adler

๐Ÿ’ป
arutfield
arutfield

๐Ÿ’ป
bancona
bancona

๐Ÿ’ป
d.ondrich
d.ondrich

๐Ÿ’ป
djtanner
djtanner

๐Ÿ’ป
jamesvas5307
jamesvas5307

๐ŸŽจ ๐Ÿง‘โ€๐Ÿซ ๐Ÿ““
jellyyams
jellyyams

๐Ÿ’ป
jkinzer85
jkinzer85

๐Ÿ““
mertbagt
mertbagt

๐Ÿ’ป
mmailloux22
mmailloux22

๐Ÿ’ป
mvictor55
mvictor55

๐Ÿ’ผ ๐Ÿ“† ๐Ÿ” ๐Ÿ’ป
ren0nie0
ren0nie0

๐Ÿ”ฌ
sammymyi
sammymyi

๐ŸŽจ ๐Ÿ““
sashamaryl
sashamaryl

๐Ÿ’ป ๐Ÿง‘โ€๐Ÿซ ๐Ÿ”ฌ

This table follows the All Contributors specification and is managed by the @all-contributors bot. You can add yourself or another contributor by commenting on an issue or a pull request.

maple's People

Contributors

0lafe avatar alexjball avatar bancona avatar d-ondrich avatar dev1nxavier avatar djtanner avatar hanboyu avatar jabadude avatar jellyyams avatar jkoren avatar keparoo avatar kiminkim724 avatar luke-rucker avatar marktrepanier avatar mephistic avatar mertbagt avatar mvictor55 avatar nesanders avatar nonstiky avatar oherma01 avatar rileyhgrant avatar robertmrowiec avatar saltair3 avatar sashamaryl avatar slam256 avatar ssolmonson avatar timblais avatar tommagnusson avatar veronicaadler avatar webrgp avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

maple's Issues

Generate flowcharts/procedures for data ingestion and transformation

This largely depends on what the of legislative data are that we decide we'd like to use, and what data each one provides to us. We'll also need to consider which parts of this flow are manual (curated) versus which we aim to automate.

This issue depends on the issues that are focused on schema design, so that we know what the final target of this process looks like.

Icon Changes

I was thinking that we could change the color of the icon. But maybe it'd be easier to add a little plus or minus next to the icon.

Create user personas for the map dashboard

User personas are an abstraction of the groups of people who we would expect to use a tool like this. I think it would be helpful to make concrete a list of these personas as a first design step to prioritize our features. Groups like admin (us), law students, student groups, community groups, informed citizens, etc โ€” and their expected needs and goals in using a tool like this. Thoughts?

Create graded color function for the districts

4 tiers

  1. Green: Legislator is on record "I will vote for this if it's introduced as a standalone bill"
  2. Light green: Legislator has been a substantial advocate for this bill in the past
  3. Lighter green: Legislator has advocated for this bill in the past
  4. Grey: Legislator has not advocated for this bill in the past

Move map to "Election Day Registration" page

Per our meeting on 2/2, there will be a map on each page in the "2021 Priorities" menu. The "Advocacy Maps" page is meant to be general-purpose info about the maps (@mvictor55 needs to clarify this), and maybe doesn't need to be in the nav, but rather linked from each page that has a map.

Make pop-up appear when 3rd party icon is clicked on

When 3rd party icon (ex. professor) is clicked on, a popup should appear with the information sourced from our "3rd party table". It will display: name; school (unless it's a non-profit); statement; any external link they indicate
3rd party pop up

Creating "Persuasive Letter" Pages

  1. Create three new pages, which will hold the letters we produced for each legislative priority. Each page will have one letter. Title these pages with the name of the legislative priority as shown in the menu under "2021 priorities". Populate the content of each page with the relevant letter in the attached document

  2. On each priority legislation page, under the persuasive content and above the map, the following should be inserted:
    "You can read our full letter on this issue, here". The "here" should be hyperlinked and direct to the relevant "persuasive letter" page as described above.

Priority Letters.docx

Website Restructure

Adjustments to the menu:

  1. Delete menu items: "Democracy in MA - Overview"; "Advocacy Maps"; "GGP Blog"
  2. The menu items under "2021 priorities" should be: Election Day Registration; Early/Mail Voting; Publicly Financed Campaigns.
  3. Add a 4th item under the 2021 priorites: "Other Legislative Endorsements"

In sum the menu should look like:
About GGP | 2021 Priorities | Contact Us
Election Day Registration
Early/Mail Voting
Publicly Financed Campaigns
Other Legislative Endorsements

Note - we should discuss the homepage layout

Give the Devs access

  • Make David, Peter, Riley, Byron, Scott, and Marcos contributors on the project.

Create GraphQl api

Create a graphql api file so the frontend can fetch data from the backend

GraphQL API for fetching data

Create a graphql api file so the frontend can fetch data from the backend
methods:
fetchCongressman()
fetchBills(year or congressional term)
- This should join congressman onto bills

Google sheet set up

Create 3 google sheets - one per priority. Each google sheet has two tabs - one for legislators and one for third parties.

Replicate the Map on the other 2 priority pages

Copy the map from the Election Day Registration (EDR) page to the other 2 priority pages. Note - the names of the other priority pages are changing. We will also need to replicate the google sheets structure from EDR for the other two priorities so we can set up the back-end. Once it's set up, I'll scrape and grade our legislators for the other two priorities

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.