Useful commands

Starting the app

 nx start twenty-front

Regenerate graphql schema based on API graphql schema

nx graphql:generate twenty-front

Lint

nx lint twenty-front

Test

nx test twenty-front# run jest tests
nx storybook:serve:dev twenty-front# run storybook
nx storybook:test twenty-front# run tests # (needs yarn storybook:serve:dev to be running)
nx storybook:coverage twenty-front # (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.