- Demo (Netlify, in development): https://mishablogging-platform.netlify.app/
Note: Data on this demo cannot be modified or persisted. (run locally to edit and persist data) - Unit & Screenshot Test Reports (GitHub Pages): https://mishamoskalenko.github.io/blogging-platform/
npm install - install dependencies
npm run start:dev or npm run start:dev:vite - start the server + frontend of the project in dev mode
npm run start- Start the frontend project on the webpack dev servernpm run start:vite- Start the frontend project on vitenpm run start:dev- Start the frontend project on the webpack dev server + backendnpm run start:dev:vite- Start the frontend project on vite + backendnpm run start:dev:server- Start the backend servernpm run build:prod- Build in prod modenpm run build:dev- Build in dev mode (not minimised)npm run lint:ts- Check ts files with linternpm run lint:ts:fix- Fix ts files with linternpm run lint:scss- Check scss style files with linternpm run lint:scss:fix- Fix scss style files with 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 the Storybook buildnpm run generate:slice- Script for generating FSD slices
The project was written in accordance with the Feature sliced design methodology.
Link to documentation - feature sliced design
The project uses the i18next library to work with translations. Translation files are stored in public/locales.
For ease of use, we recommend installing the plugin for webstorm/vscode.
i18next documentation - https://react.i18next.com/
The project uses four types of tests:
- Regular unit tests on 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:e2efor localhost:3000 and localhosh:8000(server)
The project uses eslint to check typescript code and stylelint to check style files.
In addition, to strictly control the main architectural principles, we use our own eslint plugin eslint-plugin-eslint-path-plugin, which contains three rules
- path-checker - prohibits the use of absolute imports within a single module.
- layer-imports - checks the correctness of layer usage from an 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- Checks ts files with a linternpm run lint:ts:fix- Fixes ts files with a linternpm run lint:scss- Checks scss style files with a linternpm run lint:scss:fix- Fixes scss style files with a linter
The project describes story cases for each component. Requests to the server are mocked using storybook-addon-mock.
The file with story cases is created next to the component with the extension .stories.tsx
You can run the storybook with the command:
npm run storybook
Example:
import React from 'react';
import { StoryFn, Meta } from '@storybook/react';
import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
import { Button, ButtonSize, ButtonTheme } from './Button';
import { Theme } from '@/shared/const/theme';
export default {
title: 'shared/Button',
component: Button,
argTypes: {
backgroundColor: { control: 'color' },
},
} as Meta<typeof Button>;
const Template: StoryFn<typeof Button> = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
children: 'Text',
};
export const Clear = Template.bind({});
Clear.args = {
children: 'Text',
theme: ButtonTheme.CLEAR,
};The project contains two configurations for development:
- Webpack - ./config/build
- Vite - vite.config.ts
Both builders 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
- /config/storybook - storybook configuration
The scripts folder contains various scripts for refactoring, simplifying code writing, generating reports, etc.
The GitHub Actions configuration is located in /.github/workflows. All types of tests, project and storybook builds, and linting are run in CI.
In pre-commit hooks, we check the project with linters, config in /.husky
Data interaction is carried out using the redux toolkit. Where possible, reusable entities should be normalised using EntityAdapter
Requests to the server are sent using RTK query
For asynchronous connection of reducers (so as not to pull them into the general bundle), DynamicModuleLoader is used.