{"id":48781331,"url":"https://github.com/nothing9537/production-react-advanced-project","last_synced_at":"2026-04-13T14:34:36.820Z","repository":{"id":201007830,"uuid":"636339562","full_name":"nothing9537/production-react-advanced-project","owner":"nothing9537","description":"At the moment, this is my complete best project and the pinnacle of the quintessence of all my knowledge in frontend. It uses a lot of advanced approaches to organizing frontend applications, more details in the project description.","archived":false,"fork":false,"pushed_at":"2025-01-31T03:30:59.000Z","size":26009,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T04:23:52.988Z","etag":null,"topics":["asynchronous-programming","cypress","eslint","fsd","jest","lokijs","react","react-context","react-hooks","reacthookform","reacttestinglibrary","redux-toolkit","scss-modules","storybook","stylelint","vitejs","webpack"],"latest_commit_sha":null,"homepage":"http://216.128.146.136/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nothing9537.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-05-04T16:23:16.000Z","updated_at":"2025-01-31T03:31:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"e038ab26-9d0d-4c5f-80bd-0168f4e50101","html_url":"https://github.com/nothing9537/production-react-advanced-project","commit_stats":null,"previous_names":["nothing9537/production-react-advanced-project"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nothing9537/production-react-advanced-project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothing9537%2Fproduction-react-advanced-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothing9537%2Fproduction-react-advanced-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothing9537%2Fproduction-react-advanced-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothing9537%2Fproduction-react-advanced-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nothing9537","download_url":"https://codeload.github.com/nothing9537/production-react-advanced-project/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothing9537%2Fproduction-react-advanced-project/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31757482,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T13:27:56.013Z","status":"ssl_error","status_checked_at":"2026-04-13T13:21:23.512Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["asynchronous-programming","cypress","eslint","fsd","jest","lokijs","react","react-context","react-hooks","reacthookform","reacttestinglibrary","redux-toolkit","scss-modules","storybook","stylelint","vitejs","webpack"],"created_at":"2026-04-13T14:34:34.780Z","updated_at":"2026-04-13T14:34:36.052Z","avatar_url":"https://github.com/nothing9537.png","language":"TypeScript","readme":"## About\n\nThe 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. \n\nFor login to the application, you can use 2 profiles with different levels of access. More details - [here](/docs/data.md).\n\nA 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.\n\n## Project running\n\n```\n  npm i - installing dependencies\n  npm run start:dev or npm run start:dev:vite - running on webpack5 builder, or vite builder.\n```\n----\n\n## Scripts\n\n- `npm run start - ` start webpack5 development server\n- `npm run start:vite - ` start vite development server using `.env.development` file\n- `npm run start:dev - ` start webpack5 development server and JSON Server backend\n- `npm run start:dev:vite - ` start vite development server and JSON Server backend\n- `npm run build:prod - ` create production build of application, with `--env` variables `mode=production` and `apiUrl=\u003cproduction backend url\u003e`\n- `npm run build:prod:vite - ` create production build of application using vite and `.env.production` file\n- `npm run build:dev - ` create development build using `webpack5`\n- `npm run lint:ts - ` run `eslint`\n- `npm run lint:ts:fix - ` Fix all auto-fixable problems with `eslint`\n- `npm run lint:scss - ` run `stylelint`\n- `npm run lint:scss:fix - ` Fix all auto-fixable problems with `stylelint`\n- `npm run test:unit - ` run unit and integration testing using `jest` for all **.test.** or **.spec.** files. You can run specific test file, by adding test filename, for ex. **npm run test:unit Counter.spec.tsx**\n- `npm run storybook - ` run storybook\n- `npm run storybook:build - ` create storybook build\n- `npm 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.\n- `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. \n- `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.\n- `npm run update-eslint-plugin - ` Updates the custom eslint plugin to the current version\n----\n\n## Project architecture\n\nProject was written depends on Feature Sliced Design methodology.\n\nDocs link - [Features Sliced Design](https://feature-sliced.design/ru/docs/get-started/overview)\n\n----\n\n## Work with translation\n\nProject using `i18next` library for translations. The translation files are stored in [public/locales](./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](./src/shared/config/i18n/i18n.ts) a bit and create translations manually using the appropriate keys\n\nFor comfortable working with translations strongly recommend to install vscode/web-storm extension. For vscode link provided: [click me](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally)\n\ni18next docs - [https://react.i18next.com/latest/using-with-hooks](https://react.i18next.com/latest/using-with-hooks)\n\n----\n\n## Testing\n\nProject has 4 types of tests:\n1) Default unit tests - `npm run test:unit`\n2) Integration testing with React Testing Library - `npm run test:unit`\n3) e2e tests with Cypress - `npm run test:e2e`\n4) regression screenshot storybook testing - `npm run test:ui`\n\n[More about test](/docs/testing.md)\n\n----\n\n## Linting\n\nProject uses ESLint for uniform code standardization and StyleLint for styles checking\n\nSo also created its own custom plugin, which contains 3 rules for controlling FSD architecture standards.\nOwn plugin - [npm](https://www.npmjs.com/package/eslint-plugin-nothingg9537-plugin), [github](https://github.com/nothing9537/eslint-plugin-nothingg9537-plugin)\n\nPlugin rules description:\n1) **path-checker** - restricts using absolute imports within one module\n2) **layer-imports** - verifies that imports are correct from an FSD architecture (For example, you can't use a `Features` layer in another `Features` layer), or use an overlying layer in an underlying layer. (For example, use a `Features` layer in an `Entities` layer, or `Pages` in `Widgets`, and so on). \n3) **public-api-imports** - allows imports only from public API (index.ts) file of module. Has auto-fix \n\n----\n\n## Storybook\n\nProject using storybook to describe components views. \nThe storybook-addon-mock is used for mock requests from backend.\n\nThe storybook file is in the same directory as the component it describes and has pattern like **.stories.tsx**\n\nThe storybook is started with the following script - `npm run storybook`\n\nMore about storybook - [Storybook](https://storybook.js.org/docs/react/get-started/install/)\n\n[Code example](/docs/storybook.md)\n\nAdditional decorators to make the storybook work with the libraries used in the project are written [here.](/src/shared/config/storybook/)\n\n----\n\n## Project configuration\n\nFor development project has 2 configs:\n\n1. Webpack config - [./config/build](/config/build/), [webpack.config.ts](/webpack.config.ts)\n2. Vite config - [vite.config.ts](/vite.config.ts)\n\nThe project configuration is stored in [/config](/config/)\n\n- */config/babel* - babel configuration\n- */config/build* - Webpack configuration. Resolvers, plugins, DevServer, Loaders are stored here\n- */config/jest* - jest environment config \n- */config/storybook* - storybook configuration\n\n----\n\n## CI Pipeline\n\nThe project has CI Pipeline and Github Actions configured at a basic level. The github configuration can be found [here.](/.github/workflows/main.yml)\n\n----\n\n## Working with data\n\nData interaction is handled by @reduxjs/toolkit. Reusable entities can be normalized using EntityAdapter, which allows to obtain O(n) data access complexity.\n\nRequests to the backend are sent using both [axios](https://axios-http.com/en/docs/intro) and [RTK Query](https://redux-toolkit.js.org/rtk-query/overview)\n\nJSON-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.\n\nFor async reducers loading, used [DynamicModuleWrapper](/src/shared/lib/components/DynamicModuleWrapper.tsx)\n\nIt allows asynchronous loading of reducers, thus getting rid of them in the main bundle\n\n[Code example](/docs/dynamic-module-wrapper.md)\n\n----\n\n## Environment\n\nThere 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. \n\nFor even more comfortable development could be used some CSS-IN-JS library like [styled-components](https://styled-components.com/docs). \n\nA lot of helpers to handle redux/hooks (useDispatch -\u003e [buildSlice](/src/shared/lib/store/buildSlide.ts), useSelector -\u003e [buildSelector](/src/shared/lib/store/buildSelector.ts)), class names, query parameters feature-flags handlers.\n\nSeveral scripts for automated refactoring with [ts-morph](https://ts-morph.com/) have been written, which allow to work with AST code tree, parse and modify it. \n\nAlso, the project was initially configured on Webpack, and then Vite was added as an additional builder. \n\n----\n\n## Feature flags\n\nThe 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.\n\n[Handler functions](/src/shared/lib/features/) have been created, that allow convenient interaction with the concept, as well as automatic refactoring using [ts-morph](https://ts-morph.com/), which \"kicks out\" a feature, either with an on flag or an off flag, based on the name of the feature.\n\n----\n\n## Working with forms\n\nOne of the best solutions at the time of writing the project for working with forms - [react-hook-form](https://react-hook-form.com/get-started) - is pre-integrated into the project. [More about](/docs/form.md)\n\n## New design\n\nAt the end of development, the application was completely redesigned to match the Figma layout, using [ToggleFeatures](/src/shared/lib/features/component/ToggleFeatures/ToggleFeatures.tsx) handler functions for components and [toggleFeatures](/src/shared/lib/features/lib/toggleFeatures.ts) for functions that return void or something that is not a component.\n\nTo switch the design, you need to click on the user avatar, go to settings and select the new design version there.\n\n----\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnothing9537%2Fproduction-react-advanced-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnothing9537%2Fproduction-react-advanced-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnothing9537%2Fproduction-react-advanced-project/lists"}