Launching the project

npm install - Install dependencies
npm run dev - Launch the project in development mode
npm run preview - Preview the production build

---

Scripts

• npm run dev - Start the dev server via Vite
• npm run build - Build the project
• npm run preview - Local preview of the build
• npm run lint - Check the code using ESLint
• npm run prettier - Format the code using Prettier

---

Project architecture

The project was written in accordance with the Feature sliced design methodology

Link to documentation - feature sliced design

---

Linting

The project uses eslint to check typescript code, strictly control key architectural principles, and ensure accessibility

Running linters

• npm run lint - Checking ts files with a linter
• npm run prettier - Formatting the project

---

Project configuration

The project contains a vite config: vite.config.ts

The builder is adapted to the main features of the application

Build:

• vite

---

Working with data

Data interaction is carried out using the redux toolkit

Requests to the server are sent using Axios

---

Routing

To work with routes in the project, we use React router DOM

The router configuration is located in client/src/app/providers/RouterProvider

---

Entities

• Contact
• Media
• Member
• Message
• Messenger
• Reaction
• User

Features

• CreateMessenger
• EditMessenger
• Message
• MessageSearch
• MessengerInput
• MessengerSearch
• Profile
• Slider
• UserContacts
• ChatList

Widgets

• AuthForm
• Header
• LeftSidebar
• Main
• Messenger
• PageError
• PageLayout
• RightSidebar

Pages

• AuthPage
• MessengerPage
• PostPage

Shared

• The project uses a custom UI library (client/src/shared/ui). All UI components are located in /client/src/shared/ui.
• All assets are located in /client/src/shared/assets: assets.
• All auxiliary development tools, such as hooks, contexts, wrappers, or testing helpers, are located in /client/src/shared/lib: lib.
• The config folder contains configuration files.