18 авг в 22:18

Как мы за 2 месяца сделали систему складского учёта на Next.js + PostgreSQL в условиях жёсткого дедлайна

Простой

Ожидает приглашения

Контекст

В декабре 2022 к нам обратился клиент с задачей: создать систему складского учёта, которая полностью заменит существующее ПО.

Проблема: с 1 февраля 2023 года старое ПО отзывалось из-за санкций, и продолжить его использование было невозможно. Перенести релиз было нельзя.

Ограничения проекта

Старт: 1 декабря. Дедлайн: 1 февраля — 2 месяца на полный цикл.
Доступа к старому ПО не было, так как оно было установлено на локальном ПК клиента и содержало только продакшн-данные, к которым клиент не хотел давать удалённый доступ.
Функционал приходилось воссоздавать по записям Zoom-созвонов с клиентом (2–3 часа демонстраций).
Требовалось субъективно «приятное» поведение интерфейсов и элементов на уровне привычных коммерческих решений.
Команда: 1 fullstack-разработчик и 1 менеджер.
Разработка велась до появления GitHub Copilot и других помощников — весь код писался вручную.

Требования к системе

Полная замена старого ПО по функционалу.
Возможность экспорта данных в xlsx, PDF, JPEG.
Поддержка работы с большим количеством связанных сущностей: товары, клиенты, продажи, касса, чеки, долги.
Простота интерфейса, оптимизация под сотрудников склада и бухгалтерии.
Возможность масштабирования и интеграций в будущем.

Архитектура и стек

Frontend

Next.js 14 (React 18) — SSR и CSR в зависимости от сценария.
Material UI + Material React Table — быстрый UI и унификация компонентов.
Redux Toolkit + redux-persist — глобальное состояние и оффлайн-сохранение.

Backend

Node.js (API routes Next.js).
Prisma ORM — работа с PostgreSQL и миграциями.

База данных

PostgreSQL (Vercel Postgres для разработки, DigitalOcean Managed PostgreSQL в продакшне).

PWA и оффлайн

@ducanh2912/next-pwa + Workbox (routing, caching, strategies).

Работа с файлами

exceljs — экспорт Excel.
jsPDF + jspdf-autotable — экспорт PDF.
react-pdf — рендер PDF-документов.

Особенности реализации

Воссоздание логики без доступа к старому ПО
- Весь анализ велся по видеозаписям Zoom, где клиент демонстрировал работу старой системы.
- Детали фиксировались в задачах, формировался backlog по модулям.
Оптимизация под большие объёмы данных
- Кастомизация Material React Table под отрисовку тысяч строк без лагов.
- Виртуализация таблиц и серверная фильтрация/поиск.
Экспорт данных
- Excel (xlsx) — для работы с внешними системами учёта.
- PDF — для формирования отчётности.
- JPEG — для визуальной фиксации данных.
PWA-режим
- Работа при нестабильном интернете.
- Кэширование часто используемых данных и страниц.

Пример API-метода на Next.js API routes с Prisma

// pages/api/products.ts
import { prisma } from '../../lib/prisma';

export default async function handler(req, res) {
  if (req.method === 'GET') {
    const products = await prisma.product.findMany({
      include: { category: true, stock: true }
    });
    res.status(200).json(products);
  }

  if (req.method === 'POST') {
    const { name, price, categoryId } = req.body;
    const product = await prisma.product.create({
      data: { name, price, categoryId }
    });
    res.status(201).json(product);
  }
}

🛠 Технические грабли и как мы их обошли

1. Работа без исходного кода и доступа к БД

Проблема: невозможно было протестировать логику и структуру старой системы напрямую.
Решение: делали скриншоты и раскадровки из Zoom-записей, выстраивали схемы взаимодействия сущностей в Miro.

2. Воссоздание UX без возможности сравнить с оригиналом

Проблема: субъективные ожидания заказчика по скорости и удобству.
Решение: показывали промежуточные версии каждые несколько дней, собирали обратную связь и корректировали на лету.

3. Оптимизация больших таблиц

Проблема: стандартная отрисовка таблиц Material React Table замедлялась при тысячах строк.
Решение: добавили виртуализацию, отрисовывали только видимую часть, вынесли фильтрацию и сортировку на сервер.

4. Жёсткие сроки

Проблема: всего 2 месяца на полный релиз.
Решение: переиспользование UI-компонентов, готовые библиотеки для экспорта файлов и PWA, отказ от «лишних» фич.

Результаты проекта

Запуск строго в срок — 1 февраля.
2 года стабильной работы без критичных инцидентов.
Полное покрытие затрат на сторонние сервисы (Vercel, хостинг) в рамках бюджета разработки.
Отсутствие постоянной поддержки за счёт простой архитектуры.

Что можно улучшить сегодня

С современными инструментами (Copilot, автогенерация кода, boilerplate-проекты) этот проект можно реализовать за 3–4 недели при неизменном ТЗ и отсутствии интеграций.
Генерация CRUD-модулей из схемы Prisma.
Нагрузочное тестирование ещё до релиза.

Выводы

Даже без доступа к исходному ПО можно воссоздать систему, если наладить чёткий процесс получения информации.
Next.js + PostgreSQL — отличная пара для корпоративных PWA.
Минимальная команда при чётком фокусе способна за сжатые сроки создать стабильный продукт, который будет работать годами.

Хабы: