Опис

Це портфоліо виконаної роботи з розробки сучасної вебплатформи для оренди інструментів ToolNext.
Проєкт створено для оптимізації процесу пошуку та бронювання будівельного обладнання й інструментів. Сервіс допомагає користувачам легко знаходити та орендувати необхідну техніку у своєму районі, а власникам - ефективно керувати оголошеннями та отримувати додатковий дохід.

Що замовляв клієнт ?
Перед розробником стояло завдання створити стабільну вебплатформу з наступним функціоналом:
- Інтуїтивно зрозумілий каталог товарів із гнучкою системою фільтрації та пагінацією;
- Детальні сторінки інструментів із рейтингами та реальними відгуками користувачів;
- Надійна інтерактивна система онлайн-бронювання;
- Можливість додавання інструментів до списку обраного (Favorites) для швидкого доступу;
- Форма реєстрації та авторизації користувачів для захисту персональних даних;
- Адаптивний та сучасний інтерфейс (UI/UX) для комфортного користування з будь-яких пристроїв.

Які інструменти використовувались в роботі ?
- Фронтенд-технології: Next.js, React;
- Керування станом та запитами: TanStack Query (React Query) для оптимізації запитів до API, швидкого кешування та синхронізації даних;
- Мова програмування: TypeScript (для строгої типізації та підвищення надійності коду);
- Стилізація та дизайн: CSS Modules / Tailwind CSS;
- Хостинг та деплой: Vercel.

Що отримав клієнт у результаті ?
У результаті роботи було створено повнофункціональну та швидкодійну вебплатформу:
- Логіка сторінок та інтерфейс: Головна сторінка містить контрастний банер зі зручною пошуковою стрічкою, що допомагає користувачеві миттєво знайти потрібне обладнання (наприклад, алмазний дриль). Картки в каталозі мають чітку структуру: якісне зображення, назву інструмента, рейтинг (у вигляді зірочок), вартість за добу та кнопку переходу до деталей.
- Каталог та фільтрація: Реалізовано функціонал фільтрації товарів за категоріями та характеристиками. Пагінація допомагає швидко завантажувати нові позиції без перевантаження сторінки.
- Форми та безпека: Розроблено форму реєстрації з валідацією полів, що запобігає некоректному введенню даних та забезпечує безпеку облікових записів.
- Зручність взаємодії: Додано можливість керувати списком обраного (Favorites), завдяки чому клієнт може зберігати потрібні позиції та повертатися до них у декілька кліків.
- Швидкість та архітектура: Завдяки Next.js та TanStack Query вдалося досягти високої швидкості рендерингу. Переходи між сторінками відбуваються плавно, без повного перезавантаження сторінок, а дані оновлюються динамічно.
- Адаптивність: Інтерфейс коректно відображається як на десктопних моніторах, так і на екранах мобільних телефонів та планшетів.

Навички

Розробка та створення сайтів, Javascript та Typescript

Веб-адреса

Не зазначено

Тривалість

Не зазначено

Вкладення