Коммерческий проектAvenue Group

OKKP — внутренняя система контроля качества

Ведущий разработчик проекта · 2025

Внутренняя веб-система контроля качества для сети из 9 автопарков. Я спроектировал архитектуру и API и написал большую часть кода: нарушения и штрафы, сотрудники, электронный архив и выгрузка в Excel.

Закрытый код · NDA

Фронтенд

React + TypeScript · SPA · Vite · Tailwind
REST · JWT

API

Node.js / Express 5 · REST API
  • Авторизация · JWT
  • Сотрудники
  • Нарушения
  • Обзвон
  • Архив
документы · медиа

Данные

MongoDB · Mongoose
Cloudinary · медиа · локальный откат
OKKP — внутренняя система контроля качества — превью
Код закрыт (NDA), поэтому здесь схема архитектуры, которую я построил.Открыть в полном размере

Задача

Сети из 9 автопарков Avenue Group нужна была единая внутренняя система: учёт нарушений и штрафов, данные сотрудников и отчёты без участия разработчика.

Решение

SPA на React + TypeScript поверх API на Node.js / Express и MongoDB: серверная фильтрация, архив документов в Cloudinary, JWT-аутентификация и выгрузка в Excel в браузере; деплой через Docker Compose, CI на GitHub Actions.

Результат

Развёрнута на Linux-сервере компании; сотрудники сами фильтруют нарушения и выгружают отчёты в Excel.

Обзор

В Avenue Group я был ведущим разработчиком OKKP — внутренней веб-системы контроля качества для сети из 9 автопарков; в команде было три человека. Я спроектировал архитектуру и API и написал большую часть кода (≈177 из 183 коммитов 2025 года в трёх репозиториях проекта).

Стек: SPA на React 18 + TypeScript (Vite, Tailwind CSS), REST API на Node.js / Express 5 и MongoDB (Mongoose). Основа — модуль нарушений и штрафов: серверная фильтрация по ФИО, отделу, типу, статусу, парку и периоду, пагинация, вложения фото и видео, удаление с подтверждением паролем. Вокруг него — модули сотрудников, обзвона водителей, электронного архива документов (Cloudinary с откатом на локальный диск) и внутренних уведомлений. Вход — JWT (bcrypt), по email или телефону.

На главной странице — KPI-карточки по паркам, а нарушения, сотрудники, обзвон водителей и сводка по паркам выгружаются в Excel прямо в браузере. Деплой — Docker Compose (MongoDB + API) на Linux-сервере за reverse proxy, CI — на GitHub Actions.

Что делает

  • Модуль нарушений и штрафов: серверная фильтрация (ФИО, отдел, тип, статус, парк, период) и пагинация
  • Карточки сотрудников с загрузкой фото, договоров и анкет; обзвон водителей; внутренние уведомления
  • Электронный архив документов в Cloudinary с откатом на локальный диск
  • KPI-карточки по паркам и экспорт в Excel прямо в браузере (SheetJS)

Что дальше

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

Открыт к предложениям: офис или гибрид в Москве, либо удалённо; полная занятость или контракт. Отвечаю в течение 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