Веб-приложение для онлайн-бронирования билетов на междугородние трансферы. SPA-одностраничник с интерактивным многошаговым виджетом покупки, 3D-схемой выбора мест в салоне, динамической подгрузкой расписания из БД и полностью адаптивной вёрсткой.
🌐 Сайт: k-ticket-project.vercel.app
| Десктоп | Виджет бронирования |
|---|---|
 |
 |
Вводный блок с презентацией направления (Ростов-на-Дону — Волгодонск), автомобиля (Haval M6) и стартовой стоимости поездки. Содержит прямую CTA-кнопку «Купить билет», запускающую процесс бронирования.
Блок карточек с ключевыми удобствами для пассажиров:
- Страховка — защита каждого пассажира на протяжении всего маршрута.
- Вода — бесплатная питьевая вода в салоне.
- Чистота — обязательная уборка салона перед каждым рейсом.
- WiFi — высокоскоростной интернет на всём пути.
- Мультимедиа — фильмы и музыка в дороге.
- Комфорт — индивидуальный подход к каждому клиенту.
Виджет с выбором направления. На экране отображаются два города: Ростов-на-Дону и Волгодонск. Между ними расположена кнопка реверса с анимированными стрелками: при клике города меняются местами с плавной анимацией перестановки.
После клика на «Купить билет» виджет плавно трансформируется:
- Отображается календарь с доступными днями недели и датами.
- Доступные даты не захардкожены, а динамически подгружаются из базы данных через Prisma ORM на основе графика, установленного водителем.
- После выбора даты открывается список доступных временных слотов.
Основная фича сервиса — визуал салона автомобиля (вид сверху):
- На схеме выделены 3 доступных пассажирских места (1 переднее, 2 задних).
- Реализован кастомный 3D-эффект: при наведении курсора выбранное кресло физически «приподнимается» над схемой салона за счёт CSS-трансформаций. При уходе курсора кресло плавно возвращается в исходное положение.
- Выбранное место фиксируется в состоянии формы.
Форма сбора информации с валидацией полей:
- ФИО — проверка на корректность ввода.
- Дата рождения — выбор даты для оформления страхового полиса.
- Email — валидация формата почты для отправки электронного билета.
Итоговый экран воронки со сводкой всех выбранных параметров (маршрут, дата, время, номер места, данные пассажира).
- На любом из предыдущих шагов доступна кнопка «Назад», позволяющая изменить данные без потери контекста.
- Кнопка «Оплатить» эмулирует переход на платёжный шлюз банка (СБП / банковская карта).
Слайдер с фотографиями экстерьера и интерьера авто Haval M6, позволяющий оценить реальное состояние машины перед поездкой.
Информационный блок с правилами провоза багажа, отмены бронирования и правилами поведения в салоне.
Контактные данные, режим работы, ссылки на мессенджеры и социальные сети.
| Категория | Технологии |
|---|---|
| Frontend | React, JavaScript (ES6+) |
| Сборщик | Vite |
| Стилизация | CSS3, SCSS (3D-transforms, Transitions), резиновая вёрстка |
| Backend / БД | Prisma ORM, NodeJs |
| Управление состоянием | React State (Многошаговая логика виджета) |
| Деплой | Vercel |
Резиновая вёрстка. Сайт и интерфейс виджета адаптируются под любые разрешения экранов от 320px до 4K без переломов сетки и появления горизонтального скролла.
Многошаговое состояние (Stepper UI). Вся система бронирования работает в рамках одного SPA-компонента. Реализована сохраняемость данных (State Persistence) при навигации вперед/назад между шагами без перезагрузки страницы.
Интерактивные 3D-эффекты. Схема автомобиля реализована на чистом CSS с использованием transform: perspective() translateZ() для создания объёма при взаимодействии с элементами салона без использования тяжёлых 3D-библиотек (Three.js).
Интеграция с Prisma ORM. Серверная часть связывает виджет с базой данных, гарантируя, что пассажир видит только актуальные даты и свободен ли конкретный рейс.
| Роль | Имя | Работа |
|---|---|---|
| Frontend | Рустам | Вёрстка, разработка интерактивного виджета, работа с 3D-эфектами, разработка логик состояния, работа с Prisma ORM, разработа с API, создание Web-хуков |
- Telegram: @Adrenalin161
- Почта: rustambabaev161@gmail.com
| Роль | Имя | Работа |
|---|---|---|
| UI/UX дизайн | Альбина | Проектирование UI/UX виджета бронирования, создание дизайн-макета и прототипа, анимациий, стилизации, типографики, рвабота с цветами |
- Telegram: @AlbinaTsvet
- Почта: alina_tsvetkova_84@bk.ru
- Figma-макет: https://www.figma.com/design/C9h0gEtEJWGBrcazdlU3Sd/Untitled?node-id=0-1&t=NBypgINu2uZsChOJ-1
1. Клонировать репозиторий:
git clone https://github.com/Rusta-16/K-ticket-project.git
2. Перейти в директорию проекта:
cd K-ticket-project
3. Установить зависимости:
npm install
4. Настроить переменные окружения:
Создайте файл .env в корне проекта и укажите строку подключения к базе данных:
env
DATABASE_URL="postgresql://user:password@localhost:5432/kticket_db"
5. Генерация Prisma Client:
npx prisma generate
6. Запустить сервер:
npm run dev
7. Собрать билд:
npm run build
Локальная версия будет доступна по адресу http://localhost:3000.