Digitaldam

1   Опис проєкту

Комплексна система монiторингу та аналiзу радiосигналiв з веб-iнтерфейсом для керування обладнанням, геолокацiєю та вiзуалiзацiєю даних в реальному часi.

Iнтерфейсна частина проєкту побудована як кiлька Single Page Applications (SPA) з використанням сучасного стеку технологiй React та TypeScript. Застосунок забезпечує взаємодiю з браузера з сервером по WebSocket, управлiння локальним станом через Redux, та мiстить модулi для роботи з картами, графiками, формами та журналами подiй.

2     Вимоги до кандидата

2.1     Технiчнi навички

2.1.1     Основний стек

• React - глибоке розумiння функцiональних компонентiв, hooks, lifecycle

• TypeScript - впевнене володiння типiзацiєю, generics, advanced types

• React Router - маршрутизацiя, nested routes, protected routes

• Redux Toolkit - управлiння глобальним станом застосунку

• HTML5/CSS3 - семантична верстка, адаптивнiсть, accessibility

2.1.2     Стилiзацiя та UI компоненти

• Tailwind CSS - utility-first пiдхiд до стилiзацiї

• Radix UI - робота з unstyled accessible компонентами

• shadcn/ui -використання та кастомiзацiя готових компонентiв

• PostCSS та Sass - препроцесори стилiв

2.1.3     Форми та валiдацiя

• React Hook Form - керування формами

• Zod - schema validation

2.1.4     Iнструменти розробки

• Git - version control, branching strategies

• Webpack 5 - конфiгурацiя, оптимiзацiя, code splitting

2.1.5.     Оптимiзацiя продуктивностi

• Аналiз алгоритмiв - оцiнка складностi алгоритмiв (Big O), вибiр оптимальних структур даних

• Профiлювання - вмiння використовувати Chrome DevTools Performance, React DevTools Profiler

• Пошук вузьких мiсць - навички виявлення performance bottlenecks пiд час code review та debugging

• React оптимiзацiї - useMemo, useCallback, React.memo, code splitting, lazy loading

• Rendering optimization - вiртуалiзацiя спискiв, мiнiмiзацiя re-renders, batching updates

2.1.6    Кешування та персистентнiсть даних

• RTK Query - data fetching, caching strategies, invalidation policies

• IndexedDB - робота з браузерним сховищем для великих обсягiв даних

• Cache strategies - stale-while-revalidate, cache invalidation, TTL policies

• LocalStorage/SessionStorage - використання для session persistence

• Оптимiстичнi оновлення - optimistic UI updates, rollback strategies

2.2    Бажанi навички

• WebSocket - real-time комунiкацiя з сервером

• Leaflet - робота з картами та географiчними даними

• uPlot - вiзуалiзацiя графiкiв та часових рядiв

• CASL - role-based access control (RBAC)

• React DnD або iншi drag-and-drop бiблiотеки

• Видiленi шрифти - робота з custom fonts (проєкт використовує UAF Sans)

• Linux/macOS - досвiд розробки на Unix-подiбних системах

2.3     Soft Skills

• Здатнiсть читати та розумiти чужий код

• Уважнiсть до деталей та якостi коду

• Самостiйнiсть у прийняттi технiчних рiшень

• Комунiкативнi навички для роботи в командi

• Вмiння писати чисту, пiдтримувану документацiю

2.4    Мовнi вимоги

• Українська - вiльне володiння

• Англiйська - технiчний рiвень для читання документацiї

3    Обовʼязки

3.1     Пiдтримка iснуючого коду

• Виправлення багiв у UI компонентах

• Рефакторинг коду для покращення читабельностi та продуктивностi

• Оптимiзацiя продуктивностi застосунку (bundle size, rendering, algorithm complexity)

• Профiлювання та усунення performance bottlenecks

• Налаштування кешування та data persistence стратегiй

• Пiдтримка сумiсностi з рiзними браузерами

• Code review з фокусом на performance та best practices

3.2     Розробка нового функцiоналу

• Реалiзацiя нових UI компонентiв вiдповiдно до дизайну

• Iнтеграцiя з backend API через WebSocket

• Створення нових сторiнок та модулiв системи

• Iмплементацiя складних форм з валiдацiєю

• Розробка iнтерактивних вiзуалiзацiй (карти, графiки)

3.3     Робота з архiтектурою

• Планування структури нових модулiв

• Проєктування переповторно використовуваних компонентiв

• Управлiння станом застосунку через Redux

• Забезпечення type safety через TypeScript

• Iмплементацiя роль-базованого доступу (RBAC)

3.4     Документацiя та тестування

• Написання технiчної документацiї

• Покриття коду тестами (unit, integration)

• Документування компонентiв та API

• Створення style guides для компонентiв

4     Як подати заявку

4.1    Що надiслати

1. Резюме з описом досвiду роботи з React та TypeScript

2. Посилання на GitHub профiль або portfolio

3. Приклади кодової бази (якщо є open-source contribution)

4. Cover letter з описом:

• Чому вас цiкавить цей проєкт

• Ваш досвiд з технологiями зi стеку

• Що ви можете привнести в проєкт

4.2    Процес вiдбору

1. Перегляд резюме - оцiнка технiчного досвiду

2. Технiчне iнтервʼю - обговорення досвiду та пiдходiв

3. Code review - розгляд вашого коду або test task

4. Фiнальна зустрiч - обговорення деталей та очiкувань

5    Додаткова iнформацiя

5.1    Кориснi посилання для пiдготовки

React Documentation - https://react.dev/

TypeScript Documentation - https://www.typescriptlang.org/docs/

Redux Toolkit Documentation - https://redux-toolkit.js.org/

Tailwind CSS Documentation - https://tailwindcss.com/docs/installation/using-vite

shadcn/ui Documentation - https://ui.shadcn.com/

Leaflet Documentation - https://leafletjs.com/

5.2    Питання для самоперевiрки

Перед тим як подавати заявку, подумайте над цими питаннями:

1. Як би ви органiзували state management для real-time даних?

2. Як оптимiзувати rendering великих спискiв у React?

3. Що таке WebSocket i як його iнтегрувати з Redux?

4. Як забезпечити type safety при роботi з WebSocket messages?

5. Якi пiдходи до code splitting ви знаєте?

6. Як би ви реалiзували role-based access control у React?

47. Що таке controlled vs uncontrolled components у React Hook Form?

8. Як визначити складнiсть алгоритму i де це критично важливо у frontend?

9. Як ви шукаєте performance bottlenecks у React застосунку?

10. Яка рiзниця мiж useMemo та useCallback i коли їх використовувати?

11. Якi стратегiї кешування ви знаєте i коли їх застосовувати?

12. Як працює RTK Query та якi переваги вiн дає порiвняно з ручним управлiнням cache?

13. Коли доцiльно використовувати IndexedDB замiсть LocalStorage?

14. Що таке оптимiстичнi оновлення i як їх реалiзувати безпечно?

5.3    Очiкування вiд кандидата

• Готовнiсть швидко вникнути в iснуючу кодову базу

• Здатнiсть працювати самостiйно та приймати рiшення

• Бажання розвиватися та вивчати новi технологiї

• Вiдповiдальнiсть за якiсть коду

• Проактивнiсть у вирiшеннi проблем

"Код має бути написаний для людей, а не для машин. Машини лише виконують його."

Гарольд Абельсон