diff --git a/README.md b/README.md new file mode 100644 index 0000000..3dd8f81 --- /dev/null +++ b/README.md @@ -0,0 +1,92 @@ +# πŸ›οΈ 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/