https://github.com/theznat/yadro

Тестовое задание для Yadro
https://github.com/theznat/yadro

react rtk typescript

Last synced: about 1 month ago
JSON representation

Тестовое задание для Yadro

• Host: GitHub
• URL: https://github.com/theznat/yadro
• Owner: TheZnat
• Created: 2025-02-19T16:20:03.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-03-13T14:05:07.000Z (over 1 year ago)
• Last Synced: 2025-07-11T11:52:32.159Z (11 months ago)
• Topics: react, rtk, typescript
• Language: TypeScript
• Homepage:
• Size: 705 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Проект: Тестовое задание для Yadro

## 🚀 Команды для запуска

- **`dev`**: Локальная разработка.

  ```bash

  npm run dev

  ```

- **`npm run start`**: Запуск приложения в режиме разработки.

## 📂 Структура проекта

Структура проекта организована в соответствии с подходом **Feature-Sliced Design (FSD)**, чтобы обеспечить модульность, масштабируемость и удобство работы с кодом.

### Основные директории:

- **`app`**  

  Содержит глобальные настройки приложения:

  - **`entities`** - Сущности 

    - **`employee`** - Сущность сотрудника

      - `api` - API запросы

    - **`model `** - обработкой данных сотрудников

     - `thunks.ts` - содержатся асинхронные действия (thunks) для взаимодействия с API. 

  - **`Store`**: Содержит Redux Store и разделение логики на слайсы.

    -  **`data`**: Слайс для хранения данных и управления состоянием, связанным с запросами.

    -  **`filterSlice`**: Слайс, предназначенный для работы с фильтрацией данных. 

  - Основные файлы:

    - `App.tsx`

    - `main.tsx` — точка входа.

    - Стили: `App.css`, `index.css`.

    - Конфигурационные файлы: `vite-env.d.ts`.

- **`assets`**  

  Хранит статические ресурсы, такие как изображения.

- **`features`**  

  Хранит **Stateful Components** (компоненты с логикой), которые реализуют основные функциональности:

- **`page`**  

  Хранит страницы приложения:

  - `HomePage` — Главная страница.

  - `Profile` — Страница пользователя.

  - `Edit` — Форма для редоктирования профиля.

- **`shared`**  

  Общие ресурсы и утилиты:

  - **`validation`** — схема валидации формы.

  - **`types`** — общие типы для типизации проекта.

- **`widgets`**  

  UI-компоненты, которые можно переиспользовать:

---

## 📦 Используемые технологии

- **[Redux Toolkit (RTK)](https://redux-toolkit.js.org/)** — для управления состоянием приложения, включая хранение фильтров и данных. Состояние разделено на два слайса.

- **[SASS](https://sass-lang.com/)** — CSS-препроцессор для удобной стилизации.

- **[TypeScript](https://www.typescriptlang.org/)** — добавляет типизацию для повышения надежности кода.

- **[Vite](https://vitejs.dev/)** — для быстрого и удобного сборщика проекта.

- **[uuid](https://github.com/uuidjs/uuid)** — для генерации уникальных ID (например, для ключей `key` в методе `map` или параметров фильтров).

- **[yup](https://github.com/jquense/yup)** — библиотека для валидации данных форм.

- **[axios](https://axios-http.com/)** — HTTP-клиент для работы с API.

- **[formik](https://formik.org/)** —  библиотека для удобной работы с формами, включая управление состоянием и валидацию.

- **[react-router-dom](https://reactrouter.com/)** — для роутинга в приложении.

- **[classnames](https://github.com/JedWatson/classnames)** — удобное управление классами CSS в React-компонентах.

- **[concurrently](https://www.npmjs.com/package/concurrently)** —  позволяет запускать несколько скриптов параллельно 

- **[json-server](https://github.com/typicode/json-server)** — легковесный фейковый REST API для тестирования клиентской части.