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
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
-
Clone this repository.
-
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"
-
Open your terminal and run
npm i && npm run dev
to start the app in development mode.
Deploy to your Website
REACT_APP_BASE_URL="/meetings"
- In your terminal run
npm i && npm run build
. - Copy the
/build/static
folder to your website. - 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
- 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)
- Be sure your branch is current. Use
git pull origin && git merge main && npm i
- 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.