Коммерческий проектФриланс

KPI-дашборды для клиента

Фриланс, клиентский проект · дашборды на React

Интерактивные KPI-дашборды для клиента на фрилансе: данные из нескольких источников сведены за единым API на Node.js.

Закрытый код · принадлежит клиенту

Данные

Несколько источников

API

Node.js · единый REST-интерфейс

UI

React · KPI-дашборды · фильтры
KPI-дашборды для клиента — превью
Код принадлежит клиенту, поэтому здесь схема архитектуры, которую я построил.Открыть в полном размере

Задача

Решения принимались по статичным выгрузкам и таблицам, поэтому тренды замечали поздно.

Решение

Дашборды на React с фильтруемыми KPI и графиками трендов; API на Node.js сводит несколько источников данных.

Результат

Фильтруемые KPI в одном месте вместо отчётов, которые обновляют вручную.

Обзор

Клиент на фрилансе работал со статичными выгрузками и разовыми таблицами, поэтому тренды оставались незаметными, пока кто-нибудь не обновит отчёт вручную. Нужны были интерактивные дашборды, в которых легко читать KPI.

Я сделал фронтенд на React с фильтруемыми KPI-модулями и графиками трендов и API на Node.js, который сводит несколько источников данных в один REST-интерфейс. Код принадлежит клиенту, поэтому здесь показана схема архитектуры.

Что делает

  • Фильтруемые KPI-модули вместо статичных выгрузок
  • API на Node.js, который сводит несколько источников данных
  • Графики трендов, на которых изменения видны сразу

Что дальше

Ищете full-⁠stack, Python- или AI-⁠разработчика — или нужно сделать что-то похожее? Давайте обсудим.

Готов приступить сразу: офис или гибрид в Москве, либо удалённо; полная занятость или контракт. Отвечаю в течение 48 часов, в Telegram — быстрее.

Связаться TelegramСкачать резюме

Альхассан Альфарран.

© 2026 · Спроектировал и сделал сам. Стек сайта: Next.js, Tailwind и Framer Motion.

Моё местное время: · Москва

Заметки
Как устроен этот сайт

Стек

Next.js (App Router) и React, стили на Tailwind CSS, анимации на Framer Motion. Форма обратной связи отправляет письма через Resend, сайт размещён на Vercel.

Три языка, одна вёрстка

У английской, русской и арабской версий свои адреса (/en, /ru, /ar), а собраны они из одних и тех же компонентов. В вёрстке используются логические CSS-свойства (start/end вместо left/right), поэтому арабская версия отражается справа налево без отдельных стилей. Сервер отдаёт каждую страницу сразу с нужным языком и направлением текста, так что после загрузки ничего не перескакивает, а арабский шрифт загружается, только когда на экране есть арабский текст.

Скорость и доступность

Секции ниже первого экрана не отрисовываются, пока страница не прокручена до них, а быстрое меню загружается при первом открытии. Всем можно пользоваться с клавиатуры — есть ссылка для перехода к содержимому и заметный фокус, — а анимации отключаются, если в системе включено уменьшение движения.

Исходный код на GitHub