npm install - install dependencies
npm run start:dev или npm run start:dev:vite - run server + frontend project in dev mode
npm run start- Launch the frontend project on webpack dev servernpm run start:vite- Launch the frontend project on vitenpm run start:dev- Launch the frontend project on webpack dev server + backendnpm run start:dev:vite- Launch the frontend project on vite + backendnpm run start:dev:server- Launch the backend servernpm run build:prod- Build in production modenpm run build:dev- Build in development mode (not minimized)npm run lint:ts- Check ts files with a linternpm run lint:ts:fix- Fix ts files with a linternpm run lint:scss- Check scss style files with a linternpm run lint:scss:fix- Fix scss style files with a linternpm run test:unit- Run unit tests with jestnpm run test:ui- Run screenshot tests with lokinpm run test:ui:ok- Confirm new screenshotsnpm run test:ui:ci- Run screenshot tests in CInpm run test:ui:report- Generate a full report for screenshot testsnpm run test:ui:json- Generate a JSON report for screenshot testsnpm run test:ui:html- Generate an HTML report for screenshot testsnpm run storybook- Run Storybooknpm run storybook:build- Build Storybooknpm run g:slice- Script for generating FSD slices
The project is written following the Feature Sliced Design methodology.
Link to documentation - Feature Sliced Design
The project uses the i18next library for handling translations. Translation files are stored in public/locales.
For a more comfortable experience, we recommend installing the WebStorm/VSCode plugin.
i18next Documentation - https://react.i18next.com/
The project uses four types of tests:
- Regular unit tests with Jest -
npm run test:unit - Component tests with React Testing Library -
npm run test:unit - Screenshot testing with Loki -
npm run test:ui - E2E testing with Cypress -
npm run test:e2e
More details about tests - Testing Documentation
The project uses ESLint to check TypeScript code and Stylelint to check style files.
Additionally, for strict control of key architectural principles, it uses its own ESLint plugin eslint-plugin-ded-plugin, which contains 3 rules:
- path-checker - prohibits the use of absolute imports within the same module;
- layer-imports - checks the correct usage of layers from the FSD perspective (for example, widgets cannot be used in features and entities);
- public-api-imports - allows imports from other modules only from the public API. Has auto fix;
npm run lint:ts- Check ts files with a linternpm run lint:ts:fix- Fix ts files with a linternpm run lint:scss- Check scss files with a style linternpm run lint:scss:fix- Fix scss files with a style linter
In the project, story cases are described for each component. Server requests are mocked using the storybook-addon-mock.
The file with story cases is created next to the component with the extension .stories.tsx.
You can start Storybook with the following command:
npm run storybook
Learn more about Storybook
Example:
import type { Meta, StoryObj } from "@storybook/react";
import { ThemeDecorator } from "@/shared/config/storybook/ThemeDecorator/ThemeDecorator";
import { Skeleton } from "./Skeleton";
import { Theme } from "@/shared/const/theme";
const meta: Meta<typeof Skeleton> = {
title: "shared/Skeleton",
component: Skeleton,
tags: ["autodocs"],
};
export default meta;
type Story = StoryObj<typeof Skeleton>;
export const Light: Story = {
args: {
width: "100%",
height: 200,
},
};
export const Dark: Story = {
decorators: [ThemeDecorator(Theme.DARK)],
args: {
width: "100%",
height: 200,
},
};
export const Green: Story = {
decorators: [ThemeDecorator(Theme.GREEN)],
args: {
width: "100%",
height: 200,
},
};
export const Circle: Story = {
args: {
border: "50%",
width: 100,
height: 100,
},
};For development, the project contains 2 configurations:
- Webpack - ./config/build
- Vite - vite.config.ts
Both build tools are adapted to the main features of the application.
All configuration is stored in /config:
- /config/babel - Babel
- /config/build - Webpack configuration
- /config/jest - Test environment configuration
Various scripts for refactoring, code simplification, report generation, and more can be found in the scripts folder.
GitHub Actions configuration is located in /.github/workflows. In the CI pipeline, the project is built, all types of tests are run, and the project is checked by linters.
Data interaction is carried out using Redux Toolkit. Whenever possible, reusable entities should be normalized using EntityAdapter.
Server requests are sent using RTK query.
For asynchronous reducer loading (to avoid bundling them into the main bundle), DynamicModuleLoader is used.