Веб-інтерфейс для Circular Economy
Розробив фронтенд-частину як Next.js (React) веб-застосунок, який працює як клієнт до бекенду: відображає дані, будує графіки, веде користувача через сценарії/форми, та віддає результат у вигляді звітів (включно з PDF). Стек підібраний під задачі “багато UI, багато станів, багато аналітики” — без лагів і без болю.
Технології та бібліотеки (що використовував)
Next.js 14 + React 18 — основа SPA/SSR застосунку, стандартні скрипти dev/build/start/lint.
UI/Design System:
Chakra UI (+ emotion/*) для швидкої збірки акуратного інтерфейсу та компонентів.
PrimeReact для готових складних компонентів (таблиці/форми/віджети).
API layer: Axios для запитів до бекенду + централізована робота з відповідями/помилками.
State management: Zustand для керування станом (легкий, швидкий, без “Redux-епопеї”).
Мультимовність (i18n): i18next + next-i18next + react-i18next, а також утиліти для визначення/матчингу локалі.
Візуалізація та аналітика:
Chart.js + react-chartjs-2 + chartjs-plugin-datalabels для графіків і підписів значень.
CanvasJS React Charts як додатковий інструмент для графіків/діаграм.
PDF / Export
Технології та бібліотеки (що використовував)
Next.js 14 + React 18 — основа SPA/SSR застосунку, стандартні скрипти dev/build/start/lint.
UI/Design System:
Chakra UI (+ emotion/*) для швидкої збірки акуратного інтерфейсу та компонентів.
PrimeReact для готових складних компонентів (таблиці/форми/віджети).
API layer: Axios для запитів до бекенду + централізована робота з відповідями/помилками.
State management: Zustand для керування станом (легкий, швидкий, без “Redux-епопеї”).
Мультимовність (i18n): i18next + next-i18next + react-i18next, а також утиліти для визначення/матчингу локалі.
Візуалізація та аналітика:
Chart.js + react-chartjs-2 + chartjs-plugin-datalabels для графіків і підписів значень.
CanvasJS React Charts як додатковий інструмент для графіків/діаграм.
PDF / Export