/online-meeting-list

Timezone-agnostic meeting finder for online-only meetings

Primary LanguageTypeScriptMIT LicenseMIT

This is a meeting finder designed to list online recovery meetings around the world. You can see it in production at the Online Intergroup of AA and elsewhere on the web. There is also a demo version.

Managing Data

⚠️ As of version 1.0.0, data must be provided in Meeting Guide-formatted JSON. Here are some options:

  • Central 👈 this is what OIAA is using
  • 12 Step Meeting List WordPress plugin
  • Sheets (please note the old OIAA Google Sheets format is no longer supported)
  • Custom solution

Install and run locally

  1. Clone this repository.

  2. In the project directory, add a file called .env and add this line with your data feed URL:

    REACT_APP_JSON_URL="https://your-website.org/meetings.json"

  3. Open your terminal and run npm i && npm run dev to start the app in development mode.

Deploy to your Website

⚠️ If you want to deploy to a subfolder, add this line to your .env file:

REACT_APP_BASE_URL="/meetings"
  1. In your terminal run npm i && npm run build.
  2. Copy the /build/static folder to your website.
  3. Add the following HTML to your web page (replace chunk below with the correct file name):
<script defer src="/static/js/main.chunk.js"></script>
<div id="root"></div>

Your webserver needs to point inside pages to your main page. If you are using WordPress, create a page at /meetings and then add the following to your theme's functions.php, then re-save Settings > Permalinks:

add_action('init', function () {
    add_rewrite_rule('^meetings/(.*)?', 'index.php?pagename=meetings', 'top');
});

Sorting

By default, meetings are sorted by time then name. You can override and make it time then random by adding this to your .env file:

REACT_APP_SORT_BY="random"

Dark mode

By default, the app renders in light or dark mode depending on the user's browser preferences. This setting can be overridden with light or dark:

REACT_APP_COLOR_MODE="light";

Note: local storage may need to be cleared for changes to appear.

Contributing

  1. Create an issue that describes the problem you are solving. Screenshots are helpful.
  2. Create a branch with your code. (Style note: please use Prettier, and keep properties in alphabetical order)
  3. Be sure your branch is current. Use git pull origin && git merge main && npm i
  4. Create a pull request that references the issue. Please name @joshreisner as a reviewer.

Technical Overview

This project is written in TypeScript and was bootstrapped with Create React App. UI elements by Chakra. It uses Luxon for time conversions and React Infinite Scroller for rendering performance.