E-com ZaraHome

Описание

Онлайн‑магазин товаров для дома нуждался в MVP e‑commerce, который:
- Покрывает ключевые сценарии: каталог → карточка → корзина → заказ.
- Поддерживает поиск, сортировку, фильтры, избранное и промокоды.
- Имеет защищённую аутентификацию и профиль пользователя.
- Масштабируется, имеет чистую архитектуру и единые настройки окружения.
- Быстро работает (SSR/CSR), корректен на мобильных, доступен и удобен.

Решение

Архитектура и окружение:
- Моно‑репозиторий: `client (Next.js)` + `server (NestJS)`; единая Joi‑валидация `.env`.
- Клиент в FSD: `app / entities / features / processes / shared / widgets`.
- Сервер модульный: `auth, users, products, cart, orders, favorites, promocodes, email`.

Frontend:
- Next.js (App Router) + TypeScript + TailwindCSS + Framer Motion.
- Состояние и API: Redux Toolkit + RTK Query (кэш, рефреш токены).
- SSR/CSR: проверки `typeof window`, безопасная работа с `localStorage`.
- Оптимизация ререндеров: `React.memo`, `useMemo`, `useCallback`; виртуализация списков.
- Изображения: `next/image`, динамические `sizes`, lazy loading.
- Доступность: роли, `aria-*`, `tabIndex`, фокус‑стили.

Бизнес‑функции:
- Каталог с пагинацией/сортировкой/фильтрами; карточка товара.
- Корзина, избранное, промокоды; оформление заказа с валидацией.
- Профиль: данные, адреса, смена пароля/e‑mail.
- Админ‑функции: управление товарами/промокодами (серверные модули).

Backend:
- Auth: JWT access/refresh, refresh в cookie, `@Roles` + `RolesGuard`.
- DTO‑валидация: `class-validator`; глобальные пайпы.
- Email: Resend (SMTP/REST) + Handlebars‑шаблоны.
- Файлы: загрузка изображений, `UPLOAD_PATH`, ограничение `MAX_FILE_SIZE`.
- Кэш и rate limit: настраиваемые TTL и лимиты.

Качество и производительность:
- DRY, ранние `return`, явные типы, ESLint/Prettier.
- Lazy секции, индексация БД (рекомендовано), сжатие изображений (рекомендовано).

Результат

- Полноценный e‑commerce MVP: от каталога до оформления заказа.
- Быстрый интерфейс, оптимизированные изображения и виртуализированные списки.
- Надёжная авторизация и профиль, валидные формы, устойчивость к ошибкам.
- Удобная поддержка и расширяемость: чистая архитектура клиента и модульный бэкенд.

Применение:
- Готов к маркетинговому трафику: скорость, адаптивность, доступность, понятные CTA.
- Подключение аналитики и A/B‑тестов для улучшения конверсии.
- Простое добавление категорий/фильтров/акций без ломки архитектуры.
- Масштабирование: новые модули (напр. отзывы, рекомендации) добавляются без риска для ядра.

Презентация проекта