EN Project: CAMPERS-APP
The goal of this project is to develop the frontend part of a web application for the company "TravelTrucks," which specializes in camper rentals. The web application features an intuitive design, making it simple and functional. Every user can easily achieve their goal—finding and renting a camper that suits their preferences.
- Explore the camper fleet available at "TravelTrucks."
- Search for a camper based on location, type, and functionality.
- View detailed technical specifications of the selected camper.
- Browse camper photos and read user reviews.
- Add favorite campers to a wishlist.
- Use a quick and convenient booking form.
To install and run the project, follow these steps:
-
Clone the repository to your machine:
-
Navigate to the project directory:
cd campers-app
-
Install dependencies:
npm install
-
Start the project:
npm run dev
-
Open http://localhost:3000 in your browser to see the result
- Navigate to the catalog page, where you can view the entire fleet of available campers. Each camper listing includes a name, image, price, main features, a brief description, and a rating.
- To refine your search, specify the city where you're looking for a camper, select one of the three body types, and define additional technical parameters, such as the availability of a kitchen or bathroom.
- To view details about a specific camper, click the "Show More" button. This will take you to the camper's details page, where you can check full specifications, browse images, and read user reviews.
- To book a camper, fill out the booking form located on the selected camper’s page.
- React: The core library for building the user interface.
- Vite: A tool for fast development and modern frontend project builds.
- Redux: A state management library ensuring predictable data handling.
- React Router: A library for handling routing in React applications.
- Axios: A library for making HTTP requests.
- Formik: A tool for building forms and managing their state.
- Yup: A library for data validation, seamlessly integrating with Formik.
- Author: Yenakiieva Tanya.
- Contact Information: email: yastigma@gmail.com, telegram: yastigma.
- GitHub: https://github.com/yaStigma
UA Проєкт: CAMPERS-APP
Мета проєкту – створення фронтенд частини веб-додатку для компанії "TravelTrucks", яка займається орендою кемперів. Веб-додаток має інтуїтивно зрозумілий дизайн, простий та функціональний. Кожен користувач з легкістю зможе досягти своєї мети - знайти та орендувати кемпер за своїми побажаннями.
- Ознайомлення з парком кемперів наявним у компанії "TravelTrucks".
- Пошук необхідного кемпера за місцем знаходження, типом та функціоналом.
- Можливість детального ознайомлення з усіма технічними характеристиками обраного кемперу.
- Огляд кемперу за наданими фотокартками, ознайомлення з відгуками про використання.
- Можливість додавати кемпери, що зацікавили, в обране.
- Швидка та зручна форма бронювання.
Щоб встановити та запустити проєкт, виконайте наступні кроки:
-
Клонуйте репозиторій на свою машину:
-
Перейдіть в директорію проєкту:
cd campers-app
-
Встановіть залежності:
npm install
-
Запустіть проєкт:
npm run dev
-
Відкрийте http://localhost:3000 у вашому браузері, щоб побачити результат.
- Перейдіть на сторінку каталогу. До уваги представлено весь парк наявних кемперів з короткою інформацією: назва, зовнішній вигляд, ціна, основний функціонал, скорочений опис, рейтинг.
- Для звуження пошуку деталізуйте пошук: вкажіть місто, де шукати кемпер, оберіть один з трьох типів кузова, а також вкажіть інші технічні параметри, які цікавлять, наприклад, наявність кухні чи ванної кімнати.
- Щоб переглянути деталі про конкретний кемпер, натисніть на кнопку "Показати більше" та перейдіть на сторінку деталей про кемпер, де можна ознайомитися з повними технічними даними, переглянути фотокартки, прочитати відгуки.
- Для бронювання кемпера заповніть форму на бронювання, що знаходиться на сторінці обраного кемпера.
- React: Основна бібліотека для створення користувацького інтерфейсу.
- Vite: Інструмент для швидкої розробки та збірки сучасних фронтенд-додатків.
- Redux: Бібліотека для управління станом додатку, що забезпечує передбачуваність і зручність у роботі з даними.
- React Router: Бібліотека для створення маршрутизації в React-додатках.
- Axios: Бібліотека для здійснення HTTP-запитів.
- Formik: Інструмент для створення форм і управління їхнім станом.
- Yup: Бібліотека для валідації даних, яка легко інтегрується з Formik.
- Автор: Єнакієва Тетяна.
- Контактна інформація: email: yastigma@gmail.com, telegram: yastigma.
- GitHub: https://github.com/yaStigma