Frontend Developer (Next.js 14 / React Query) AI SaaS Wrapper

Вакансия: Frontend Developer (Next.js 14 / React Query)
Формат: Проектная работа (Freelance).
Уровень: Strong Middle / Senior.
Тип продукта: AI SaaS Wrapper (Generative Video/Image).

О ПРОЕКТЕ (КОНТЕКСТ)
Мы разрабатываем AI SaaS-платформу, интерфейс которой управляет генерацией контента на GPU-кластерах.
Backend Architect,  отвечает за инфраструктуру и API. Твоя задача — забрать у него готовый контракт (Swagger) и собрать "умный" клиентский интерфейс.
Мы используем SupaStarter (Next.js 14 + Shadcn). Верстать кнопки с нуля не нужно. Основная работа — сложная клиентская логика, таймеры, загрузчики и платежи.

КЛЮЧЕВЫЕ ЗАДАЧИ:

1. Реализация UI Генерации (Async Experience)
Самая ответственная часть.

• Формы и Валидация: Реализовать сложные формы настройки генерации (слайдеры, промпты). Использовать Zod для валидации данных на клиенте перед отправкой.

• Direct Uploads (Важно): Реализовать загрузку исходников (изображений/архивов) напрямую в Cloudflare R2 через Presigned URLs. Не гонять файлы через наш API. Отображать реальный прогресс-бар загрузки.

• Smart Polling: Видео генерируется ~2-5 минут. Реализовать опрос статуса через React Query с экспоненциальной задержкой (backoff), чтобы не DDOS-ить свой же сервер.

• Optimistic UI: Интерфейс должен быть "живым". Если юзер нажал "Генерировать", мы сразу списываем кредиты визуально, не дожидаясь ответа базы (с откатом при ошибке).

2. Интеграция Платежей (High-Risk / Crypto)
Мы выпиливаем подписки (Stripe Subscriptions) и внедряем систему пакетов (Credits).

• Crypto UX: Реализовать интерфейс ожидания транзакции. Вебхук от крипто-шлюза может идти 10-15 минут. Нужно сделать страницу "Searching for transaction...", которая поллит статус заказа, не пугая пользователя.

• Логика: Выбор пакета -> Запрос Payment Link -> Редирект -> Return URL -> Polling статуса зачисления.

3. Работа по Контракту (Strict API)
Бэкенд-архитектор предоставляет Swagger. Ты генерируешь TypeScript-типы.

• Server vs Client: Четкое понимание, где нужен use client, а где данные фетчатся в Server Components (RSC) для SEO и безопасности.

• Access Levels: Реализация условного рендеринга. Если у юзера access_level = 0, интерфейс физически не должен рендерить контролы для NSFW-генерации.

ТЕХНИЧЕСКИЙ СТЕК:

• Core: Next.js 14 (App Router) — уверенное понимание отличий Server Actions от API Routes.

• State: React Query (TanStack) — критически важно.

• UI: SupaStarter / Shadcn UI / Tailwind / Lucide React.

• Validation: Zod / React Hook Form.

ТРЕБОВАНИЯ:

• Опыт с "Тяжелым" контентом: Ты понимаешь, почему нельзя отправить файл 50МБ через POST /api/upload и умеешь работать с Presigned URLs.

• Опыт рефакторинга: Готовность "вырезать" куски логики из шаблона SupaStarter (например, старый биллинг).

• Clean Code: Компоненты должны быть разбиты на логические части, а не лежать в одном файле на 1000 строк.