{"id":28962374,"url":"https://github.com/igorsukhachev/mobx-store","last_synced_at":"2026-05-08T04:32:16.680Z","repository":{"id":300305863,"uuid":"996041982","full_name":"IgorSukhachev/mobx-store","owner":"IgorSukhachev","description":"🛍️ Интернет-магазин на React + MobX + TypeScript  Каталог товаров с корзиной, избранным и поиском. MobX для состояния, TanStack Router для навигации.","archived":false,"fork":false,"pushed_at":"2025-06-20T23:52:41.000Z","size":1906,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-21T00:26:54.338Z","etag":null,"topics":["mobx-react-lite","reactjs","styled-components","tanstack-router","typescript"],"latest_commit_sha":null,"homepage":"https://mobx-store.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IgorSukhachev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-04T11:24:04.000Z","updated_at":"2025-06-20T23:38:49.000Z","dependencies_parsed_at":"2025-06-21T00:26:55.827Z","dependency_job_id":"5d711d19-1aa8-4e56-9933-2332b05911e2","html_url":"https://github.com/IgorSukhachev/mobx-store","commit_stats":null,"previous_names":["igorsukhachev/mobx-store"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/IgorSukhachev/mobx-store","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IgorSukhachev%2Fmobx-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IgorSukhachev%2Fmobx-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IgorSukhachev%2Fmobx-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IgorSukhachev%2Fmobx-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IgorSukhachev","download_url":"https://codeload.github.com/IgorSukhachev/mobx-store/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IgorSukhachev%2Fmobx-store/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261595737,"owners_count":23182243,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mobx-react-lite","reactjs","styled-components","tanstack-router","typescript"],"created_at":"2025-06-24T03:05:06.891Z","updated_at":"2026-05-08T04:32:16.641Z","avatar_url":"https://github.com/IgorSukhachev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🛍️ MobX Store - Интернет-магазин\n\nСовременное веб-приложение интернет-магазина, построенное с использованием React, MobX и TypeScript. Проект демонстрирует эффективное управление состоянием приложения с помощью MobX и современную архитектуру React-приложений.\n\n## ✨ Возможности\n\n### 🛒 Основной функционал\n\n- **Каталог товаров** - просмотр списка товаров с информацией о ценах, описании и изображениях\n- **Поиск товаров** - фильтрация товаров по названию в реальном времени\n- **Корзина покупок** - добавление/удаление товаров в корзину с подсчетом общей суммы\n- **Избранное** - сохранение любимых товаров в список избранного\n- **Детальная страница товара** - подробная информация о выбранном товаре\n- **Адаптивный дизайн** - корректное отображение на всех устройствах\n\n### 🎯 Особенности\n\n- **Персистентность данных** - корзина и избранное сохраняются в localStorage\n- **Реактивное обновление UI** - автоматическое обновление интерфейса при изменении состояния\n- **Оптимизированная производительность** - быстрая загрузка и отзывчивый интерфейс\n- **Современный UI/UX** - красивые анимации и интуитивно понятный интерфейс\n\n## 🛠️ Технологии\n\n### Frontend\n\n- **React 19** - современная библиотека для создания пользовательских интерфейсов\n- **TypeScript** - типизированный JavaScript для повышения надежности кода\n- **MobX** - библиотека для управления состоянием приложения\n- **MobX React Lite** - интеграция MobX с React\n- **TanStack Router** - современная система маршрутизации для React\n- **Styled Components** - CSS-in-JS для стилизации компонентов\n- **React Spinners** - библиотека компонентов загрузки\n\n### Инструменты разработки\n\n- **Vite** - быстрый сборщик и dev-сервер\n- **ESLint** - линтер для поддержания качества кода\n- **TypeScript ESLint** - правила линтинга для TypeScript\n\n### API\n\n- **FakeStore API** - внешний API для получения данных о товарах\n\n## 🚀 Установка и запуск\n\n### Предварительные требования\n\n- Node.js (версия 18 или выше)\n- npm или yarn\n\n### Установка зависимостей\n\n```bash\nnpm install\n```\n\n### Запуск в режиме разработки\n\n```bash\nnpm run dev\n```\n\nПриложение будет доступно по адресу: `http://localhost:5173`\n\n### Сборка для продакшена\n\n```bash\nnpm run build\n```\n\n### Предварительный просмотр сборки\n\n```bash\nnpm run preview\n```\n\n### Проверка кода\n\n```bash\nnpm run lint\n```\n\n## 📁 Структура проекта\n\n```\nsrc/\n├── assets/          # Статические ресурсы\n├── routes/          # Маршруты приложения\n├── store/           # MobX stores\n│   ├── cartStore.ts      # Управление корзиной\n│   ├── productsStore.ts  # Управление товарами\n│   └── favoriteStore.ts  # Управление избранным\n├── shared/          # Общие компоненты и утилиты\n│   ├── api/         # API функции\n│   ├── styles/      # Глобальные стили\n│   └── ui/          # UI компоненты\n├── widgets/         # Виджеты приложения\n│   ├── header/      # Шапка сайта\n│   ├── sidebar/     # Боковая панель\n│   ├── window/      # Главное окно\n│   ├── products/    # Компоненты товаров\n│   ├── productPage/ # Страница товара\n│   └── favorites/   # Избранное\n└── main.tsx         # Точка входа\n```\n\n## 🏗️ Архитектура\n\n### MobX Stores\n\nПроект использует MobX для управления состоянием с тремя основными stores:\n\n1. **ProductsStore** - управляет списком товаров, поиском и загрузкой данных\n2. **CartStore** - управляет корзиной покупок с персистентностью\n3. **FavoriteStore** - управляет списком избранных товаров\n\n### Маршрутизация\n\nИспользуется TanStack Router для современной и типобезопасной маршрутизации:\n\n- `/` - главная страница с каталогом\n- `/product` - страница товара\n- `/product/:id` - детальная страница конкретного товара\n- `/favorites` - страница избранных товаров\n\n## 🔮 Планы развития\n\n### 🔐 Авторизация и регистрация\n\n**Планируется добавить систему аутентификации с использованием Express.js:**\n\n- **Backend (Express.js)**:\n\n  - REST API для регистрации и авторизации\n  - JWT токены для аутентификации\n  - Хеширование паролей с bcrypt\n  - Middleware для защиты маршрутов\n  - Валидация данных на сервере\n\n- **Frontend**:\n  - Формы регистрации и входа\n  - Защищенные маршруты\n  - Управление состоянием авторизации\n  - Персональный кабинет пользователя\n  - История заказов\n\n### 🛒 Дополнительные функции\n\n- **Оформление заказа** - полный процесс покупки\n- **История заказов** - просмотр предыдущих покупок\n- **Отзывы и рейтинги** - система оценок товаров\n- **Уведомления** - email/SMS уведомления о статусе заказа\n- **Админ-панель** - управление товарами и заказами\n- **Фильтрация и сортировка** - расширенные возможности поиска\n- **Мобильное приложение** - React Native версия\n\n### 🔧 Технические улучшения\n\n- **Тестирование** - Jest + React Testing Library\n- **CI/CD** - автоматическая сборка и деплой\n- **PWA** - Progressive Web App функциональность\n- **Оптимизация** - lazy loading, code splitting\n- **Мониторинг** - логирование и аналитика\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figorsukhachev%2Fmobx-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Figorsukhachev%2Fmobx-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figorsukhachev%2Fmobx-store/lists"}