Портфолио

вернуться в портфолио

Лендинг Спортивного События

Проект: Создание современного веб-приложения для организации и продвижения международного спортивного чемпионата.

Цель проекта

Проект направлен на создание цифровой платформы для анонса, управления и освещения крупного спортивного события. Основные задачи, поставленные заказчиком:

  1. Разработать привлекательный, адаптивный лендинг с акцентом на визуальную составляющую и удобство пользователей.
  2. Создать админ-панель для управления контентом (спортсмены, расписание, спонсоры, FAQ, общие настройки).
  3. Обеспечить интеграцию frontend и backend через API для гибкости и масштабируемости.
  4. Подготовить проект к продакшен-развертыванию с соблюдением современных стандартов безопасности и производительности.
Macbook Mockup Front View UV.jpeg

Реализованный функционал

Публичная часть сайта

  • Главный экран (Hero Section) — баннер с информацией о событии и кнопками регистрации.
  • О событии — блок с описанием чемпионата, направлениями, числом участников и контактами.
  • Спортсмены — интерактивные карточки с фотографиями, достижениями и странами.
  • Расписание — табы по дням, отображение событий, времени и площадок.
  • Спонсоры — сетка логотипов партнёров и приглашение к сотрудничеству.
  • FAQ — динамический аккордеон с часто задаваемыми вопросами.
  • Регистрация — форма для участников и гостей.
  • Footer — контакты и ссылки на социальные сети.

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

  • Аутентификация и защита доступа (JWT-токены, Symfony Security).
  • Общие настройки: редактирование информации о событии, контактных данных, баннера.
  • Спортсмены: добавление, редактирование и удаление, загрузка фото и достижений.
  • Расписание: гибкое управление днями и событиями.
  • Спонсоры: загрузка логотипов, настройка порядка отображения.
  • FAQ: CRUD-операции с вопросами и ответами.
  • Публикация: конфигурация домена, SSL, кэширования и сжатия.
MacBook Mockup, Floating.jpeg

Технологический стек

Frontend:

  • React 18 (UI)
  • TypeScript 5.7
  • Vite 6 (быстрая сборка)
  • Tailwind CSS + HeroUI (интерфейс)
  • Framer Motion (анимации)

Backend:

  • PHP 8.1+ (Symfony 6)
  • API Platform (REST API)
  • Doctrine ORM
  • Symfony Security / Validator / Serializer

База данных:

  • MySQL 8.0

Инфраструктура и инструменты:

  • PostCSS / ESLint / Babel
  • Composer / Symfony CLI

Особенности архитектуры

  • Компонентный React UI с переиспользуемыми блоками.
  • Автоматическая генерация REST API на базе API Platform.
  • Интеграция frontend и backend через защищённые CORS-запросы.
  • Валидация данных и JWT-аутентификация.
  • Doctrine ORM — безопасная работа с БД и миграции.
  • Tailwind — адаптивная стилизация с utility-first подходом.
Mobile App Screen Mockup, Mosaic.jpeg

Этапы разработки

Неделя 1 — Анализ и проектирование

  • Подготовка архитектуры и прототипа интерфейса.
  • Настройка окружения и структуры проекта.

Неделя 2 — Разработка лендинга и API

  • Реализация фронтенда на React.
  • Создание REST API на Symfony.
  • Настройка сущностей: спортсмены, расписание, FAQ, спонсоры.

Неделя 3 — Интеграция и запуск

  • Соединение фронтенда с API.
  • Тестирование и оптимизация производительности.
  • Развёртывание проекта на продакшн-сервере.

Общий срок: 3 недели.

Команда проекта

  • Руководитель проекта: 1
  • Frontend-разработчик: 1
  • Backend-разработчик: 1