Bananagrams

Website: https://bananagrams.jackieaskins.com

Helpful Dependency Docs

• Chakra UI - React component library
• Jest - Unit test framework
• Konva & React Konva - HTML Canvas wrapper used for game board
• Playwright - End-to-end testing framework
• React Icons & Font Awesome - Icon provider, app uses Font Awesome 6 icons
• React Router
• React Testing Library
• Socket.IO

Development

The project is managed using NPM Workspaces, with the following workspaces:

• eslint-config: Common ESLint rules shared between packages
• app: Server and client code
• e2e: Playwright integration tests

This package enforces Conventional Commits, be sure to follow the standards when creating commit messages. Playwright CI will run whenever a commit is pushed to a repo and a new version of the website will be deployed on success. To avoid running CI (and deploying) for a commit, append [skip ci] to the end of the commit message. This should only be used for commits that don't have the potential to impact production.

Commands

Before running any of the below commands, be sure to install dependencies:

npm install

Dev Server

Run the local server with hot reload. This starts the server on port 3000:

npm run dev

Production Server

Run the server in production mode. This starts the server on port 3000:

npm run build && npm run start

Testing

Run the app's unit tests:

npm run -w app test

Run the app's unit tests in watch mode:

npm run -w app test:watch

Run the Playwright integration tests in headless mode. This will start up a production server on port 3001 to run the tests against:

npm run -w e2e test

Run the Playwright integration tests using in UI mode. This will start or re-use an active dev server on port 3000. This mode allows for quick turn around while debugging issues:

npm run -w e2e ui

Run the unit tests followed by Playwright integration tests:

npm run test

Types, Linting & Formatting

Consider setting up your text editor of choice to auto-format and show errors and warnings while developing.

• TypeScript Language Server
• Prettier editor integration
• ESLint editor integration

The below commands can be targeted to a specific package by adding -w app or -w e2e to the command.

Check for TypeScript type errors:

npm run check-types

Check for ESLint errors:

npm run lint

Check for ESLint errors and fix and auto-fixable errors:

npm run lint:fix

Format with Prettier:

npm run format