Practise makes perfect!
- Опыт работы
- 6 лет
- На сайте с
- 2021 года
- Юридический статус
- Самозанятый
Dune React — SPA-фан‑сайт по настольной игре «Дюна: Империя» (Dune Imperium). Сделан как открытый фан‑ресурс для русскоязычного сообщества игроков, интересующихся картами, лидерами, дополнениями и статистикой партий. Референс‑сайт клиента — https://dune-imperium.ru/. Проект создан «с нуля».
Задача клиента — разработать современный SPA‑фан‑сайт настольной игры. 10 страниц (Главная, Каталог карт, Лидеры, Сеты, Рейтинг, Фракции, FAQ, Новости, Статья, 404), тёмный «пустынный» визуальный стиль Дюны с золотыми акцентами, mobile‑first адаптив, нативные CSS‑анимации без сторонних библиотек, SEO‑настройка, доступность WCAG AA и готовность к будущему подключению реального API.
Цель — собрать полноценный, быстрый и удобный ресурс, ядром которого является каталог карт с богатой фильтрацией. Чтобы фан‑сайт можно было наполнять и расширять, клиент запросил строгий технологический стек (React + TypeScript strict, MobX, Vite, React Router, SCSS‑модули, Axios) и моковые данные вместо серверной части — с архитектурой, которую позже легко перевести на настоящий backend.
Ключевые функциональные требования: фильтр карт по сетам/фракциям/ячейкам/свойствам, поиск, сортировка, deep‑link через URL (состояние каталога можно шарить ссылкой), виртуализация списков, лёгкая загрузка страниц и изображений, рейтинг игроков с таблицей, вкладками режимов и статистикой, анимированный каталог сетов, FAQ‑аккордеон с поиском и подсветкой, новости/статьи с маршрутом по slug. Готовность определялась чётким регламентом: все страницы доступны через роутинг, каталог полностью функционален, единый дизайн, SEO и доступность, чистый build.
Работа была проведена как поэтапная реализация:
Инфраструктура и стек. Vite + React 19 + TypeScript (strict), MobX + mobx-react-lite для состояния, React Router v6, SCSS‑модули, Axios, ESLint, @tanstack/react-virtual для виртуализации, @vuer-ai/react-helmet-async для SEO, lucide-react для иконок. Алиас @/ и единый структурированный каркас (app, components, pages, stores, models, services, hooks, utils, styles, layouts, data).
Дизайн‑система. SCSS‑токены в src/styles/_variables.scss (цвета, типографика Cinzel/Inter, spacing, breakpoints), миксины, библиотека @keyframes в _animations.scss и единая политика prefers-reduced-motion. Тёмная палитра Арракиса с золотыми акцентами и цветами четырёх фракций.
Архитектура состояния. RootStore агрегирует 7 доменных сторов (CardsStore, LeadersStore, SetsStore, RatingStore, FactionsStore, NewsStore, UIStore), доступ через контекст и хук useStores. В CardsStore реализован полный pipeline: фильтрация → поиск → сортировка, плюс сериализация/гидратация состояния через query‑параметры URL (deep‑link). Другие сторы выводят производные данные (карты сета из общего каталога, лидеров и карт фракции, статистку рейтинга, пагинацию новостей).
Данные. Mock‑данные в src/data: cards.json (340 карт — в 8 раз больше запрошенных 30–40), лидеры, сеты (5 официальных + 2 фанатских), фракции, 20+ игроков рейтинга с двумя режимами, новости/статьи, FAQ.
Страницы и UI. 10 страниц с ленивой загрузкой (React.lazy + Suspense) и code‑splitting по роутам. Каталог карт использует виртуализацию и адаптивную сетку 5/3/2 колонки. Переиспользуемые компоненты: Header/Footer с бургер‑меню, Card, FilterPanel, SearchInput (debounce), Modal (lightbox просмотра карт), LazyImage, Loader, ErrorBoundary, SEO. Анимации — чистый CSS: scroll‑reveal через useScrollReveal (IntersectionObserver), hover‑эффекты, анимированное появление, аккордеон FAQ.
Качество. SEO‑метаданные/OG/canonical на каждой странице, robots.txt, sitemap.xml, skip‑link, aria-*, семантическая разметка, виртуализация и мемоизация для производительности.
Результат — полностью рабочий SPA‑фан‑сайт, собранный по ТЗ.
На практике проект решает задачи сообщества: игроки могут искать и фильтровать карты по сетам, фракциям, ячейкам и свойствам и делиться ссылкой с уже применёнными фильтрами; ориентироваться в лидерах, дополнениях и фракциях; видеть статистику и рейтинг игроков с сортировкой, режимами «Империя/Восстание» и агрегатами; читать новости и статьи и находить ответы в FAQ с поиском. Адаптивность, анимации и тёмная тематическая графика обеспечивают удобство на мобильных и десктопе.
Технологическая ценность — готовность к развитию: моковые JSON‑данные изолированы, apiClient (Axios) уже заложен, сторы построены так, чтобы их легко перевести на реальный backend. В roadmap (в README.md) зафиксированы следующие шаги: подключение backend, расширение API‑слоя, обработка сетевых ошибок и состояний загрузки, добавление unit‑тестов бизнес‑логики (в первую очередь CardsStore). Сайт позиционирован как фанатский проект.
