Skip to content

PWA for a shared address book via the Google Sheets API

Notifications You must be signed in to change notification settings

chawes13/village-people

This branch is 1 commit ahead of main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

cc238cf · Dec 22, 2022

History

56 Commits
Apr 6, 2020
May 9, 2020
Apr 6, 2020
Apr 25, 2020
Jun 26, 2021
Apr 6, 2020
May 9, 2020
Jun 26, 2021
Apr 6, 2020
Apr 6, 2020
Apr 6, 2020
Apr 8, 2020
Apr 6, 2020
Apr 8, 2020
Apr 6, 2020
Apr 6, 2020
Apr 6, 2020
Apr 6, 2020
Apr 6, 2020
Apr 25, 2020
May 4, 2020
May 4, 2020
Apr 6, 2020
Apr 6, 2020
Dec 22, 2022
Dec 22, 2022

Repository files navigation

Village People

This application creates a searchable, sortable, and filterable shared address book using the Google Sheets API. It was built for Misericordia's Village management staff, but can easily be forked, extended, and/or modified to meet the needs of any organization.

Contents

Quickstart

$ git clone git@github.com:chawes13/village-people.git
$ cd village-people
$ touch config/application.yml # see Getting Started
$ yarn start-dev

Prerequisites

The following programs are required in order to run this application:

  • Node: ^10.13.0
    • Download/upgrade using nvm
  • Yarn: ^1.0.0

Getting Started

Google Sheets

  1. Create a new Google Sheets spreadsheet
    1. Add column headers in Row 1 of Sheet 1 and corresponding values
    2. Add a single column header and values in Column 1 of Sheet 2
      • Note: the header for this column must correspond to a header in Sheet 1
  2. Create a new Google APIs project
  3. Select this project and navigate to the Credentials tab
  4. Create a Service Account
  5. Create a key (credentials.json) for this account
  6. Provide admin access for this service account email to the spreadsheet created in Step 1

React Application

  1. Clone this repo into a separate directory
  2. Create an application.yml file in ./config
  3. Enter the following secrets based on the credentials.json file and spreadsheet created above
    GCLOUD_PROJECT: <project_id>
    GCLOUD_PRIVATE_KEY: <private_key>
    GCLOUD_CLIENT_EMAIL: <client_email>
    SPREADSHEET_ID: <spreadsheet-id (from url)>
    SHEET_NAME: <primary-sheet-name>
    FILTER_SHEET_NAME: <secondary-sheet-name>
  4. Run yarn start-dev and navigate to http://localhost:8080

Scripts

These scripts are available to be executed via the command line:

  • yarn setup: downloads all necessary node modules, clears the git history, and sets the name of your project.
  • yarn start-dev: compiles the site in development mode at a localhost URL. The site will reload when any changes are made.
  • yarn lint: lints the project code with eslint. This script will be run automatically on every commit.
  • yarn test: runs unit tests with Jest and integration tests with Cypress. Tests can also be run individually using:
    • yarn test:unit
    • yarn test:integration
  • yarn build: compiles the site in production mode to the /build folder.
  • yarn server: serves the contents of the /build folder using the production server.
  • yarn analyze-bundle: (advanced) creates a view for inspecting bundle sizes for performance optimizations.

Environment variables

Environment variables will be pulled from config/application.yml via figaro-js and injected into the code as process.env. You can use the initializer file config/figaro.js to customize which variables are required or hidden from the public build. This public process.env is available on the window and will reload on page refresh.

Note: process.env.NODE_ENV is automatically set via the webpack mode and cannot be overridden. In order to add environment-specific behavior that deviates from this default, you can create a custom variable (e.g. SENTRY_ENV).