Repository files navigation

This is the source code forSet with Friends, anonline, multiplayer implementation of the real-time card gameSet. Your goal is to findtriplets of cards that follow a certain pattern as quickly as possible.

• Web version
• Official Discord

This app was built on a serverless stack primarily using theFirebase Realtime Database, alongwithFirebase Cloud Functions formore complex or sensitive operations. The frontend was built withReact, with components fromMaterial UI.

Code for the frontend is written in JavaScript and located in thesrc/ folder,while serverless functions are written in TypeScript and located in thefunctions/ folder.

The latest development version of the code is on themain branch. We useGitHub Actions to automate our build and deployment process on Netlify, after anew release is created with version numbervA.B.C.

This game is currently in maintenance mode, and we'll only accept bug fixes. Iwould recommend talking to us on Discord (link above) if you really want to seea new feature added. We also have monthly community meetings organized there.

To build the site for development:

• Install Node 20 and npm 10.
• Runnpm install -g firebase-tools to globally install the Firebase CLI.
• Runnpm install in the root folder to get dependencies.
• Runnpm install in thefunctions folder.
• To start the project, runnpm run develop. This runs a script, which isresponsible for doing several things concurrently:
  • Build the TypeScript cloud functions in watch mode.
  • Start the Firebase Local Emulator Suite.
  • Start the frontend dev server with Vite + React.

The site can be opened athttp://localhost:5173.

You should also be able to access the Emulator UI athttp://localhost:4000,which contains useful information and allows you to inspect/modify the databaseduring development. Changes to client code insrc should be immediatelyvisible, as well as changes to code infunctions.

Other useful commands:

npm run lintnpmtest# Bundle the application into static assets.npm run buildnpm run build:preview# Format the codebase with Prettier.npm run format# Run development server targeting setwithfriends-dev project.npm run dev -- --mode preview# Run development server targeting production data. This requires Eric to update# the "Browser key (auto created by Firebase)" website restrictions at# https://console.cloud.google.com/apis/credentials to allow traffic.npm run dev -- --mode production

As mentioned above, the latest changes to themain branch are deployedautomatically to Netlify using thenpm run build script. If you try to runthis locally, it will not work due to protections on the production database.Instead, you can preview a release build configured to connect to the localemulator suite using thenpm run build:dev script.

The other parts of the app (serverless functions, database rules) are deployedto production using GitHub Actions on themain branch. Thestaging environment gets automatic deploypreviews when CI on themain branch passes. It is useful for seeing the latestversion of the app and making sure that nothing is broken before releasing toproduction.

Built byEric Zhang andCynthia Du.

All source code is available under theMIT License. We are notaffiliated withSet Enterprises, Inc., or the SET® card game.