Skip to content

Latest commit

 

History

History
225 lines (160 loc) · 7.99 KB

README.md

File metadata and controls

225 lines (160 loc) · 7.99 KB
Raw

React blog project

It's my sandbox to try new technologies, tools, etc.

Project available on https://reactblog.ru/. Published to selectel, but it's expensive, and I'll change the hosting provider to a cheaper one later.

Project report about unit and screenshot testing are published to github pages.

You can use different users with different roles (and permissions) to login:

  • Admin role: username admin, pass 123.
  • User role: username user, pass 456.
  • Manager role: username manager, pass: 789.

Architectural design methodology

Project developed with Feature-Sliced Design methodology.

Project

  • User Roles, Profiles
  • Different article types, comments, filters, search
  • Different custom UI controls, Skeletons
  • Private routing

List of Entities

List of Features

Features

  • Custom FSD slice generator with node.js
  • Custom babel plugin babelRemovePropsPlugin
  • Custom own ESLint plugin: eslint-plugin-fsd-import
  • Code splitting
  • Async reducers, async thunk
  • Custom refactoring tools with ts-morph
  • Supported En and Ru translations with i18next library. Translations are saved in public/locales.

Configuration

Project used 2 configs:

  • Webpack - config/build
  • Vite - vite.config.js

Both bundlers adapted for apps features.

All config is stored in config:

  • config/babel - babel config
  • config/build - webpack config
  • config/jest - jest config
  • config/storybook - storybook config

Folder sripts stored different scripts for refactoring code, create slice, generate reports, etc.

Tests

In project used 4 types of tests:

  • 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 about tests - documentation.

Linting

Project used ESLint to check typescript code and Stylelint to check styles code.

To control the main architectural principles of FSD used own custom ESLint plugin eslint-plugin-fsd-import with 3 rules:

  • fsd-relative-path - forbids using absolute imports within one slice.
  • public-api-imports - allow imports from other modules only from public API. Has auto fix.
  • layer-imports - check slices for correct use in terms of FSD (ex.: widgets can't be used in features and shared slices).

CI pipeline and pre-commit hooks

Config for GitHub Actions is stored in .githib/workflows. CI used to run linters, tests, build project and storybook, upload unit & screenshot reports to GitHub Pages.

Pre-commit hooks used to check code with linters, create build. Config is stored in /.husky.

Work with data

Tool used to work with data is redux toolkit. If it is possible, re-usable entities should be normalized with EntityAdaptor.

Server queries with RTK query

For adding async reducers used DynamicModuleLoader ( the reason is to not add them to main bundle).

Storybook

For each component is created story-case.

Request on server mocked with storybook-addon-mock.

File with story-cases is created near the component with extension .story.tsx.

How to start project

npm install - install dependencies
npm run start:dev or npm run start:dev:vite - starts server + frontend

Scripts

Start and build

  • npm run start - run frontend with Webpack on http://localhost:3000/
  • npm run start:vite - run frontend with Vite on http://localhost:5173/
  • npm run start:dev:server - run backend on http://localhost:8000/
  • npm run start:dev - run backend + frontend with Webpack
  • npm run start:dev:vite - run backend + frontend with Vite
  • npm run build:dev - build in dev mode
  • npm run build:prod - build in prod mode

Linting

  • npm run lint:ts - check TS files with ESLint
  • npm run lint:ts:fix - fix TS files with ESLint
  • npm run lint:scss - check scss files with Stylelint
  • npm run lint:scss:fix - fix scss files with Stylelint

Storybook

  • npm run start:storybook - run storybook on http://localhost:6006/
  • npm run storybook:build - create storybook build
  • start:storybook:static - create storybook build for CI

Testing

  • npm run test:unit - run unit tests with Jest
  • npm run test:unit:coverage - run unit tests with Jest and calculate coverage
  • npm run test:ui - run screenshot tests with Loki (storybook should be started)
  • npm run test:ui:static - run screenshot tests with Loki on static storybook files (storybook static files should be build)
  • npm run test:ui:ok - approve screenshot test with Loki
  • npm run test:ui:ci - run screenshot tests with Loki in CI
  • npm run test:ui:report - generate full report for screenshot testing
  • npm run test:ui:json - generate json report for screenshot testing
  • npm run test:ui:html - generate HTML report for screenshot testing
  • npm run test:e2e - run e2e tests with Cypress

Tools

  • npm run analyzer:dev - analyzing dev bundle size
  • npm run analyzer:prod - analyzing prod bundle size
  • npm run generate:slice - script for creating FSD slice

Tools:

Backend:

  • Server: imitation with json-server
  • Uploaded to Vercel (some features are not work when project run not on local machine, ex: edit profile)
  • Uploaded to selectel can be reached by https://reactblog.ru.