HealthShop

Главная страница

Главная работает как витрина. Вверху шапка с навигацией по разделам «Продукты», «Доставка и оплата» и «Контакты» и кнопкой корзины со счётчиком товаров. Под ней первый экран с крупным заголовком и фотографией бренда. Ниже идут готовые наборы и популярные товары, откуда покупатель переходит в каталог.

Каталог с фильтрами

Каталог фильтруется по категориям и по цене: до 1000 рублей, от 1000 до 3000 и больше 3000. Товары сортируются по цене в обе стороны и по алфавиту, а кнопка «Показать ещё» подгружает следующую порцию. Из карточки по кнопке «Подробнее» открывается описание с ценой, где сразу можно выбрать количество.

Корзина и заказ

В корзине собрана таблица заказа: название, категория, количество, цена и сумма по каждой позиции, внизу итог и кнопка «Оформить заказ». Количество меняется прямо в строке. Заказ сразу прилетает дистрибьютору на почту и в Telegram, а продажу он завершает уже в разговоре с клиентом.

Панель администратора

Панель администратора написана под задачи этого магазина. В ней дистрибьютор добавляет товары, меняет цены и категории и смотрит статистику по заявкам. Обновлять каталог он может в любой момент своими руками.

Стек и переезд

Интерфейс собран на Next.js, TypeScript, Tailwind CSS и shadcn/ui, сервер работает на Express и MongoDB. Сначала магазин работал на Vercel, позже переехал на собственный сервер с настроенным CI/CD.

SEO с первого дня

Домен был совсем новый, поэтому поисковая структура появилась раньше самого магазина. Набор поисковых запросов разбит на группы, и под них выстроены категории и карточки товаров. Метаданные, разметка, список страниц для поисковиков и настройки индексации были готовы к запуску.

За неделю проект прошёл путь от пустого репозитория до первых заказов, которые дистрибьютор получал прямо в Telegram.