Dev Interview Hub

Project Launch

Quickly set up and start the project with:

npm install                # Install project dependencies
npm run start:dev          # Start the server and frontend in development mode
# or
npm run start:dev:vite     # Start the server and frontend using Vite in development mode

---

Scripts

• npm run start - Launches the frontend project using the Webpack Dev Server.
• npm run start:vite - Launches the frontend project using Vite.
• npm run start:dev - Starts the frontend project with the Webpack Dev Server along with the backend.
• npm run start:dev:vite - Starts the frontend project with Vite along with the backend.
• npm run start:dev:server - Starts the backend server.
• npm run build:prod - Builds the project in production mode.
• npm run build:dev - Builds the project in development mode (non-minimized).
• npm run lint:ts - Runs the linter on TypeScript files.
• npm run lint:ts:fix - Fixes issues in TypeScript files using the linter.
• npm run lint:scss - Runs the linter on SCSS files.
• npm run lint:scss:fix - Fixes issues in SCSS files using the linter.
• npm run test:unit - Executes unit tests with Jest.
• npm run test:ui - Runs screenshot tests using Loki.
• npm run test:ui:ok - Confirms new screenshots.
• npm run test:ui:ci - Runs screenshot tests in Continuous Integration (CI) mode.
• npm run test:ui:report - Generates a comprehensive report for screenshot tests.
• npm run test:ui:json - Generates a JSON report for screenshot tests.
• npm run test:ui:html - Generates an HTML report for screenshot tests.
• npm run storybook - Launches Storybook.
• npm run storybook:build - Builds the Storybook application.
• npm run prepare - Sets up pre-commit hooks.
• npm run generate:slice - Script for generating FSD slices.

---

Project Structure

The project is developed following the Feature-Sliced Design methodology.

For a deeper understanding, visit the Feature-Sliced Design documentation

Architecture Overview

• Frontend: Utilizes React with TypeScript.
• Backend: Node.js server.

---

Project Configuration

The project uses two build tools: Webpack and Vite. For comprehensive configuration details, refer to the respective guides:

Tool	Usage	Purpose	Configuration
Webpack	npm run start	Versatile build tool for various environments.	webpack.config.ts
Vite	npm run start:vite	Alternative build tool with faster processes.	vite.config.ts

All configuration files are systematically organized within the /config directory:

• Babel configuration
• Webpack configuration
• Jest configuration
• Storybook configuration

For comprehensive configuration details, refer to the Project Configuration Documentation.

Working with Translations

This project employs the i18next library for translations. Translation files are located in the public/locales directory. For an efficient workflow, it is recommended to install the i18next plugin for WebStorm or VSCode, which provides helpful features like autocompletion for translation keys and detecting missing translations.

For more details refer to the configuration file.

---

Additional scripts for development

The scripts folder houses various utilities designed to streamline development processes, enhance code quality, and maintain project integrity.

Script Name	Purpose	Command
Update Absolute Imports with Alias	Automates modification of absolute import paths in TypeScript projects by prefixing specific "layers" (app, shared, entities, etc.) with @/. Ensures a consistent import structure across the project for improved organization and maintainability.	npm run update-absolute-import
Create Public API for Shared UI	Generates index.ts files for UI component directories in src/shared/ui/, standardizing import paths and simplifying component references.	npm run create-publicApi-for-shared-ui
Remove Feature Toggles	Automates removal of feature toggles in TypeScript projects based on specified state (on or off), ensuring deprecated features are cleanly removed from the codebase.	npx ts-node ./scripts/remove-feature.ts featureName featureState
Generate Loki Report	Generates a report.json for visual regression testing with Loki, facilitating comparison of component changes visually to maintain UI quality.	npm run test:ui:json
Generate FSD Slice	Automates creation of Redux slices in TypeScript projects, including directory structure, model files, UI components, and public API, enhancing consistency and reducing development time.	node scripts/createSlice/generate-fsd-slice.js layer sliceName
Clear Cache	Clears .cache directory in node_modules to remove outdated or corrupt cache files, ensuring smooth operation of tools like Babel loader.	node ./scripts/clear-cache/clear-cache.js

---

CI Pipeline and Pre-commit Hooks

The configuration for GitHub Actions is located in .github/workflows. In the CI process, all types of tests are run, the project and Storybook are built, and linting is performed.

In the pre-commit hooks, we check the project using linters, with the configuration found in .husky.

---

Service Worker

The Service Worker is implemented to enhance performance, provide offline capabilities, and improve caching strategies.

• The Service Worker file is located in config/serviceWorker/config-sw.js.
• It caches static assets, API responses, and other critical resources to improve load times and support offline functionality.
• The implementation follows best practices, ensuring updates are handled correctly using versioning and the skipWaiting strategy.
• The registration logic is managed in config/serviceWorker/serviceWorkerRegistration.js.

For debugging or testing, the Service Worker can be manually unregistered using the browser's developer tools.

---

Working with Data

Data interactions are handled using the Redux Toolkit. To enhance reusability, entities are normalized with the EntityAdapter wherever applicable. In this project, it is specifically utilized to normalize the data for articles and comments within their respective slices.

Server requests are managed using RTK query, with the configuration available at rtkApi

For asynchronous integration of reducers — ensuring they are not included in the main bundle — DynamicModuleLoader is implemented.

---

Working with Feature Flags

Feature flags are managed through the toggleFeatures helper or ToggleFeaturesComponent component:

• toggleFeatures helper allows you to conditionally execute logic based on feature flags.
• ToggleFeaturesComponent toggles UI elements based on feature flags.

A custom ESLint plugin, eslint-plugin-toggle-features-rule-plugin, is used to enforce:

• one-line-arrow-function:Ensures concise arrow functions for feature logic.
• component-jsx-props: Enforces that only JSX elements are used in feature flag props on and off.

These rules streamline feature flag management and facilitate clean removal.

Removing Feature Flags

To automatically remove a feature flag, use the remove-feature.ts script.

Important

Successful automatic feature flag removal relies on proper use of the custom ESLint plugin. Following its rules ensures the feature toggle logic is structured for clean, automated removal

For more details, refer to the Working with Feature Flags documentation

Linting

The project employs ESLint and Stylelint for code quality. Custom plugins help enforce architectural principles, ensuring the following:

• path-checker: Prohibits absolute imports within the same module.
• layer-imports: Ensures proper layer usage as per the FSD architecture.
• public-api-imports: Allows imports only through the public API of other modules.

These rules help maintain project structure and improve code quality.

Additionally, the project features another plugin for managing feature flags, which includes:

• one-line-arrow-function: Enforces one-line arrow functions for on and off options in the toggleFeatures helper for cleaner code.
• component-jsx-props: Ensures only JSX elements are passed to the on and off props of ToggleFeaturesComponent, simplifying feature flag removal.

For a detailed look at the linting setup, see Linting Documentation.

Running Linters

• npm run lint:ts - Lint TypeScript files
• npm run lint:ts:fix - Fix TypeScript linting issues
• npm run lint:scss - Lint SCSS files with Stylelint
• npm run lint:scss:fix - Fix SCSS linting issues

---

Layers according to FSD

For detailed architectural components and structures, refer to the following categories:

Shared

Common for both styles versions	Deprecated	Redesigned
AppImage	AppLink	AppLink
AppLogo	Avatar	Avatar
Drawer	Button	Button
Modal	Card	Card
Overlay	Code	Code
Portal	Icon	Icon
Flex	Input	Input
HStack	Skeleton	Skeleton
VStack	Tabs	Tabs
StarRating	Text	Text
	Dropdown	Dropdown
	ListBox	ListBox
	Popover	Popover
	Loader
	Select

Entities

• Article
• Comment
• Country
• Currency
• Notification
• Profile
• Rating
• User

Features

• ArticleCategoryTabs
• ArticleComments
• ArticleEditNavigationButton
• ArticleListNavigationButton
• ArticlePageGreeting
• ArticleRating
• ArticleRecommendationsList
• ArticleSortSelector
• ArticleViewSelector
• AuthByUsername
• AvatarDropdown
• EditableProfileCard
• LangSwitcher
• NotificationButton
• ScrollToTopButton
• ThemeSwitcher
• UIDesignSwitcher

Widgets

• ArticleAdditionalInfo
• ArticlesFilters
• Navbar
• Page
• PageError
• PageLoader
• ScrollToolbar
• Sidebar

Pages

• AboutPage
• AdminPanelPage
• ArticleDetailsPage
• ArticleEditPage
• ArticlesPage
• ForbiddenPage
• MainPage
• NotFoundPage
• ProfilePage
• SettingsPage

---

Testing

The project supports multiple test types. See the full testing documentation here:

Test Type	Command	Description
Unit Tests (Jest)	npm run test:unit	Verifies core functionality and ensures functions operate as intended.
Component Tests (React Testing Library)	npm run test:unit	Assesses the behavior and rendering of React components.
Screenshot Tests (Loki)	npm run test:ui	Conducts visual regression testing to maintain UI consistency.
End-to-End Tests (Cypress)	npm run test:e2e	Tests comprehensive user flows and interactions.

For more details, refer to the tests documentation

---

Storybook

• Each component in the project has corresponding story cases defined for it.
• Server requests are mocked using the storybook-addon-mock plugin to simulate API interactions.
• Story files are created alongside the component files with the .stories.tsx extension.

You can run Storybook with the following command:

npm run storybook

For more details, see the Storybook documentation

---