Hero-секція
Застосунок оренди авто
Вебзастосунок для перегляду, фільтрації та бронювання авто на основі даних з API.
РольFrontend Developer
ТипВебзастосунок для оренди авто
ЛокаціяМіжнародний проєкт
ФокусРеалізація динамічного каталогу з фільтрацією, запитом на бронювання та інтеграцією API.
СтекNext.js, TypeScript, REST API
Тривалість3 дні
Коротко про проєкт
- Тип проєкту
- Каталоговий вебзастосунок
- Ціль
- Створити інтерфейс оренди авто, де користувач може швидко знайти потрібний варіант і надіслати запит.
- Ключові функції
- Каталог авто
- Фільтрація
- Обране
- Запит на бронювання
- Інтеграція API
- Моя роль
- Frontend-реалізація, UI-логіка, робота з API і адаптивний layout.
- Стек
- React
- TypeScript
- REST API
- CSS Modules
- Результат
- Каталоговий вебзастосунок із зручним переглядом, фільтрацією і чітким шляхом до запиту.
Проблема
Користувачам потрібен був швидкий і зрозумілий спосіб переглядати авто, застосовувати фільтри та надсилати запит на бронювання.
Рішення
Я реалізував frontend за готовим дизайном із фокусом на динамічну фільтрацію та інтеграцію API. Користувач може переглядати пропозиції, фільтрувати результати, відкривати деталі та надсилати запит із валідацією.
Ефект
У результаті вийшов робочий застосунок, який демонструє практичну роботу з API, логікою фільтрів і реальною взаємодією користувача.
Що я зробив
- Реалізував увесь frontend на основі макета з Figma
- Побудував динамічний каталог авто з даними з API
- Зробив систему фільтрації (бренд, ціна, пробіг)
- Додав функціонал обраного
- Підготував детальні сторінки авто
- Зібрав форму бронювання з валідацією та date picker
- Інтегрував API для завантаження і рендерингу даних
Hero
Вхідний екран із головним повідомленням застосунку.
Адаптивність
Десктопна та мобільна версії інтерфейсу.
Десктопний вигляд
Мобільний вигляд
Каталог і пошук
Огляд каталогу з пошуком і зручним переглядом пропозицій.
Огляд каталогу
Фільтрація
Фільтри за брендом, ціною та пробігом.
Панель фільтрації
Обране
Стан вибраних авто і робота зі списком обраного.
Стан обраного
Деталі авто
Сторінка авто з характеристиками і ключовою інформацією.
Сторінка деталей авто
Запит на бронювання
Надсилання запиту на оренду зі сторінки авто.
Форма запиту на бронювання
Потрібен сайт, який спрощує контакт із клієнтами?
Підготую зрозумілий сайт із простим шляхом до заявки, бронювання або розмови.