This is a meeting finder designed to list online recovery meetings across a variety of timezones. You can see it in production at the Online Intergroup of AA and elsewhere on the web. There is a demo version at https://online-meeting-list.netlify.app.
- Search working
- Tags working
- Timezone picker working
- Mobile view for filter
- Highlight search results and active tags
- Bookmarkable search / tag state
- No results screen
- Clear search button
- Fail gracefully when encountering bad data
The data for the demo in managed in this Google Sheet. Some notes:
- It's helpful to use the
Format > Clear Formatting
command, since styling doesn't carry over to the app. - It's a good practice to remove the meeting times and phone numbers from the Notes column, this prevents the inevitable scenario where it gets updated in one place but not another
- The Timezone column is necessary because time zones don't stay in sync due to daylight savings. Best to store them in their local time and allow the app to translate them for the user on the fly.
- Use soft returns (control-return on a Mac) to separate times in the Times column and indicate paragraph breaks in the Notes column
- In cases where the format or types vary between times of the same meeting, that can either be mentioned in the Notes column, or separate entries could be created. For example, if the Friday night ocurrence of a weekly meeting is Women-only, then it's probably best to create a new row for just that Friday meeting.
This project is written in TypeScript and was bootstrapped with Create React App. UI elements by Chakra. Uses Moment.js for time conversions and React Infinite Scroller for rendering performance.
- Get an API Key from the Google Developers Console with the Sheets API enabled
- Make a copy of this Google Sheet
- Open your spreadsheet and set the visibility to "anyone with the link can view"
- Add environment variables. One option is to create a file called
.env
in your root folder, and add your spreadsheet's URL (when you're in edit mode, not the URL displayed when you publish it to the web):
REACT_APP_GOOGLE_SHEET="https://docs.google.com/spreadsheets/d/1wER2LP3dT_6_LEQ8fSY1rv2bGzIZ2aaMBi_0Bt1aN3I/edit#gid=0"
REACT_APP_GOOGLE_API_KEY="9sfjoKsfJukwDZhWs48fhs4fioRsRerEhf8ghs9"
Or, if you are using a service like Netlify, you can skip that step and add these variables directly to your build settings.
If you would prefer to use a custom JSON feed rather than a Google Sheet, you can use the parameter:
REACT_APP_JSON_URL="https://your-website.org/meetings.json"
JSON should be in the format:
[
{
"name": "Saturday Night Speaker Meeting",
"times": "Saturday 7:00 PM",
"timezone": "America/Los_Angeles",
"url": "https://zoom.us/j/1234567890",
"phone": "",
"access_code": "",
"email": "groupemail@gmail.com",
"types": "Open, English",
"formats": "Video",
"notes": "Weekly meeting at 7pm Pacific. Meeting ID: 123 456 7890\nPassword: 255804"
}
]
- Clone this repository.
- In the project directory, run
yarn
once to install the dependencies. - Run
yarn start
to start the app in development mode.
- In the project directory, run
yarn build
.
- In the project directory, run
git pull
. - Re-run
yarn
in case dependencies were updated.
- Create an issue that describes the problem you are solving. Screenshots are helpful.
- Create a branch with your code. (Style note: please use Prettier, and keep properties in alphabetical order)
- Create a pull request that references the issue. Please name @joshreisner as a reviewer.
The demo is hosted on Netlify. Commits to the main
branch are automatically built and deployed.