Useful commands

Starting the app

npx nx start twenty-front

Regenerate graphql schema based on API graphql schema

npx nx run twenty-front:graphql:generate --configuration=metadata

OR

npx nx run twenty-front:graphql:generate

Lint

npx nx run twenty-front:lint # pass --fix to fix lint errors

Test

npx nx run twenty-front:test # run jest tests
npx nx run twenty-front:storybook:serve:dev # run storybook
npx nx run twenty-front:storybook:test # run tests # (needs yarn storybook:serve:dev to be running)
npx nx run twenty-front:storybook:coverage # (needs yarn storybook:serve:dev to be running)

Tech Stack

The project has a clean and simple stack, with minimal boilerplate code.

App

• React
• Apollo
• GraphQL Codegen
• Recoil
• TypeScript

Testing

• Jest
• Storybook

Tooling

• Yarn
• Craco
• ESLint

Architecture

Routing

React Router handles the routing.

To avoid unnecessary re-renders all the routing logic is in a useEffect in PageChangeEffect.

State Management

Recoil handles state management.

See best practices for more information on state management.

Testing

Jest serves as the tool for unit testing while Storybook is for component testing.

Jest is mainly for testing utility functions, and not components themselves.

Storybook is for testing the behavior of isolated components, as well as displaying the design system.