Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ashenoooone/aspirity-test
Личный кабинет сотрудника с тремя вкладками: "Основная информация", "Отпуска" и "Оборудование". Реализованы функции редактирования профиля, отображения графиков отпусков и управления оборудованием. Построен с использованием архитектуры FSD и современных технологий (React, Next.js, Zustand).
https://github.com/ashenoooone/aspirity-test
app-router charts nextjs react typescript zustand
Last synced: about 3 hours ago
JSON representation
Личный кабинет сотрудника с тремя вкладками: "Основная информация", "Отпуска" и "Оборудование". Реализованы функции редактирования профиля, отображения графиков отпусков и управления оборудованием. Построен с использованием архитектуры FSD и современных технологий (React, Next.js, Zustand).
- Host: GitHub
- URL: https://github.com/ashenoooone/aspirity-test
- Owner: ashenoooone
- Created: 2024-06-25T11:54:38.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-03T09:25:51.000Z (7 months ago)
- Last Synced: 2024-11-15T10:22:48.244Z (2 months ago)
- Topics: app-router, charts, nextjs, react, typescript, zustand
- Language: TypeScript
- Homepage:
- Size: 7.32 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Личный кабинет сотрудника
## О проекте
Этот проект представляет собой личный кабинет сотрудника, состоящий из трех основных вкладок: "Основная информация", "
Отпуска" и "Оборудование". Вкладка "Основная информация" позволяет пользователю просматривать и редактировать личные
данные, загружать страны из открытого API и отображать адаптивные элементы, зависящие от введенных значений. Вкладка "
Отпуска" предоставляет информацию о взятых отпусках в виде графиков и таблиц, а также позволяет загружать полные данные
по запросу. Вкладка "Оборудование" предназначена для управления и учета оборудования, выданного сотруднику. Проект
построен с использованием архитектуры FSD и современных технологий, таких как React, Next.js и Zustand.
## Запуск проекта
Качаем зависимости
```bash
npm i
```
Запускаем в дев режиме
```bash
npm run dev
```
# Стек технологий
- @siberiacancode/reactuse - хуки
- clsx - для удобного вз-ия с классами
- next - некст
- react-hook-form - для работы с формами
- recharts - для графика
- zustand - для управления состоянием
- eslint - правила для кода
- prettier - код стайл
- tailwindcss - стили
- typescript - тс
## Архитектура
При построении приложения ориентирвоался на FSD. Однако в целях экономия времени некоторые моменты игнорировал.
Использовал только 4 слоя
1. app
2. entities
3. shared
4. widgets
Каждый слой состоит из слайсов. Например
```
entities ( слой )
└ user ( слайс )
└ ui
└ ... юай компоненты
└ types.ts - типы для сущности
└ store.ts - стор для сущности
└ index.ts (паблик апи для слайса)
```
### shared
Cлой кода общего использования
`shared/assets` - место, куда складывались все изображения\svg
`shared/utils` - сторонние функции, в рамках проекта там хранится функция для создания селекторов для сторов
`shared/ui` - общие юай компоненты для всего приложения
## Что реализовано?
### Вкладка "ОСНОВНАЯ ИНФОРМАЦИЯ" профиля
- 😎 Страница сделана как в макете
- 📑 Все формы сделаны (react-hook-form), сделаны под них модалки
- 🌐 Подгрузка стран через открытое API сделано, подставляется в селект через zustand-стор (в идеале было сделать
асинхронную подгрузку при открытии селекта + виртуализацию для селекта, но не успел)
- 📊 Элементы, которые зависят от значений (цвет % загрузки пользователя меняется в зависимости от процента)
- 📱 Адаптив
- 🌍 Не сделал подгрузку городов по странам, не дождался доступа к API (открытого, без ключа, не нашел)
- 📝 Не сделал реакт-маски для инпутов
### Вкладка "ОТПУСКА" профиля
- 😎 Страница сделана как в макете (почти)
- 📊 Сделал отображение информации с бекенда в виде графика
- 📋 Таблица сделана через колонки, как указано в макете
- 📈 В таблице показываются первые 3 строки с бека, при открытии модалки показываются все, что пришло с бека (в идеале
было сделать, что при открытии модалки идет запрос на получение всех отпусков юзера, но было мало времени)
- 🎨 Не очень красиво сделал ховер эффекты в статистике
### Вкладка "ОБОРУДОВАНИЕ" профиля
- 😎 Страница сделана как в макете
### Общее
- Реализованы следующие компоненты: avatar, avatar-group, box, button, input, modal, page, portal, select (единственный
компонент, при создании которого использовался headless компонент), table, tabs, tooltip, typography
- Приложение сделано по архитектуре FSD