Jamstack Conferencing built on GatsbyJS, NetlifyCMS, and Firebase

This is a GatsbyJS theme to try and test the limits of online conferencing using JAMStack technologies. A version of it has been tested in production with 500 conference participants and worked well. The application itself is built with GatsbyJS, content managed via NetlifyCMS, and user auth/interaction is built on Firebase.

This theme features a lobby, the ability to livestream, go to breakout Jitsi-based groups, chat while on the site, as well as a few other odds and ends useful for anyone hosting an online conference. You will need a github account, firebase account, and static file hosting. I recommend Netlify.com for hosting, but any server that can serve static files will do.

Getting Started

The easiest way to get started is by deploying our starter to Netlify or Gatsby Cloud. Be sure to setup the correct environment variables to deploy a successful build.

Seting up Your Environment

Setup the following enviornment variables either in a .env.development file on your local dev box or through your hosting provider.

GATSBY_SITE_NAME=Jampile

NETLIFY_SITE_URL=https://localhost:8000
NETLIFY_DISPLAY_URL=https://localhost:8000
NETLIFY_BACKEND_NAME=github
NETLIFY_BACKEND_REPO=username/repo
NETLIFY_BACKEND_BRANCH=master

FIREBASE_API_KEY=
FIREBASE_AUTH_DOMAIN=
FIREBASE_DATABASE_URL=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_APP_ID=
FIREBASE_MEASUREMENT_ID=

Firebase Configuration

This theme needs some basic Firebase setup in order to work correctly. You will need to create a Google Firebase account and then enable authentication choices of your liking. You will also need to create an index on the messages table in your Firestore Database.

Messages index to create:

event_id Ascending created_at Ascending

Theme Configuration

Add the package to your Gatsby site:

yarn add @jampile/gatsby-theme-conference

Simply add @jampile/gatsby-theme-conference to your plugins under gastby-config.js. Your content will live under the ./content directory in your main repository. When new features get implemented in the the theme, they will automatically be fetched when you upgrade packages or during the build process.

plugins: [
  {
    resolve: `@jampile/gatsby-theme-conference`,
  }
],

Theme Shadowing

GatsbyJS supports Theme Shadowing, allowing you to customize any part of another theme. View the shadowing docs to see how to do this. For example, you might want add information to the footer area of this theme. Copy the Footer component to ./src/gatsby-theme-conference/components/Site/footer.tsx and customize to your liking.

Changelog

See CHANGELOG.md

Contributing

See CONTRIBUTING.md