Mutual Aid NYC Services Lists

A Next.js website for displaying and creating NYC health, human and social services lists in the Open Referral data format. Data is stored in Airtable and managed by the Mutual Aid NYC research team.

Technical Overview

As of our most recent design, the major components of the project are as follows:

• Frontend
  • Uses Next.js and houses most of the logic for fetching and displaying list data from the database.
• Backend
  • Uses Next.js's API routes to wrap (to hide API keys from request headers) and cache Airtable API calls.
• Database
  • An Airtable that existed before the start of this project and that is mainly updated manually by the the Mutual Aid NYC research team.

Tech Stack

• TypeScript
• Chakra UI
• React Google Maps API
• Airtable.js
• Axios
• React Query
• React Hook Form
• Yup

Requirements

• Node.js (max version: 16.20.0) - Downloads are under "Releases" for each Node version. The installers for Windows have the .msi file extension, .pkg for macOS.
  • This Node.js version cap is because the project's version of Next.js (11.1.4), doesn't support above the specified version.
  • To install and easily switch between versions of Node when running locally, install nvm (Node Version Manager).
  • Alternatively, the NODE_OPTIONS environment variable can be set before running locally with Node v17+: NODE_OPTIONS=--openssl-legacy-provider npm run dev
• Yarn 1

Running Locally

• Copy this repo: git clone https://github.com/MutualAidNYC/services-lists.git
• Install the Yarn package manager (version 1): npm install --global yarn
• Install dependencies: yarn install
• Copy the sample.env file: cp sample.env .env.local
• Add your Airtable API key and the id of the Airtable base containing your data to the .env.local file.
• Start a development server: yarn dev
• View the site locally at http://localhost:3000/

Running with Docker

• Copy the sample.env file: cp sample.env .env.local
• Add your Airtable API key and the id of the Airtable base containing your data to the .env.local file.
• Build docker image from main directory: docker build -t services-lists-docker .
• Run created image: docker run -p 3000:3000 services-lists-docker

Testing

Jest is used to run unit tests.

• To run unit tests, run yarn test.
• The project's test configuration is specified in the jest.config.js file.

• Testing Tech Stack

  • ts-jest
  • React Hooks Testing Library
  • Mock Service Worker

Type Checking

TypeScript's tsc CLI command is used to compile the code and check for any type errors.

• To run a type check, run yarn typecheck.
• The project's TypeScript configuration is specified in the tsconfig.json file.

Linting

ESLint is used to automatically check this project's code for programattic errors (AKA linting).

• To run the linter, run yarn lint - this will check all files in the project except those specified in the .eslintignore file.
• The linter's configuration is specified in the .eslintrc.json file.

Code Formatting

Prettier is used to automatically format this project's code according to Prettier's style guide so it will stay consistently formatted across developers.

• To run the formatter, run yarn format - this will format all the files in the project except those specified in the .prettierignore file.
• The formatter's configuration is specified in the .prettierrc.json file.