Самокат — клон фронтенда сервиса быстрой доставки продуктов. Каталог, корзина, выбор адреса с картой, категории с подкатегориями — всё как в оригинале, только без бэкенда.
Pixel-perfect воспроизведение веб-интерфейса сервиса «Самокат» — российского сервиса ультрабыстрой доставки продуктов. Реализована клиентская часть: каталог товаров с иерархической навигацией по категориям, корзина с анимированными счётчиками, модалка выбора адреса с интерактивной картой 2GIS, а также все сопутствующие UI-элементы.
Каталог — навигация по 9+ категориям с подкатегориями, карточки товаров с ценами и бейджами, комбо-наборы со скидками.
Корзина — превью в правом сайдбаре, счётчик количества с анимацией, минимальная сумма заказа, отображение времени доставки.
Адрес — модалка с интерактивной картой (2GIS MapGL API), поддержка 10+ городов, drawer управления адресами.
UI — хедер с поиском, хлебные крошки, чипсы-фильтры, cookie-баннер, футер со ссылками на приложения и соцсети.
| Слой | Технология |
|---|---|
| Фреймворк | React 19, React Router 7 |
| Язык | TypeScript 5.9 (strict) |
| Сборка | Vite 8 |
| Стили | CSS + CSS Variables (дизайн-токены) |
| Карта | 2GIS MapGL API |
| Линтинг | ESLint 9, typescript-eslint |
$ npm install
$ npm run devПосле запуска открыть в браузере:
http://localhost:5173
$ npm run build # Сборка для продакшена
$ npm run preview # Превью продакшен-сборки
$ npm run lint # Линтингsrc/
├── components/ # UI-компоненты
│ ├── Header/ # Шапка с поиском
│ ├── ProductCard/ # Карточка товара
│ ├── CartPreview/ # Превью корзины
│ ├── CatalogTree/ # Дерево категорий
│ ├── CategorySection/ # Секция категории
│ ├── ComboSetCard/ # Карточка комбо-набора
│ ├── AddressModal/ # Модалка адреса с картой
│ ├── AddressDrawer/ # Drawer адресов
│ ├── MapView/ # Интеграция 2GIS
│ ├── Footer/ # Подвал
│ └── ... # Breadcrumbs, Chip, CookieBanner и др.
├── pages/
│ ├── CatalogPage/ # Главная страница каталога
│ └── MaintenancePage/ # Страница техработ
├── data/
│ ├── categories.ts # Категории и подкатегории
│ └── products.ts # Товары и комбо-наборы
├── styles/
│ └── variables.css # Дизайн-токены
├── App.tsx # Роутинг
└── main.tsx # Точка входа
Дисклеймер
Данный проект создан исключительно в образовательных целях как пет-проект для отработки навыков фронтенд-разработки. Проект не преследует коммерческих целей, не предназначен для публичного использования и не является конкурирующим продуктом. Все права на бренд «Самокат», логотип, дизайн и прочие объекты интеллектуальной собственности принадлежат ООО «Умный Ритейл». Автор не имеет намерения нарушать права правообладателя. При наличии претензий — свяжитесь со мной, и материалы будут незамедлительно удалены.