Xernel
Бэкенд у клиента уже был. Нужна была витрина к нему — мы сделали её за 5 дней вместе с документацией, и их разработчик подключил API за пару часов.
- Клиент
- Xernel
- Тип
- Витрина магазина софта
- Что сделали
- Фронтенд и документация к API
- Статус
- Работает
* Число продуктов — со страниц сайта на момент съёмки скриншотов.
Фронтенд под готовый API, и быстро. У команды Xernel были свой бэкенд и свои разработчики, но не было витрины. Нужен был сайт с каталогом, страницами продуктов, статусами и поддержкой — и так, чтобы бэкендер мог подключить его сам, не разбираясь в нашем коде.
Витрина на Next.js и документация к каждому запросу. Все данные сайт берёт из API по описанному контракту: какие запросы, какие поля, какие ответы. Клиенту оставалось только реализовать это на своей стороне.
Главная, каталог, продукты с видео, EN / RU
Состояние каждого продукта в реальном времени
Документация, по которой подключили бэкенд
Крупная типографика, фиолетовое свечение и плавные анимации на GSAP и Framer Motion. Кнопка заказов закреплена внизу экрана, чтобы покупатель всегда мог вернуться к ним.
Основная аудитория англоязычная, русская версия открывается по /ru. Переводы через next-intl, переключатель — в шапке.
Потяните разделитель — EN слева, RU справа
Видео и галерея из игры, системные требования, статус защиты и тарифы доступа. Всё приходит из API, поэтому новый продукт появляется на сайте без участия фронтенда.
- Видео и скриншоты в одном плеере
- Требования к системе и статус
- Тарифы доступа
Отдельная страница показывает, какие продукты работают, какие обновляются, а какие ещё в разработке. Покупатель проверяет это до оплаты, а не пишет в поддержку.
Тикет с прикреплением скриншотов, видео и логов, плюс быстрые ссылки на Discord, Telegram и почту.
Мобильная версия с тем же видео, статусами и тарифами. Наведите или нажмите на экран — страница пролистается.
Листайте вбок · нажмите на экран, чтобы пролистать
Нажмите на страницу, чтобы открыть её целиком. Стрелки ← → листают.
Сделаем витрину под ваш API и опишем контракт так, чтобы ваша команда подключила его сама.