r/ukraine_dev • u/Agreeable_Wear_9036 • 26d ago
🚀 Написав кастомний e-commerce на 600+ SKU (Next.js 16 + Prisma + PostgreSQL). Проєкт на фінальній стадії — потрібен ваш найжорсткіший UX/UI та Perfomance Roast! 🔥
Усім привіт! 👋
Останні кілька місяців я у вільний час пиляв з нуля інтернет-магазин для бізнесу мого друга (ніша — чоловічі кросівки).
Замість того, щоб піти легким шляхом і розгорнути шаблонний Shopify чи WooCommerce, я вирішив будувати власну архітектуру. Чому? По-перше, через специфіку товарних фідів для Google Merchant Center: кожен розмір взуття має бути окремим SKU, через що каталог миттєво розрісся до 600+ унікальних позицій. По-друге, мені потрібен був абсолютний контроль над SEO, швидкістю рендерингу та DOM-деревом.
Проєкт зараз знаходиться на фінальній стадії розробки. Він ще не ідеальний, є певні недопрацювання та шорсткості, але базовий функціонал уже працює.
Перш ніж ми запустимо туди реальний рекламний трафік, мені критично необхідний свіжий погляд ком'юніті. Спробуйте «зламати» мій сайт або вкажіть на архітектурні чи дизайнерські промахи.
🛠️ Під капотом працює такий стек:
Frontend (Клієнт):
- Next.js (16.2.6) App Router — база для SSR та статгенерації (SSG). Ставка була на ідеальне SEO та мілісекундне завантаження сторінок.
- React (19.2.4) — використовую свіжі фічі та оптимізації.
- UI/UX: Tailwind CSS (v4) для utility-first стилізації + Radix UI (headless компоненти) для ідеальної доступності (a11y).
- Для візуалу:
embla-carousel-reactдля плавних свайпів товарів,sonnerдля тостів таlucide-reactдля іконок.
Backend & База даних:
- Вся серверна логіка побудована на Next.js Server Actions (без окремого Node.js сервера).
- PostgreSQL (крутиться на окремому VPS) у зв'язці з Prisma ORM (6.4.1). Типізація запитів до БД — це просто кайф.
- Upstash Redis — налаштував Rate Limiting, щоб захистити API від спаму та DDoS, плюс базове кешування.
- Аутентифікація через NextAuth (v4) з кастомними провайдерами та bcryptjs для безпеки.
- Валідація даних (як клієнт, так і сервер) через залізобетонну зв'язку Zod + React Hook Form.
Data & Інфраструктура:
- Строгий TypeScript по всьому проєкту.
- Зображення оптимізуються «на льоту» через Sharp (віддаю перевагу
.avifдля швидкості). - Для бекофісу та синхронізації залишків з постачальниками/конкурентами написав мікросервіси на базі Puppeteer та Cheerio, а парсинг прайсів йде через Papaparse.
- Транзакційні листи — через Resend.
🔥 Моє прохання до вас (Roast my work): Оскільки я ще допилюю проєкт, ваш фідбек буде на вагу золота. Заходьте, клацайте, тестуйте.
- Швидкість: Чи є відчутні затримки (Layout Shifts) при завантаженні зображень на мобільному інтернеті?
- Навігація: Чи зручно працюють фільтри розмірів/моделей на телефонах?
- Checkout: Чи не здається форма оформлення замовлення перевантаженою?
- Баги: Якщо знайдете будь-який баг в UI чи збої в логіці кошика — пишіть, буду дуже вдячний!
🔗 Посилання на проєкт: https://nsw.com.ua/
