The project was designed with maximum emphasis on code quality, structure, architecture, scalability. Familiarize and learn new tools/approaches. Nevertheless, in the application the user has authorization, the ability to view fake articles, sort them, edit profile, change the design of the application.
For login to the application, you can use 2 profiles with different levels of access. More details - here.
A server was rented on Debian operating system, nginx was configured at the basic level, as well as distribution of static files, as well as gzip.
npm i - installing dependencies
npm run start:dev or npm run start:dev:vite - running on webpack5 builder, or vite builder.
npm run start -start webpack5 development servernpm run start:vite -start vite development server using.env.developmentfilenpm run start:dev -start webpack5 development server and JSON Server backendnpm run start:dev:vite -start vite development server and JSON Server backendnpm run build:prod -create production build of application, with--envvariablesmode=productionandapiUrl=<production backend url>npm run build:prod:vite -create production build of application using vite and.env.productionfilenpm run build:dev -create development build usingwebpack5npm run lint:ts -runeslintnpm run lint:ts:fix -Fix all auto-fixable problems witheslintnpm run lint:scss -runstylelintnpm run lint:scss:fix -Fix all auto-fixable problems withstylelintnpm run test:unit -run unit and integration testing usingjestfor all .test. or .spec. files. You can run specific test file, by adding test filename, for ex. npm run test:unit Counter.spec.tsxnpm run storybook -run storybooknpm run storybook:build -create storybook buildnpm run export-svg-icons -Exports all SVG icons contained in the assets directory, which have been converted to JSX format for easier use, to an index.ts file.npm run generate:layer -Automatically creates a slice and segment for the given layer that was requested when the script was called according to the described template of project folders and files.npm run update-shared-imports -During development it was deliberately made a mistake not to create a public API for shared/ui layer. After writing this script, it automatically creates an index.ts, if not exists, file in each UI element of the component, and exports all exported content. Moreover, the script edits all ui component imports in the project.npm run update-eslint-plugin -Updates the custom eslint plugin to the current version
Project was written depends on Feature Sliced Design methodology.
Docs link - Features Sliced Design
Project using i18next library for translations. The translation files are stored in public/locales. A convenient file system of translations is provided, which makes it easy to introduce a new language: create a directory with the desired language, edit the i18next configuration a bit and create translations manually using the appropriate keys
For comfortable working with translations strongly recommend to install vscode/web-storm extension. For vscode link provided: click me
i18next docs - https://react.i18next.com/latest/using-with-hooks
Project has 4 types of tests:
- Default unit tests -
npm run test:unit - Integration testing with React Testing Library -
npm run test:unit - e2e tests with Cypress -
npm run test:e2e - regression screenshot storybook testing -
npm run test:ui
Project uses ESLint for uniform code standardization and StyleLint for styles checking
So also created its own custom plugin, which contains 3 rules for controlling FSD architecture standards. Own plugin - npm, github
Plugin rules description:
- path-checker - restricts using absolute imports within one module
- layer-imports - verifies that imports are correct from an FSD architecture (For example, you can't use a
Featureslayer in anotherFeatureslayer), or use an overlying layer in an underlying layer. (For example, use aFeatureslayer in anEntitieslayer, orPagesinWidgets, and so on). - public-api-imports - allows imports only from public API (index.ts) file of module. Has auto-fix
Project using storybook to describe components views. The storybook-addon-mock is used for mock requests from backend.
The storybook file is in the same directory as the component it describes and has pattern like .stories.tsx
The storybook is started with the following script - npm run storybook
More about storybook - Storybook
Additional decorators to make the storybook work with the libraries used in the project are written here.
For development project has 2 configs:
- Webpack config - ./config/build, webpack.config.ts
- Vite config - vite.config.ts
The project configuration is stored in /config
- /config/babel - babel configuration
- /config/build - Webpack configuration. Resolvers, plugins, DevServer, Loaders are stored here
- /config/jest - jest environment config
- /config/storybook - storybook configuration
The project has CI Pipeline and Github Actions configured at a basic level. The github configuration can be found here.
Data interaction is handled by @reduxjs/toolkit. Reusable entities can be normalized using EntityAdapter, which allows to obtain O(n) data access complexity.
Requests to the backend are sent using both axios and RTK Query
JSON-server was used for backend in the application, as well as the basic data in the form of filling articles, comments, notifications, users and profiles were filled manually, due to the absence of backend. Can write a full-fledged backend in NestJS, for example, together with the editor of articles with the help of some library.
For async reducers loading, used DynamicModuleWrapper
It allows asynchronous loading of reducers, thus getting rid of them in the main bundle
There are a lot of custom solutions in the project. Handy scripts, hooks, scss structure allows to easily introduce new themes/styles. The app supports 4 themes - dark and light for two design options, blue and sand for old and new design respectively.
For even more comfortable development could be used some CSS-IN-JS library like styled-components.
A lot of helpers to handle redux/hooks (useDispatch -> buildSlice, useSelector -> buildSelector), class names, query parameters feature-flags handlers.
Several scripts for automated refactoring with ts-morph have been written, which allow to work with AST code tree, parse and modify it.
Also, the project was initially configured on Webpack, and then Vite was added as an additional builder.
The project implemented the concept of Feature Flags, which will be used for the redesign of the project and the simultaneous existence of the old, and new design of the application.
Handler functions have been created, that allow convenient interaction with the concept, as well as automatic refactoring using ts-morph, which "kicks out" a feature, either with an on flag or an off flag, based on the name of the feature.
One of the best solutions at the time of writing the project for working with forms - react-hook-form - is pre-integrated into the project. More about
At the end of development, the application was completely redesigned to match the Figma layout, using ToggleFeatures handler functions for components and toggleFeatures for functions that return void or something that is not a component.
To switch the design, you need to click on the user avatar, go to settings and select the new design version there.