butterfly upcycle

Сайт-візитка для бренду дизайнерського апсайклінг-одягу "butterfly upcycle" (Дніпро). React + TypeScript + SCSS на фронтенді, Node.js/Express — на бекенді. Товари, категорії, фото, відгуки й замовлення зберігаються на сервері й бачать їх усі відвідувачі сайту, а не лише ваш браузер.

Швидкий старт (потрібні два термінали)

1. Бекенд:

cd server
npm install
npm start

Підніметься на http://localhost:4000. При першому запуску сам створить server/db.json із прикладами товарів, категорій і відгуків.

2. Фронтенд:

npm install
npm run dev

Відкриється на http://localhost:5173 — запити /api/... і /uploads/... автоматично проксуються на бекенд (див. vite.config.ts).

Сторінки

• / — головна: коротке знайомство з брендом (фото + текст "про себе"), манифест, карусель товарів (по 3, стрілками гортаються наступні), процес пошиття, відгуки клієнтів
• /catalog — каталог усіх товарів: фільтр за категорією + перемикач "лише в наявності"
• /catalog/:id — картка товару: галерея фото, точна ціна, наявність, тканина/розмір, анімована екостатистика, кнопка "Додати в кошик" (для наявних) або "Замовити схоже" (для проданих)
• /cart — кошик: список доданих товарів + форма оформлення (ім'я, телефон, Telegram/Instagram, місто й відділення Нової Пошти). Після відправки всі товари в кошику автоматично позначаються як продані, а замовлення з'являється в адмін-панелі
• /custom-order — заявка на індивідуальне замовлення (опис бажаної речі, орієнтовний бюджет, контакти) — теж потрапляє в адмін-панель. Кнопка "Замовити схоже" на проданому товарі веде сюди з підказкою, на яку річ орієнтуватися
• /admin — адмін-панель із чотирма вкладками: Товари, Категорії, Замовлення, Відгуки

Бейдж на проданому товарі — "Продано · можливий повтор": така річ унікальна, але подібну можна пошити знову через /custom-order.

Кошик

Кошик зберігається в браузері відвідувача (localStorage) — це особисті, тимчасові дані конкретного покупця до моменту оформлення замовлення, а не спільна інформація сайту, тому окремого місця на сервері для нього не потрібно. Іконка кошика в шапці сайту показує кількість доданих товарів.

Адмін-панель

Зайдіть на /admin і введіть пароль (перевіряється на сервері). За замовчуванням: butterfly2026.

Обов'язково змініть пароль перед публічним запуском — через ADMIN_PASSWORD у server/.env (приклад у server/.env.example):

PORT=4000
ADMIN_PASSWORD=ваш-новий-пароль

Вкладка "Товари"

Назва, категорія (обрати наявну або одразу додати нову прямо у формі), точна ціна, наявність, короткий і детальний опис, тканина, розмір, кілька фото — із завантаженням, видаленням і зміною порядку (перше фото стає обкладинкою картки товару), і екопоказники (вода/тканина/CO₂ — довільні числа на ваш розсуд, залиште 0 щоб не показувати).

Вкладка "Категорії"

Список категорій із кількістю товарів у кожній, додавання, видалення.

Вкладка "Замовлення"

Усі заявки — і покупки наявних речей (з кошика чи "Додати в кошик"), і індивідуальні запити (/custom-order) — з фільтром за статусом (Усі / Нове / Підтверджено / Виконано). Кожне замовлення показує список товарів (або опис бажаної речі), контакти, доставку, коментар і дату. Статус можна міняти, заявку — видалити після обробки.

Вкладка "Відгуки"

Додавання й видалення відгуків клієнтів, які одразу зʼявляються в блоці "Відгуки" на головній сторінці. Відгук — це, перш за все, текст (ім'я + сам відгук), але за бажання можна додати фото або скріншот переписки — воно з'явиться над цитатою на сайті.

Сповіщення в Telegram

Коли клієнт оформлює замовлення (наявну річ через кошик або індивідуальну заявку через /custom-order), бекенд може одразу надіслати повідомлення з деталями замовлення у ваш Telegram — окремим ботом, у особисті повідомлення чи в груповий чат. Це повністю опційно: без налаштування сайт працює як і раніше, просто без пінгу, і в адмінці на вкладці "Замовлення" з'явиться підказка, що сповіщення вимкнені.

Як налаштувати:

1. Створіть бота. У Telegram напишіть @BotFather → команда /newbot → дайте боту ім'я. У відповідь отримаєте токен виду 123456789:AAExampleTokenHere — це TELEGRAM_BOT_TOKEN.

2. Дізнайтесь свій chat_id. Найпростіше — напишіть боту @userinfobot будь-яке повідомлення, він одразу покаже ваш Id (число, може бути з мінусом, якщо це група) — це TELEGRAM_CHAT_ID. Якщо хочете отримувати сповіщення в групі: додайте свого нового бота в цю групу і напишіть там щось, а тоді візьміть chat_id групи (наприклад, через @getidsbot).

3. Напишіть боту першим. Telegram-боти не можуть писати першими — зайдіть у чат з вашим ботом (за посиланням, яке дав BotFather) і надішліть йому будь-яке повідомлення (наприклад, "привіт") один раз, інакше сповіщення не долетять.

4. Впишіть значення в server/.env (створіть файл на основі server/.env.example, якщо ще не створювали):

   TELEGRAM_BOT_TOKEN=123456789:AAExampleTokenHere
   TELEGRAM_CHAT_ID=123456789
   

5. Перезапустіть бекенд (npm start у папці server). Готово — наступне замовлення прийде повідомленням у Telegram.

Повідомлення містить: тип замовлення (наявна річ чи індивідуальне), список товарів або опис бажаної речі, ім'я, телефон, контакт (Telegram/Instagram), місто/доставку й коментар — тобто все те саме, що видно у вкладці "Замовлення" в адмінці.

Не приходить повідомлення?

Файл server/index.js при кожній спробі відправки пише в термінал, де запущений npm start, один із рядків:

• Telegram: skipped (...) — файл .env не підхопився (найчастіше: значення вписали не в той файл — перевірте, що файл називається рівно .env, а не .env.example, і що бекенд перезапускали після його створення);
• Telegram: notification sent successfully. — сервер отримав від Telegram підтвердження доставки. Якщо повідомлення все одно не видно в чаті — переконайтесь, що дивитесь саме в чат із тим ботом, і що колись раніше написали йому першим (боти не можуть почати діалог самі);
• Telegram notification failed: ... — Telegram у відповідь сказав "ні": найчастіше chat_id невірний або бот не отримав від вас першого повідомлення;
• Telegram notification timed out after 10s ... — сервер відправив запит, але за 10 секунд не отримав жодної відповіді. Це майже завжди означає, що щось на самому комп'ютері/мережі мовчки блокує вихідні з'єднання від Node (node.exe) до інтернету — типово антивірус чи Windows Firewall (додайте node.exe у дозволені програми) або корпоративна мережа/VPN. Перевірити це швидко: якщо сайт відкривається в браузері з того самого комп'ютера — це не проблема інтернету загалом, а саме процесу Node.

Якщо в терміналі взагалі нічого не з'являється після оформлення замовлення — переконайтесь, що ви дивитесь у той термінал, де справді запущений бекенд (cd server && npm start), а не, наприклад, у термінал фронтенду.

Як порахувати екопоказники

Це довільні числа, які ви вводите самі (наприклад, орієнтуючись на публічні дані про виробництво тканин). Якщо не хочете показувати якийсь показник — залиште 0.

Збірка та розгортання

npm run build       # фронтенд → dist/
npm run preview

cd server
npm start           # бекенд, окремий процес

Це два окремі застосунки: статичний фронтенд (можна хостити на Netlify/Vercel/GitHub Pages) і Node-бекенд (потрібен хостинг, що виконує Node — наприклад Render, Railway, Fly.io, VPS). На проді:

1. Розгорніть server/ на Node-хостингу, задайте ADMIN_PASSWORD і, за потреби, PORT через змінні середовища хостингу.
2. У фронтенді замініть проксі-налаштування (vite.config.ts працює лише в dev-режимі) на реальний URL бекенду — простіше за все налаштувати reverse proxy/rewrite на хостингу фронтенду так, щоб /api/* і /uploads/* йшли на бекенд.
3. Це SPA з клієнтським роутингом — переконайтесь, що хостинг фронтенду налаштований на "SPA fallback" (усі шляхи → index.html), інакше пряме відкриття /catalog чи /admin за посиланням поверне 404.

Структура

src/
  components/     # Header (з кошиком), Hero, Manifesto, Categories (карусель),
                  # ProductCard, AnimatedNumber, Process, Reviews, Footer, ScrollToHash
  context/        # ProductsContext (товари + категорії), OrdersContext,
                  # ReviewsContext, CartContext (localStorage)
  pages/          # HomePage, CatalogPage, ProductPage, CartPage,
                  # CustomOrderPage, AdminPage
  types/          # Product, Order, Review
  styles/         # variables.scss, global.scss

server/
  index.js        # Express API: products, categories, orders, reviews, admin/verify
  db.js           # проста JSON-файлова "база даних" (server/db.json)
  seedProducts.js # початкові товари, категорії й відгуки для першого запуску
  uploads/        # завантажені фото товарів (роздаються як /uploads/...)

Що можна доробити

• Оновити посилання на Instagram/Telegram у src/components/Footer.tsx (зараз там приклад butterfly_upcyclex).
• Перейти з JSON-файлу на "справжню" базу даних (Postgres/SQLite/Supabase), якщо товарів чи замовлень стане багато.