Connect PWA
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Go to file
Cameron Clough 99151453c3
fix(qr-scanner): fix for M1/M2 macs
1 week ago
.github/workflows ci: fix docker tag and build on push 1 week ago
public plausible analytics 1 month ago
src cleanup: remove unnecessary styles 1 week ago
.dockerignore build docker container (#135) 2 years ago
.editorconfig Initial repository configuration with shared worker builds 5 years ago
.env.development add env flags for using local pipeline outputs (#239) 7 months ago
.env.production disable service worker (#325) 4 months ago
.eslintignore Use standalone eslint with airbnb presets (#51) 4 years ago
.eslintrc.js linting fixes (#309) 5 months ago
.gitignore ignore IDEs 4 months ago
Dockerfile build: disable sourcemaps in production 1 week ago
LICENSE add license 4 years ago use global state (#155) 1 year ago
config.js.template Get cabana and useradmin urls from config (#141) 2 years ago
craco.config.js remove workbox plugin (#326) 4 months ago fix test 2 years ago
jest-puppeteer.config.js Fix build process (#93) 2 years ago
lighthouserc.js show snackbar on update ready (#316) 5 months ago
motd motd for old connect app (#148) 2 years ago
nginx.conf fix NGINX config for static files (#332) 4 months ago
package.json fix(qr-scanner): fix for M1/M2 macs 1 week ago rename sentry project (#267) 6 months ago
yarn.lock fix(qr-scanner): fix for M1/M2 macs 1 week ago

comma connect

The frontend to the comma connect progressive web app. This a react app using Create React App


Libraries Used

There's a ton of them, but these are worth mentioning because they sort of affect everything.

  • React - Object oriented components with basic lifecycle callbacks rendered by state and prop changes.
  • Redux - Sane formal global scope. This is not a replacement for component state, which is the best way to store local component level variables and trigger re-renders. Redux state is for global state that many unrelated components care about. No free-form editing, only specific pre-defined actions. Redux DevTools can be very helpful.
  • @material-ui - Lots of fully featured highly customizable components for building the UIs with. Theming system with global and per-component overrides of any CSS values.
  • react-router-redux - the newer one, 5.x.... Mindlessly simple routing with convenient global access due to redux

How things works

The current playback is tracked not by storing the current offset, but instead storing the local time that the player began, the offset it began at, and the playback rate. Any time any of these values change, it rebases them all back to the current time. It means that at any arbitrary moment you can calculate the current offset with...

( - state.startTime) * state.playSpeed + state.offset

With this central authority on current offset time, it becomes much easier to have each data source keep themselves in sync instead of trying to manage synchronizing all of them.


yarn start


  • Use best practices
  • Write test cases
  • Keep files small and clean
  • Use branches / pull requests to isolate work. Don't do work that can't be merged quickly, find ways to break it up