fishbowl-game.com

Play the Fishbowl game online! Also known as Salad bowl, The Hat Game, The Bucket Game, Monikers, or Celebrities...

It's a free, virtual version of a fun (and mostly hilarious) guessing game, designed for any group of all ages! You'll need at least 4 to play, but it only gets more fun with more players. Hop on a video call, and play through rounds of Taboo, Charades, and Password.

Technology

Fishbowl is built with Material UI, Typescript, React, Apollo GraphQL, Hasura, and Postgres.

CI/CD via Github Actions. Hosted on Render.

Localization via i18next, powered by our friends at locize.

Roadmap

Public Trello

Local Development

Installing

1. Clone the repo:

   git clone git@github.com:avimoondra/fishbowl.git

2. Install Homebrew, and:

   brew bundle

3. Install Node.js via Node Version Manager:

   nvm install

4. Install Docker

   Download and install Docker via Docker for Mac. Further documentation can be found here.

5. Install Hasura CLI

   Hasura is a GraphQL server that gives you instant, realtime GraphQL APIs over Postgres, with webhook triggers on database events, and remote schemas for business logic.

   curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash

   See more detailed instructions here

Running w/Docker

The local environment is configured with Docker Compose.

Running the application with:

docker-compose up

will build and start these services which are all accessible on the host:

service	description	host connection
fishbowl-app	React front-end	localhost:3000
fishbowl-graphql-engine	Hasura GraphQL Engine	localhost:8080
fishbowl-actions-server	Hasura actions server	localhost:3001
fishbowl-postgres	Postgres database	localhost:5432

Migrations

Open Hasura console on localhost:9695 to track migrations:

cd graphql-server
hasura console --admin-secret=myadminsecretkey

Migrations and metadata will automatically apply on start up. But to revert or apply migrations manually,

cd graphql-server
hasura migrate apply --admin-secret=myadminsecretkey
hasura metadata apply --admin-secret=myadminsecretkey

GraphQL Code Generation

Repeatedly generate GraphQL Apollo React hooks and TypeScript operations:

cd app
yarn gql-gen --watch

docker-compose exec actions-server yarn gql-gen --watch

npm Dependencies

The fishbowl-app and fishbowl-actions-server Node.js Docker images have a separate copy of npm packages which are not kept in sync with your host's node_modules.

You can add or update packages inside of the containers:

docker-compose exec [fishbowl-app|fishbowl-actions-server] yarn [add|remove|etc.] xyz-package

Once the lockfile has been updated, you'll likely want to reinstall dependencies on your host to facilitate IDE autocompletion:

cd [actions-server|app]
yarn install --frozen-lockfile

FAQ

Update allowed queries/mutations on prod?

There's a gql operations white list on production. Any operation that's not in this list is disallowed (on prod only). If merging a PR that updates any *.graphql file, the order of operations is...

1. Before merging code, set HASURA_GRAPHQL_ENABLE_ALLOWLIST to false, in Render
2. Deploy the code + update the query/mutation(s) from the new code in the production gql operations white list.
3. After the FE is deployed w/the new code + white list updated, set HASURA_GRAPHQL_ENABLE_ALLOWLIST back to true, in Render.

Reset my local DB?

Stop your docker containers, then:

docker-compose down --volumes

Connect to my local DB w/psql?

Install psql or Postico, or your favorite postgres client.

psql postgres://postgres:password@localhost:5432/postgres

You can also find a SQL runner in Hasura itself, here.

Localization

Translation management is powered by our friends at locize.

Development

English fallback strings, inlined throughout the code represent the source of truth. When configured with a locize API key, new keys and updated default values will by synchronized to locize during local development.

Production

Non-English language resources are served via a cached (1 day) production version on locize's CDN.

Given the inlined fallback strings, it is unnecessary to load external English resources; an empty in-memory en language is provided to i18next via partialBundledLanguages.

Contribute w/code

Open a new pull request or issue! Be sure to check out the Public Trello which defines a loose roadmap, and has many features, bugs, or chores already logged!

Suggest a change or report a bug

If you don't know if a bug is actually an issue or just want to suggest a feature - just create an issue!

Make a change or fix a bug

If you're already ready to contribute...

1. Fork this repo
2. Create a branch w/your changes
3. Create a pull request by comparing branches across forks
4. Start a discussion from there!

Contact

If you're not sure about either or want to hack on Fishbowl on a recurring basis, feel free to contact me at avimoondra@gmail.com or join our Slack group.

Support w/$