https://github.com/igorsukhachev/mobx-store
🛍️ Интернет-магазин на React + MobX + TypeScript Каталог товаров с корзиной, избранным и поиском. MobX для состояния, TanStack Router для навигации.
https://github.com/igorsukhachev/mobx-store
mobx-react-lite reactjs styled-components tanstack-router typescript
Last synced: about 2 months ago
JSON representation
🛍️ Интернет-магазин на React + MobX + TypeScript Каталог товаров с корзиной, избранным и поиском. MobX для состояния, TanStack Router для навигации.
- Host: GitHub
- URL: https://github.com/igorsukhachev/mobx-store
- Owner: IgorSukhachev
- Created: 2025-06-04T11:24:04.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-20T23:52:41.000Z (about 1 year ago)
- Last Synced: 2025-06-21T00:26:54.338Z (about 1 year ago)
- Topics: mobx-react-lite, reactjs, styled-components, tanstack-router, typescript
- Language: TypeScript
- Homepage: https://mobx-store.vercel.app
- Size: 1.82 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🛍️ MobX Store - Интернет-магазин
Современное веб-приложение интернет-магазина, построенное с использованием React, MobX и TypeScript. Проект демонстрирует эффективное управление состоянием приложения с помощью MobX и современную архитектуру React-приложений.
## ✨ Возможности
### 🛒 Основной функционал
- **Каталог товаров** - просмотр списка товаров с информацией о ценах, описании и изображениях
- **Поиск товаров** - фильтрация товаров по названию в реальном времени
- **Корзина покупок** - добавление/удаление товаров в корзину с подсчетом общей суммы
- **Избранное** - сохранение любимых товаров в список избранного
- **Детальная страница товара** - подробная информация о выбранном товаре
- **Адаптивный дизайн** - корректное отображение на всех устройствах
### 🎯 Особенности
- **Персистентность данных** - корзина и избранное сохраняются в localStorage
- **Реактивное обновление UI** - автоматическое обновление интерфейса при изменении состояния
- **Оптимизированная производительность** - быстрая загрузка и отзывчивый интерфейс
- **Современный UI/UX** - красивые анимации и интуитивно понятный интерфейс
## 🛠️ Технологии
### Frontend
- **React 19** - современная библиотека для создания пользовательских интерфейсов
- **TypeScript** - типизированный JavaScript для повышения надежности кода
- **MobX** - библиотека для управления состоянием приложения
- **MobX React Lite** - интеграция MobX с React
- **TanStack Router** - современная система маршрутизации для React
- **Styled Components** - CSS-in-JS для стилизации компонентов
- **React Spinners** - библиотека компонентов загрузки
### Инструменты разработки
- **Vite** - быстрый сборщик и dev-сервер
- **ESLint** - линтер для поддержания качества кода
- **TypeScript ESLint** - правила линтинга для TypeScript
### API
- **FakeStore API** - внешний API для получения данных о товарах
## 🚀 Установка и запуск
### Предварительные требования
- Node.js (версия 18 или выше)
- npm или yarn
### Установка зависимостей
```bash
npm install
```
### Запуск в режиме разработки
```bash
npm run dev
```
Приложение будет доступно по адресу: `http://localhost:5173`
### Сборка для продакшена
```bash
npm run build
```
### Предварительный просмотр сборки
```bash
npm run preview
```
### Проверка кода
```bash
npm run lint
```
## 📁 Структура проекта
```
src/
├── assets/ # Статические ресурсы
├── routes/ # Маршруты приложения
├── store/ # MobX stores
│ ├── cartStore.ts # Управление корзиной
│ ├── productsStore.ts # Управление товарами
│ └── favoriteStore.ts # Управление избранным
├── shared/ # Общие компоненты и утилиты
│ ├── api/ # API функции
│ ├── styles/ # Глобальные стили
│ └── ui/ # UI компоненты
├── widgets/ # Виджеты приложения
│ ├── header/ # Шапка сайта
│ ├── sidebar/ # Боковая панель
│ ├── window/ # Главное окно
│ ├── products/ # Компоненты товаров
│ ├── productPage/ # Страница товара
│ └── favorites/ # Избранное
└── main.tsx # Точка входа
```
## 🏗️ Архитектура
### MobX Stores
Проект использует MobX для управления состоянием с тремя основными stores:
1. **ProductsStore** - управляет списком товаров, поиском и загрузкой данных
2. **CartStore** - управляет корзиной покупок с персистентностью
3. **FavoriteStore** - управляет списком избранных товаров
### Маршрутизация
Используется TanStack Router для современной и типобезопасной маршрутизации:
- `/` - главная страница с каталогом
- `/product` - страница товара
- `/product/:id` - детальная страница конкретного товара
- `/favorites` - страница избранных товаров
## 🔮 Планы развития
### 🔐 Авторизация и регистрация
**Планируется добавить систему аутентификации с использованием Express.js:**
- **Backend (Express.js)**:
- REST API для регистрации и авторизации
- JWT токены для аутентификации
- Хеширование паролей с bcrypt
- Middleware для защиты маршрутов
- Валидация данных на сервере
- **Frontend**:
- Формы регистрации и входа
- Защищенные маршруты
- Управление состоянием авторизации
- Персональный кабинет пользователя
- История заказов
### 🛒 Дополнительные функции
- **Оформление заказа** - полный процесс покупки
- **История заказов** - просмотр предыдущих покупок
- **Отзывы и рейтинги** - система оценок товаров
- **Уведомления** - email/SMS уведомления о статусе заказа
- **Админ-панель** - управление товарами и заказами
- **Фильтрация и сортировка** - расширенные возможности поиска
- **Мобильное приложение** - React Native версия
### 🔧 Технические улучшения
- **Тестирование** - Jest + React Testing Library
- **CI/CD** - автоматическая сборка и деплой
- **PWA** - Progressive Web App функциональность
- **Оптимизация** - lazy loading, code splitting
- **Мониторинг** - логирование и аналитика