AllYouNeedIsNft - стартап NFT-маркетплейса

Задача

Стал сооснователем AllYouNeedIsNft в момент, когда NFT-маркетплейсы стремительно росли, но рынок был под доминированием OpenSea. Окно для входа было узким: быстро запустить работающий маркетплейс, выделиться за счёт UX и выстроить отношения с авторами, пока рынок не остыл. Техническая сложность была реальной - интеграцию с блокчейном, безопасность смарт-контрактов, авторизацию через кошелёк и фронтенд потребительского уровня предстояло построить с нуля небольшой команде без готовой кодовой базы.

Исследование

Ранние беседы с художниками и коллекционерами выявили общую претензию к существующим платформам: запутанные сценарии работы с кошельком, слабый мобильный опыт и отсутствие поддержки начинающих авторов. Возможность заключалась в маркетплейсе, который ощущался бы так же просто, как интернет-магазин, скрывая при этом сложность блокчейна под капотом.

Рассмотренные варианты

1. Форк открытых контрактов OpenSea - рассмотрено. Использованы как ориентир, но не форкались напрямую; бизнес-логика требовала собственной механики роялти и аукционов.
2. Использование маркетплейса как сервиса (например, Rarible Protocol) - отклонено. Слишком сильная привязка; структура комиссий не подходила для целевого сегмента авторов.
3. Собственные контракты на Solidity + фронтенд на Next.js - выбрано. Полный контроль над логикой контрактов, оптимизацией газа и UX.

Решение

Next.js для фронтенда (SSR ради SEO на страницах коллекций), Solidity для контрактов маркетплейса и роялти в сети Ethereum, ethers.js для взаимодействия с кошельком. MetaMask и WalletConnect покрывали две доминирующие площадки кошельков. Архитектурные решения принимались с приоритетом скорости запуска MVP, а расширяемость шла вторым пунктом.

‹›

aA🔒www.allyouneedisnft.com/

⇧▢+

AHomeCCollectionsBContest of BirdesNNFT DropDCreator+Create contractRReadmeWConnect wallet

allyouneedisnft.com, scrollable snapshot of the live marketplace

Реализация

Возглавил всю архитектуру фронтенда: маршрутизацию, процесс подключения кошелька, слой взаимодействия с контрактами и страницы коллекций/токенов. Сценарий авторизации через кошелёк был особой UX-задачей - он должен был работать для пользователей, которые никогда не сталкивались с криптовалютой. Спроектировал пошаговое онбординговое модальное окно, которое проводило новых пользователей через установку MetaMask и подключение, не покидая страницу.

За маркетплейсом стоял собственный индексный движок, который работал с блокчейном напрямую через библиотеку Nethereum. Он забирал данные из сети, читал JSON с метаданными для ERC-1155, ERC-721 и ещё нескольких форматов и складывал атрибуты коллекций в локальную базу. Картинки скачивались из IPFS и масштабировались под размеры, в которых их реально показывает сайт, поэтому страницы коллекций не тянули оригиналы в полном разрешении.

Кэш работал по принципу lazy load: коллекция индексировалась при первом обращении, по требованию, а не обходом всей сети заранее. Прогресс обновления уходил в браузер по WebSocket и показывался живым прогресс-баром, так что при первом заходе в большую коллекцию было видно, как она заполняется, вместо пустой страницы.

Управлял продуктовыми решениями от недели к неделе: приоритизировал процессы покупки и листинга для MVP, отложил аукционы и предложения до v2. Подключил двух инженеров, определил стратегию ветвления и проводил еженедельные демо с сооснователями, чтобы дорожная карта оставалась честной.

Результат

MVP запущен за 3 месяца с нуля. Первые коллекции авторов вышли в свет на пике интереса к рынку NFT. Платформа обрабатывала реальные транзакции в основной сети без эксплойтов контрактов. Стала весомым подтверждением способности команды исполнять задачи в быстро меняющейся и технически сложной сфере.

Индексный движок в работе

Генерация превью

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

Кэш по требованию

Чтобы сайт грузился очень быстро, я сделал собственный механизм кэша. Он выкачивал JSON коллекции из блокчейна, скачивал картинки и создавал их копии с изменёнными размерами. Кэш пересоздавался раз в сутки по требованию: если кто-то открывал коллекцию с просроченным кэшем, запускалось обновление, и новый кэш получали все, кто открывал эту коллекцию после него.

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

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

Обновление на странице и в логе бэкенда

Nethereum и Domain-Driven Design

Для работы с блокчейном бэкенд использовал Nethereum, библиотеку для Ethereum под .NET. На скриншоте создаётся новый NFT-элемент из его метаданных, а обвязка вокруг него построена на generic-типе, чтобы один и тот же код обслуживал разные виды токенов. Весь проект был сделан по Domain-Driven Design и разбит на уровни: домен с бизнес-сущностями и бизнес-процессами, инфраструктура для работы с базой данных и блокчейном и прикладной уровень поверх них.

GraphQL на Hot Chocolate

Бэкенд был построен на прогрессивной на тот момент технологии GraphQL, с библиотекой Hot Chocolate. Поверх неё работали разные SQL-приёмы: ленивая загрузка отдельных полей и запуск сборки кэша при обращении к определённому полю внутри объекта проекции.

Коллекции день за днём

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

Два этапа страницы коллекций

Бэкенд на .NET Core

Так выглядел бэкенд AllYouNeedIsNFT. Всё работало на .NET Core, поэтому разрабатывали в основном в JetBrains Rider. Решение лежало в монорепозитории рядом с общими пакетами, а каждый сервис собирался в Docker-образ.

Решение бэкенда в Rider

Вход через подпись кошелька

Чтобы подтвердить, что пользователь действительно владеет адресом кошелька, который он называет, мы сделали собственный механизм аутентификации. Сайт просит подписать произвольное сообщение с одноразовым токеном безопасности, а бэкенд затем проверяет валидность подписи. Валидная подпись доказывает, что у человека есть право подписи именно с этого адреса, и сомнений в том, кто он, не остаётся.

На скриншотах ниже момент отладки проверки подписи: сервис восстанавливает адрес из подписанного сообщения, а обработчик сравнивает его с адресом, который назвал пользователь.

Запрос на вход и проверка подписи в отладчике

Админ-панель

Для сайта также сделали админ-панель. В ней автор управлял своими коллекциями и настройками, а глобальный администратор мог управлять коллекциями и настройками других пользователей.

Краткий обзор админ-интерфейса платформы.

Исправление багов в мобильной версии

Исправление багов в мобильной версии. Функционала в маркетплейсе было много, поэтому и багов набралось порядком: длинные адреса кошельков вылезали за поля, элементы наезжали друг на друга на узком экране. Каждый сценарий проверялся с телефона в тестовой сети Sepolia, вплоть до создания листинга через Seaport.

Мобильное тестирование в сети Sepolia

Форма листинга

Обзор того, как пользоваться формой листинга на сайте allyouneedisnft.com.

Форма передачи прав

Видео с обзором формы передачи прав на элемент коллекции на нашей платформе.

NFT-дропы

Ревью процесса создания NFT-дропа, ещё одной функции на сайте. Для неё использовался специальный контракт, и во время тусовки можно было бесплатно получить случайный элемент коллекции.

Сама тусовка похожа на AMA-сессию. Сначала идёт прогрев, создаётся Discord-канал, назначаются ведущие ивента. Во время ивента проводятся разные конкурсы, гости общаются, всё ведёт ведущий, а попутно проходят розыгрыши и продажи коллекции.

Сервис проверки уникальности NFT

Сервис проверки уникальности и оригинальности NFT-картинок, unique.allyouneedisnft.com, сделал сторонний разработчик. На скриншоте его главная страница.

Иногда приходилось записывать ролики с презентацией новых фич и проектов для нашей англоязычной аудитории. На видео один из них: презентация сервиса, который проверяет уникальность NFT-картинок по базе данных, собранной с разных сайтов, OpenSea и других.

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

NFTwitting: обучение художников NFT

Чтобы учить пользователей работать с NFT, мы запустили отдельный проект NFTwitting. Для него настроили Telegram-бота и завели рекламную кампанию. В боте можно было получить подарок, подписаться на обновления и вступить в клуб, а мы получали данные пользователя, чтобы дальше прогревать его и доводить до продажи. Кампания была нацелена на художников: показать, как работать с NFT и зарабатывать на них.

Рекламная кампания для художников и бот, в который она вела

В рамках проекта AllYouNeedIsNFT развивался и NFT-клуб, который обучал художников работе с NFT, общению с заказчиками и продаже своих работ через всем известные NFT-площадки. На этом видео реклама того, чему мы учим в нашей группе.

Обучающие видео для клиентов

В работе с клиентами мне часто приходилось отвечать на их вопросы. Если вопрос был особенно массовым, я выделял под него время, писал сценарий, снимал видео и записывал голос. Цель была просветительская: привлечь больше людей к работе с NFT и познакомить их с криптой.

На этом видео пример: обзор того, как создать кошелёк на всем известной бирже Binance и как работать с USDT.

Ещё одно видео из моей серии образовательных роликов помогает людям, которые раньше не работали с криптой, разобраться, что такое USDT TRC-20 и как с ним работать. Зрители настраивают расширение для браузера TronLink, заводят кошелёк и делают свой первый перевод.

Созвоны фаундеров

Созвоны фаундеров: регулярные статусы и митапы, где каждый рассказывал, с чем столкнулся, какой дальше план, куда движемся и каких успехов уже достигли.