What and why

This message board tool was built in response to the outbreak of COVID-19 as a way to quickly connect people who need help with others in their community who are available. Needs and offers are submitted through a Google Form to a Google Sheet; replies to the posted needs and offers are sent to an email address. An administrator manages the workflow of approving submissions to be published and connecting email responders to the original posters.

The goal here was to get up and running as quickly as possible, maximizing the use of existing tools and frameworks. In future, we'd like to automate this process, if it becomes clear that the tool could be useful beyond this original problem and/or if manual management proves to be too arduous.

Details

This project was bootstrapped with Create React App and uses React Bootstrap for styling.

It is hosted with Firebase.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run deploy

Runs the build command and then deploys the app to Firebase. Note the CLI will need to be installed and the project initialized before deployment is possible.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Configuring the tool

A few config variables are set in src/config.json:

• formLink: the Google form where needs and offers will be submitted
• responseEmail: the email address where responses will go
• offerString: this will be determined by the form field for type of request
• requestString: this will be determined by the form field heading for type of request

In /src/api/index.js, two more settings:

• endpoint: hits a function in Firebase that returns the data from the sheet
• renameKeys: converts the sheets response keys into more readable keys

Learn More

Create React App documentation.