Маркетплейс изделий ручной работы мастеров Якутии

Концепция и бизнес-модель

«ТАЛ ТАЛ» — это онлайн-витрина изделий ручной работы мастеров Якутии, а не классический e-commerce. Площадка соединяет мастера и покупателя, но не участвует в расчётах.

Принцип работы

• Покупатель находит изделие в каталоге и связывается с мастером напрямую: телефон, WhatsApp, Instagram.
• Площадка не оформляет заказы и не принимает оплату. Цена, доставка и оплата согласуются между мастером и покупателем вне платформы.
• Объявления создаёт и публикует администратор (по материалам мастера), что обеспечивает единое качество карточек.

Источники дохода

Целевая аудитория

Ключевые мотивы покупателя

• Подлинность. Гарантия, что изделие — настоящая ручная работа мастера из Якутии.
• Прямой контакт. Возможность обсудить с автором детали, размер, индивидуальный заказ.
• Доверие. Рейтинги, отзывы, проверенные мастера, фото и видео изделия.

Структура сайта

Публичная часть

• Главная — hero, поиск, популярные категории, новые поступления, популярные товары, национальные изделия, отзывы, о проекте, футер.
• Каталог — поиск, фильтры (категория, цена, город, мастер, наличие видео, рейтинг), сортировка, сетка/список, пагинация.
• Карточка товара — до 5 фото + видео, описание, характеристики, варианты цвета и размера, рейтинг, отзывы, блок продавца с CTA-контактами.
• Страница мастера — профиль, его изделия, рейтинг, контакты.
• Категория — посадочная страница с SEO-описанием и подкатегориями.

Личные кабинеты

• Кабинет продавца — список товаров, просмотры, статус и срок размещения (минимальный, т.к. публикует администратор).
• Админ-панель — товары, категории, модерация отзывов, пользователи, жалобы, платежи, статистика.

Категории и подкатегории

Структура отражает специфику ремёсел Якутии. Дерево двухуровневое, с возможностью расширения.

UX: сценарии и CJM

Ключевые сценарии

1. Покупатель-турист: ищет аутентичный сувенир → находит по категории «Сувениры» → читает отзывы → пишет мастеру в WhatsApp → договаривается о покупке и самовывозе.
2. Коллекционер из другого региона: ищет резьбу по кости → фильтрует по мастеру и рейтингу → смотрит видео → звонит мастеру → организует доставку.
3. Мастер: отправляет материалы администратору → оплачивает размещение → видит публикацию и просмотры в кабинете → получает обращения покупателей.

Customer Journey Map (покупатель)

Пользовательские потоки

Покупатель → контакт с мастером

Мастер → размещение

Администратор → модерация

Мобильное поведение (адаптивность)

Mobile-first: значительная часть аудитории (туристы, мессенджеры) приходит со смартфонов. Брейкпоинты Tailwind: sm 640, md 768, lg 1024, xl 1280.

• Шапка: логотип + иконка поиска; полноэкранный поиск по тапу; меню категорий — выезжающая панель.
• Каталог: 2 колонки карточек; фильтры — нижний sheet по кнопке «Фильтры»; сортировка — bottom-sheet.
• Карточка: галерея-свайп; CTA-контакты закреплены внизу экрана (sticky bottom bar) — звонок и WhatsApp всегда под рукой.
• Хит-таргеты не меньше 44×44px; крупный шрифт от 16px для основного текста.

UI Design System

Цветовая палитра

Типографика

Дисплейная антиква Cormorant для заголовков (премиальность, «рукотворность») + гротеск Manrope для интерфейса и текста. Моноширинный JetBrains Mono для артикулов и тех-данных.

Сетка и отступы

• Контейнер: max-width 1280px, боковые поля 24px.
• Сетка: 12 колонок, gutter 24px. Каталог — 4 колонки (десктоп) / 3 / 2 (мобайл).
• Шкала отступов: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 px.
• Радиусы: 4 / 8 / 14px. Тени: мягкие, тонированные в зелёный.

Компоненты

SEO-структура

URL

# Главная
/
# Категория и подкатегория
/catalog/[category]            → /catalog/ukrasheniya
/catalog/[category]/[sub]      → /catalog/ukrasheniya/sergi
# Карточка товара (slug + id)
/product/[slug]-[id]          → /product/unty-iz-kamusa-1042
# Мастер
/master/[slug]

Метатеги (пример карточки)

title: Унты женские из камуса с вышивкой — Мастерская «Тыал» · ТАЛ ТАЛ
description: Унты ручной работы из камуса, г. Вилюйск. Свяжитесь
с мастером напрямую: телефон, WhatsApp, Instagram. Рейтинг 5.0.
canonical: https://taltal.ru/product/unty-iz-kamusa-1042
robots: index, follow

Open Graph

og:type     = product
og:title    = Унты женские из камуса с вышивкой
og:image    = .../products/1042/cover-1200x630.jpg
og:url      = https://taltal.ru/product/unty-iz-kamusa-1042
og:locale   = ru_RU
product:price:amount   = 42000
product:price:currency = RUB

Schema.org (JSON-LD)

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Унты женские из камуса с вышивкой",
  "image": ["…/cover.jpg"],
  "brand": { "@type":"Brand", "name":"Мастерская «Тыал»" },
  "offers": { "@type":"Offer", "price":"42000",
              "priceCurrency":"RUB", "availability":"InStock" },
  "aggregateRating": { "@type":"AggregateRating",
              "ratingValue":"5.0", "reviewCount":"24" }
}

База данных (PostgreSQL)

Схема нормализована, связи через внешние ключи. Денормализованные счётчики (просмотры, рейтинг) — для скорости выдачи.

users

categories

products

reviews

Архитектура Next.js

Next.js 15 (App Router, RSC), TypeScript, Tailwind, shadcn/ui, React Query (клиентские данные), Zod + React Hook Form (формы).

# Структура проекта
yarmarka/
├─ app/
│  ├─ (public)/
│  │  ├─ page.tsx                  # Главная
│  │  ├─ catalog/[category]/page.tsx
│  │  ├─ product/[slug]/page.tsx
│  │  └─ master/[slug]/page.tsx
│  ├─ (cabinet)/seller/page.tsx    # Кабинет продавца
│  ├─ (admin)/admin/
│  │  ├─ page.tsx                  # Дашборд
│  │  ├─ products/ · categories/
│  │  ├─ reviews/ · complaints/
│  │  └─ users/ · payments/
│  ├─ api/                         # Route Handlers
│  │  ├─ products/route.ts
│  │  ├─ reviews/route.ts
│  │  └─ views/route.ts
│  ├─ sitemap.ts · robots.ts
│  └─ layout.tsx
├─ components/
│  ├─ ui/            # shadcn/ui примитивы
│  ├─ product/       # ProductCard, Gallery, SellerCTA
│  ├─ catalog/       # Filters, SortBar, Pagination
│  └─ layout/        # Header, Footer, Nav
├─ lib/
│  ├─ db.ts          # Prisma / Drizzle client
│  ├─ api.ts         # fetchers для React Query
│  └─ seo.ts         # generateMetadata, JSON-LD
├─ schemas/        # Zod-схемы (product, review…)
├─ hooks/          # useProducts, useFilters…
└─ types/

API-слой

UI-концепция страниц

Интерактивные прототипы выполнены в едином дизайн-коде. Откройте каждый экран: