git clone https://github.com/ArturW1998/blog.git
npm install - install dependencies
npm run start:dev or npm run start:dev:vite - run server + frontend project in dev mode
Check out link
- admin:
admin/123 - user:
user/123 - manager:
manager/123
npm run start- Run frontend project on webpack dev servernpm run start:vite- Run frontend project on vitenpm run start:dev- Run frontend project on webpack dev server + backendnpm run start:dev:vite- Run frontend project on vite + backendnpm run start:dev:server- Run backend servernpm run build:prod- Build in prod modenpm run build:dev- Build in dev mode (non-minified)npm run lint:ts- Lint check for ts filesnpm run lint:ts:fix- Fix ts files with linternpm run lint:scss- Lint check for scss style filesnpm run lint:scss:fix- Fix scss style files with linternpm run test:unit- Run unit tests with jestnpm run test:e2e- Run e2e tests with cypressnpm run test:ui- Run screenshot tests with lokinpm run test:ui:ok- Approve new screenshotsnpm run test:ui:ci- Run screenshot tests in CInpm run test:ui:report- Generate full report for screenshot testsnpm run test:ui:json- Generate json report for screenshot testsnpm run test:ui:html- Generate HTML report for screenshot testsnpm run storybook- Run Storybooknpm run storybook:build- Build Storybooknpm run generate:slice- Script to generate FSD slicesnpm run remove:feature- Script for removing outdated design
The project is developed according to the Feature Sliced Design methodology.
Link to documentation - feature sliced design
The project uses the i18next library for translation management. Translation files are stored in public/locales.
For a comfortable work, we recommend installing the plugin for WebStorm/VSCode.
i18next documentation - https://react.i18next.com/
The project uses 4 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 - End-to-end (e2e) testing with Cypress -
npm run test:e2e
More details about the tests can be found in the - testing documentation
The project uses ESLint to check TypeScript code and Stylelint to check style files.
In addition, for strict control of major architectural principles, a custom ESLint plugin eslint-plugin-fsd-slivki is used, which includes 3 rules:
path-check-relative- prohibits the use of absolute imports within the same modulepath-check-layers- checks the correct usage of layers from the FSD perspective (e.g., widgets cannot be used in features and entities)path-check-public-api- allows imports from other modules only from the public API. It has auto fix.
npm run lint:ts- check ts filesnpm run lint:ts:fix- fix ts filesnpm run lint:scss- check scss filesnpm run lint:scss:fix- fix scss files
In the project, story cases are described for each component. Requests to the server are mocked with storybook-addon-mock.
A file with stories creates next to the component with the extension .stories.tsx
To run storybook:
npm run storybook
See more about Storybook
Project has two config for dev mods:
- Webpack -
./config/build - vite -
./vite.config.ts
Both builders are customized for base app features.
All the configs are stored in /config
/config/babel- babel/config/build- webpack config/config/jest- jest config/config/storybook- storybook config
In /scripts folder there are different scripts for refactoring, automatization, code generation etc.
Github actions config is in /.github/workflows.
CI consists of project build, storybook build, all forms of testing including screenshot testing and linting.
In precommit hooks we check the project with linters. Config is in /.husky
Work with data api in organized with help of redux toolkit. You should use EntityAdapter to normalize reusable entities if its possible.
Requests to server are sending with help of RTK query
For enabling async reducers we use DynamicModuleLoader. This prevents us from overloading the main chunk.
Working with feature flag is possible on the project. You should use the template below:
// For plain ts/js
toggleFeature({
name: "feature-name",
on: () => ..., // arrow function if feature is on
off: () => ... // arrow function if feature is off
})
// For tsx
<ToggleFeatures
feature="feature-name"
on={<Component_if_feature_on/>}
off={<Component_if_feature_off/>}
/>
To remove feature from the code base you can use script from ./scripts/refactoring/removeFeature.ts
Use the command npm run remove:feature feature-name on/off to run the script
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent