92 lines
4.7 KiB
Markdown
92 lines
4.7 KiB
Markdown
# 🛍️ Freebie — Modern E-commerce Platform
|
||
|
||
Полноценное SPA-приложение для электронной коммерции, разработанное с разделением на современный React-фронтенд и мощный Django-бэкенд. Проект демонстрирует работу с глобальным состоянием, REST API, сессионной авторизацией и адаптивным UI/UX.
|
||
|
||
## 🚀 Особенности проекта
|
||
|
||
- 🛒 **Умная корзина в реальном времени:** Глобальное состояние через React Context. Изменения мгновенно отражаются в шапке, карточках товаров и на странице корзины без перезагрузки страницы.
|
||
- 🔌 **RESTful API:** Полноценный бэкенд на Django REST Framework для управления товарами, категориями, корзиной и отзывами.
|
||
- 👤 **Анонимные сессии:** Корзина сохраняется для гостевых пользователей с помощью сессионных cookies Django, что обеспечивает бесшовный пользовательский опыт до момента регистрации.
|
||
- **Адаптивный дизайн:** Полная поддержка мобильных устройств, планшетов и десктопов с использованием CSS Modules.
|
||
- 🏷️ **Система промокодов:** Динамический пересчет стоимости заказа на фронтенде с учетом скидок и фиксированной стоимости доставки.
|
||
|
||
## ️ Технологический стек
|
||
|
||
**Frontend:**
|
||
- React 18 + TypeScript
|
||
- Vite (быстрая сборка и Hot Module Replacement)
|
||
- React Router DOM (клиентская маршрутизация)
|
||
- CSS Modules (изолированная стилизация)
|
||
|
||
**Backend:**
|
||
- Python 3.12 + Django
|
||
- Django REST Framework (построение API)
|
||
- SQLite (база данных для разработки)
|
||
- `django-cors-headers` (настройка кросс-доменных запросов)
|
||
- `Pillow` (обработка загружаемых изображений)
|
||
|
||
---
|
||
|
||
## ⚙️ Инструкция по локальному запуску
|
||
|
||
Для запуска проекта на вашем компьютере необходимы предустановленные **Python 3.10+**, **Node.js 18+** и **Git**.
|
||
|
||
### Шаг 1: Клонирование репозитория
|
||
|
||
Откройте терминал и выполните команду:
|
||
|
||
```bash
|
||
git clone https://github.com/autli5/freebie.git
|
||
cd freebie
|
||
```
|
||
|
||
### Шаг 2: Настройка и запуск Backend (Django)
|
||
|
||
В этом же терминале выполните следующие команды для настройки серверной части:
|
||
|
||
# 1. Переходим в папку бэкенда
|
||
cd backend
|
||
|
||
# 2. Создаем виртуальное окружение
|
||
python -m venv venv
|
||
|
||
# 3. Активируем виртуальное окружение
|
||
# Для macOS / Linux:
|
||
source venv/bin/activate
|
||
# Для Windows (Command Prompt):
|
||
venv\Scripts\activate
|
||
# Для Windows (PowerShell):
|
||
venv\Scripts\Activate.ps1
|
||
|
||
# 4. Устанавливаем необходимые зависимости
|
||
pip install django djangorestframework django-cors-headers pillow
|
||
|
||
# 5. Применяем миграции для создания базы данных
|
||
python manage.py migrate
|
||
|
||
# 6. (Опционально) Создаем суперпользователя для доступа к админ-панели
|
||
python manage.py createsuperuser
|
||
|
||
# 7. Запускаем сервер разработки
|
||
python manage.py runserver
|
||
|
||
✅ Бэкенд будет доступен по адресу: http://127.0.0.1:8000/
|
||
✅ API товаров: http://127.0.0.1:8000/api/products/
|
||
✅ Админ-панель: http://127.0.0.1:8000/admin/
|
||
|
||
Важно: Оставьте этот терминал открытым, чтобы сервер продолжал работать.
|
||
|
||
### Шаг 3: Настройка и запуск Frontend (React)
|
||
|
||
Откройте новый терминал (или новую вкладку) в той же корневой папке проекта:
|
||
|
||
# 1. Переходим в папку фронтенда
|
||
cd frontend
|
||
|
||
# 2. Устанавливаем зависимости из package.json
|
||
npm install
|
||
|
||
# 3. Запускаем сервер разработки Vite
|
||
npm run dev
|
||
|
||
✅ Фронтенд будет доступен по адресу: http://localhost:5173/
|