Massachusetts Platform for Legislative Engagement (MAPLE)

A legislative testimony project through Code for Boston!

Links:

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/advocacy-maps.git
  1. Add the main repo to your remotes:
cd advocacy-maps
git remote add upstream https://github.com/codeforboston/advocacy-maps.git
git fetch upstream

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

git checkout master
git pull upstream master
  1. To contribute a feature, open a feature branch off master:
git checkout master
git checkout -b MY_FEATURE
git push -u origin MY_FEATURE

Use git push to upload your commits to your fork. When you're finished, open a pull request to merge your branch into codeforboston/master.

If other PR's are merged while yours is in review, your changes may start to conflict with master. This will be displayed on the PR. You'll need to resolve merge conflicts before you can merge your PR:

# Update your local master branch
git checkout master
git pull upstream master

# Merge master into your feature branch
git checkout MY_FEATURE
git merge master

This will print out a message about a conflict. Resolve them (recommend using VSCode or command line rather than the Github web interface), stage the files, commit the changes, and finally push your changes to your feature branch.

Contributing

See issues organized on our project board. Check out the "Good First Issues" tab if you're new. Once you choose an issue, assign it to yourself or leave a comment saying you're working on it.

When you send out a PR that addresses an issue, link the PR to the issue either by adding "closes #123" to the description or manually adding it under the Development section on the sidebar. This will automatically close the issue when the PR is merged and help keep issues organized.

Once all checks pass on the PR and it is approved, you can merge it!

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, install Docker and Docker Compose V2.

If you're developing frontend-only features, such as adding UI or hooks, you can start the development server with yarn dev and access the app at http://localhost:3000 in your browser. The site will automatically update as you make code changes. Your local site will share the same backend as the live development site.

If you're developing backend features, such as adding cloud functions or changing security rules, you can run the backend emulators, search server, and test data with yarn dev:backend. You can access the emulator UI at http://localhost:3010. The backend should update as you make code changes.

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

Development FAQ

How do I create a new page?

Take a look at the pages/bills.tsx page:

export default createPage({
  title: "Browse",
  Page: () => {
    return (
      <Container>
        <h1>Browse</h1>
        ...
      </Container>
    )
  }
})

Your page content goes in Page, and will be wrapped in a layout component. The page is rendered by _app.tsx.