Все проекты
Клиентские проекты в продакшне

Skipti Маркетплейс аренды и курьерское мобильное приложение на React Native для доставки его заказов.

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

Главная страница Skipti: платформа циркулярной экономики для аренды вещей с доставкой

Клиент / проект

Skipti

Отрасль

Маркетплейс — аренда вещей с доставкой

Мой вклад

  • Фронтенд маркетплейса (React
  • TypeScript)
  • Курьерское мобильное приложение с нуля (React Native)
  • Миграция Redux → Redux Toolkit
  • Интеграция платежей Stripe
  • Админ-панель и разделение админской и клиентской частей
  • Код-ревью и менторство
Главная страница маркетплейса Skipti: аренда вещей с доставкой до двери

О проекте

Skipti — маркетплейс аренды: клиенты заказывают вещи, курьеры их доставляют. Проект создавался в Volo командой примерно из десяти инженеров. Моя работа здесь охватывает две связанные части: фронтенд самого маркетплейса и мобильное приложение, созданное с нуля для курьеров, которые выполняют его заказы.

Технологии: React, TypeScript, React Native, Redux Toolkit, Stripe, REST APIs

Задача

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

Решение

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

Со стороны мобильного приложения: создал курьерское приложение с нуля на React Native и TypeScript, предварительно проработав требования напрямую с заказчиком. Оно покрывало весь рабочий цикл водителя — управление заказами, статусы доставки, профиль водителя, карты и геолокацию, push-уведомления — и вышло в App Store и Google Play, причём курьеры получали его по ссылке, а не через публичную страницу в магазине.

Ключевые возможности

Каталог аренды с разделением по категориям, посуточными ценами и оценками клиентов для каждой вещи.

Каталог Skipti: аренда фото- и видеотехники с посуточными ценами и оценками

Страницы товаров с выбором дат аренды и проверкой зоны доставки перед оформлением заказа.

Страница аренды дрона DJI Mavic Air в Skipti с посуточной ценой и выбором дат

Технический подход

  • Фронтенд маркетплейса: React и TypeScript — от отдельных компонентов до целых страниц.
  • Управление состоянием: миграция с обычного Redux на Redux Toolkit с соответствующей переработкой архитектуры фронтенда.
  • Платежи: работа над интеграцией Stripe, включая сценарии возвратов и списаний.
  • Админка: значительные части админ-панели и разделение админской и клиентской частей через маршруты с аутентификацией.
  • Мобильное приложение: курьерское приложение на React Native и TypeScript — заказы, статусы, профиль водителя, карты и геолокация, push-уведомления — на том же REST API, что и маркетплейс.
  • Работа с командой: планирование функционала, обсуждение технической реализуемости с другими разработчиками (фронтенд и бэкенд) и код-ревью.

Сложности

Требования, которые противоречили устройству платежей

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

Миграция управления состоянием в живом продукте

переход с обычного Redux на Redux Toolkit требовал перестраивать архитектуру фронтенда параллельно с разработкой функционала, а не останавливать продукт ради переписывания.

Разделение админского и клиентского кода

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

Разработка для пользователей, которых не видишь

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

Моя роль

Пришёл в проект Junior React-разработчиком и вырос до Middle-инженера, взявшего на себя часть обязанностей по руководству фронтендом.

Лично отвечал за: курьерское приложение на React Native, созданное с нуля после обсуждения требований с заказчиком; миграцию Redux → Redux Toolkit и связанную с ней переработку архитектуры; разделение админской и клиентской частей; значительные части оформления заказа, заказов, платежей, админ-панели и карты.

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

Результат

Skipti — проект, на котором работа сместилась от реализации функционала к его формированию. Начиналось всё с отдельных компонентов, а закончилось мобильным приложением, за которое я отвечал от начала до конца, миграцией управления состоянием через весь фронтенд, двумя junior-разработчиками, которых я менторил, и достаточным весом в команде, чтобы возражать, когда требования не выдерживали технической проверки.

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

Избранные работы: .NET, full-stack SaaS, AI-интеграции, инструменты для разработчиков, React, React Native и не только.

Связаться