Рейтинг
64
Отзывы
Профессионализм
-/10
Коммуникация
- /10
Город
Астрахань
Опыт работы
5 лет
На сайте с
2017 года
Юридический статус
Самозанятый

Fullstack-приложение для кафе «Шашлычный мир»: мобильное приложение на React Native, веб-панель администратора на Next.js, REST API на NestJS с онлайн-оплатой через ЮKassa.

Используемые навыки API Nest.js Next.js PostgreSQL React Native

Описание

Клиент — кафе «Шашлычный мир» — обратился с задачей создать цифровую экосистему для приёма онлайн-заказов на доставку.

Исходная ситуация: бизнес работал без онлайн-присутствия — заказы принимались только по телефону, что ограничивало охват и создавало нагрузку на персонал.

Поставленные цели:

Дать клиентам возможность оформлять заказы 24/7 без звонка
Автоматизировать приём и обработку заказов
Подключить онлайн-оплату
Запустить программу лояльности для удержания постоянных клиентов
Охватить аудиторию как через браузер, так и через мобильное приложение
Что было разработано:

Полноценный fullstack-продукт из трёх частей:

Мобильное приложение (React Native / Expo) — каталог блюд, корзина, оформление заказа с выбором адреса доставки через карту, история заказов, профиль пользователя с бонусным счётом.

Веб-сайт (Next.js) — зеркало функциональности мобильного приложения для браузерной аудитории, с адаптивным дизайном и единой авторизацией.

REST API (NestJS + PostgreSQL) — единый бэкенд для обоих клиентов: авторизация по SMS (OTP), управление меню и категориями, обработка заказов, интеграция с платёжной системой ЮKassa, программа лояльности (BRONZE / SILVER / GOLD / PLATINUM).

Безопасность реализована по стандартам OWASP Top 10: JWT с access-токеном в памяти и refresh-токеном в httpOnly cookie, rate limiting на авторизацию, валидация данных на всех уровнях.

Решение

Разработка велась по принципу единой экосистемы: один бэкенд обслуживает и мобильное приложение, и веб-сайт — единая авторизация, единый профиль, единое состояние заказов.

Бэкенд (NestJS + PostgreSQL + Prisma)

Спроектировал и реализовал REST API с нуля. Структура БД охватывает каталог (категории, продукты, галерея), пользователей, адреса доставки, заказы и программу лояльности. Авторизация построена на SMS OTP — пользователь вводит номер телефона, получает код, без паролей. JWT-схема: короткоживущий access-токен хранится в памяти на клиенте, refresh-токен — в httpOnly cookie (защита от XSS и CSRF). Реализовал rate limiting на эндпоинтах авторизации против brute force. Подключил платёжный шлюз ЮKassa: создание платежей, обработка webhook-уведомлений, автоматическое начисление бонусов после успешной оплаты.

Мобильное приложение (React Native + Expo)

Приложение ориентировано исключительно на доставку. Реализовал: каталог с категориями и поиском, карточки продуктов, корзину с управлением количеством, оформление заказа через bottom sheet (без перехода на отдельный экран). Адрес доставки выбирается на карте с геокодированием через Nominatim — пользователь ставит пин, система определяет улицу и дом. Валидация типа здания исключает некорректные адреса. Профиль включает историю заказов, сохранённые адреса и бонусный счёт с отображением уровня лояльности.

UX построен по стандартам 2026: анимации через Reanimated 3, skeleton-экраны вместо спиннеров, haptic feedback при ключевых действиях (добавление в корзину, подтверждение оплаты, ошибки), blur-эффекты на навбаре. Единая дизайн-система через tokens.ts — цвета, отступы (4px grid), радиусы, типографика.

Веб-сайт (Next.js 14 + Tailwind CSS + Redux Toolkit)

App Router, серверные компоненты где возможно, клиентские — для интерактивных частей. Реализовал модальную авторизацию с OTP-флоу, профиль пользователя с управлением адресами через карту Nominatim, историю заказов, checkout с выбором из сохранённых адресов. Интеграция с той же ЮKassa через редирект на страницу оплаты и возврат с результатом.

Панель администратора

Отдельный защищённый раздел для управления меню: добавление/редактирование категорий и блюд, загрузка изображений, управление активностью позиций. Доступ только для пользователей с ролью ADMIN.

Архитектура и качество кода

Весь проект следует Feature-Sliced Design — чёткое разделение на слои (entities, features, widgets, pages). Принцип DRY соблюдается через общие утилиты, хуки и типы. Развёртывание автоматизировано: бэкенд на VPS под управлением PM2 + Nginx как reverse proxy, фронтенд деплоится отдельно, мобильное приложение собирается через EAS (Expo Application Services).

Результат

оздана полноценная цифровая экосистема для приёма заказов на доставку, состоящая из трёх взаимосвязанных продуктов, работающих на едином бэкенде.

Что получилось в итоге:

Мобильное приложение собрано через EAS и готово к публикации в RuStore (подготовлены материалы для модерации: описание, скриншоты, политика конфиденциальности и пользовательское соглашение на русском языке). Веб-сайт развёрнут и доступен клиентам через браузер. Бэкенд работает на VPS под управлением PM2 с автоматическим перезапуском при сбоях, Nginx обеспечивает проксирование и SSL.

Практическое применение:

Клиент получил инструмент, который полностью заменяет приём заказов по телефону:

Покупатель открывает приложение или сайт, выбирает блюда, указывает адрес на карте и оплачивает онлайн через ЮKassa — без звонка и ожидания ответа оператора.
После успешной оплаты бонусы автоматически зачисляются на счёт пользователя — программа лояльности стимулирует повторные заказы.
Администратор через защищённую панель самостоятельно управляет меню: добавляет новые блюда, меняет цены, загружает фотографии, скрывает временно недоступные позиции — без участия разработчика.
История заказов доступна каждому пользователю в профиле — повторный заказ любимых блюд в несколько касаний.
Технический результат:

Единая авторизация по SMS работает одинаково на сайте и в приложении — пользователь заводит один аккаунт и использует его везде.
Безопасность реализована без компромиссов: токены защищены от XSS и CSRF, платёжные данные не хранятся на сервере (только токен ЮKassa), все входные данные валидируются на каждом уровне.
Кодовая база структурирована по FSD — новые функции добавляются изолированно, не затрагивая существующий код, что упрощает дальнейшую поддержку и развитие продукта.

Оценили проект:

Другие проекты

Все проекты →
Веб-разработка и IT Фронтенд корпоративной PDM-системы управления инженерными данными: версионирование документов, ролевая модель доступа (RBAC), конструктор запросов, 3D-просмотрщик. React 18 + TypeS
Фронтенд корпоративной PDM-системы управления инженерными данными: версионирование документов, ролевая модель доступа (RBAC), конструктор запросов, 3D-просмотрщик. React 18 + TypeS
52
Веб-разработка и IT Разработал интерактивную аналитическую платформу «Технологический радар» для крупного российского банка — React/TypeScript, D3.js, 4 модуля, интеграция с 5 REST API
Разработал интерактивную аналитическую платформу «Технологический радар» для крупного российского банка — React/TypeScript, D3.js, 4 модуля, интеграция с 5 REST API
63
Веб-разработка и IT Разработал корпоративный сайт для производителя окон: мультистраничный каталог, квиз-подбор, портфолио-галерея, форма заказа, отзывы и административная панель.
Разработал корпоративный сайт для производителя окон: мультистраничный каталог, квиз-подбор, портфолио-галерея, форма заказа, отзывы и административная панель.
37