TravelTrucks

Campervan rental platform — catalog, backend-driven filtering, favorites and online booking.

 

Overview

TravelTrucks is the frontend for a campervan rental company. Visitors browse the fleet, narrow it down with filters resolved entirely on the backend, save favorites across sessions, read real reviews and submit a booking request — all built as a course project for the GoIT Frontend Development program.

The UI follows the Figma template supplied with the assignment; the landing page extends it with additional sections designed independently.

Live Demo

Production	traveltrucks-puce.vercel.app
Repository	github.com/kutluhangil/TravelTrucks

Features

• Home page — hero with a "View Now" call to action, a three-step how-it-works section with fleet stats, a feature grid, clickable pick-up cities that pre-fill the catalog filter, an FAQ accordion and a closing CTA.
• Catalog — camper cards with rating, location, price and feature badges; "Show more" opens the details page in a new tab.
• Backend-driven filtering — location, camper form, engine, transmission and multi-select equipment are all sent to the API as query parameters; nothing is filtered on the client. A new search clears the previous results before the new ones render.
• Pagination — "Load more" appends the next page until the full result set is loaded.
• Favorites — toggled from any card, persisted to localStorage, restored on reload.
• Camper details — photo gallery, a vehicle specs table, five-star reviews and a booking form with validation and a success toast.
• Loading & empty states — a loading indicator on every async request and a dedicated "No campers found" screen for filter combinations with no matches.

Tech Stack

Layer	Choice
Build tool	Vite
UI library	React 19
State management	Redux Toolkit
Routing	React Router 7
HTTP client	Axios
Styling	CSS Modules
Notifications	react-hot-toast
Deployment	Vercel

API

Data comes from the course-provided mock backend:

GET https://66b1f8e71ca8ad33d4f5f63e.mockapi.io/campers        # list, filters and pagination
GET https://66b1f8e71ca8ad33d4f5f63e.mockapi.io/campers/:id    # single camper

Routes

Path	Page
/	Home
/catalog	Catalog with filters
/catalog/:id	Camper details
*	Not found

Getting Started

Requires Node.js 20 or newer.

npm install      # install dependencies
npm run dev      # start the dev server on http://localhost:5173
npm run build    # production build into dist/
npm run preview  # preview the production build
npm run lint     # lint the source

Project Structure

src/
├── components/    UI components, one folder per component with its CSS module
├── pages/         route-level components
├── redux/         store, campers / filters / favorites slices, thunks and selectors
├── services/      axios instance and API calls
├── constants/     filter option definitions
├── utils/         formatting helpers
└── assets/        images and the SVG icon sprite

Author

Kutluhan Gil GitHub

Built as part of the GoIT Frontend Development program.

_{MIT Licensed — see LICENSE}