2026-09-20 00:09:47 +05:00

4.7 KiB

Raw Permalink Blame History

🛍️ 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: Клонирование репозитория

Откройте терминал и выполните команду:

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/

4.7 KiB Raw Permalink Blame History Unescape Escape