Frontend Engineer
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 проблем
"Код має бути написаний для людей, а не для машин. Машини лише виконують його."
Гарольд Абельсон