Case study · Next.js 16 · React 19

Celestian — crypto copy-trading
платформа под ключ

18 страниц, анимированный лендинг, маркетплейс ботов, dashboard с онбордингом, Core Web Vitals.

Открыть демо
Full-stack frontend · архитектура · верстка · анимации · performance · деплой
18
страниц
80+
React-компонентов
100%
TypeScript strict
16
Next.js App Router
Stack

Технологии и инструменты

Next.js 16 · App Router · RSCReact 19TypeScript 5.9Tailwind CSS 3.4Framer MotionApexCharts + Rechartsnext-intl (i18n)Zod schema validationVercel deploy
Highlights

Что внутри

Лендинг с анимациями

Hero с видео-фоном, bento-сетка фич, карусель ботов с live-чартами, таблица сравнения, marquee отзывов, CTA-блоки. Framer Motion reveal, tilt 3D, marquee.

Dashboard v2

NetWorthHero с графиком портфеля, карусель ботов, фильтры, пагинация, секции settings.

Marketplace

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

Темы · i18n · адаптив

Light/dark тема, мультиязычность через next-intl, mobile-first адаптив. Библиотека анимаций переиспользуется на всех страницах.

Performance

LCP/FCP: lazy-mount тяжёлых видео через IntersectionObserver, preload шрифтов, tree-shaking (framer-motion, lucide, recharts), modern browserslist, AVIF/WebP.

Preview

Скриншоты

celestian-demo.vercel.app
Home
Home
celestian-demo.vercel.app/services
Services
Services
/marketplace
Marketplace
Marketplace
/about
About
About
/register
Register
Register
Scope

Что было сделано

Архитектура Next.js 16 App Router (RSC + static generation)
18 страниц: маркетинг, auth, legal, dashboard, blog с динамическим роутом
Компонентная библиотека анимаций (RevealOnScroll, TiltCard, GlowButton, Marquee, HexGrid)
Карусель ботов с интерактивными sparkline-чартами
Dashboard v2: NetWorthHero, фильтры, пагинация, настройки
Mock API-слой с Zod-типизацией под замену на реальный бэкенд
Адаптив mobile-first, темная/светлая темы, мультиязычность
Performance оптимизации: lazy-mount видео, preload шрифтов, tree-shaking
CI/CD через Vercel, деплой на каждый push в main

Нужен похожий проект?

Адаптирую под ваш бренд, подключу реальные биржи (Binance, Bybit, OKX), добавлю бэкенд.

Посмотреть live-демо