Camper Rental Project

This is a Next.js 13 web application for browsing and filtering campers, featuring a dynamic UI built with React, Zustand state management, and shadcn/ui components.

Features

• Camper Listing: View a paginated list of campers with images, prices, ratings, and location info.

• Load More Pagination: Incrementally load campers 5 at a time on user request.

• Filtering: Filter campers by location, vehicle type, and equipment with a sidebar form.

• Favorites: Mark favorite campers with a heart icon that toggles color on click.

• Camper Details: Tabs interface with "Features" and "Reviews" sections.

• Anchor Link Navigation: Open details directly on the "Reviews" tab via URL hash.

• Responsive UI: Styled components with shadcn/ui and Lucide icons.

• Loading State: Loader component shown during asynchronous data fetching.

• No Results Placeholder: Clear message when filters return no campers.

📂 Project Structure

├── app/
│   └── campers/
│       ├── [id]/
│       └── @sidebar/
├── components/
│   ├── CamperDetails/
│   ├── CamperDetailsForm/
│   ├── CamperDetailsTabs/
│   ├── CamperReviews/
│   ├── CampersList/
│   ├── CatalogCheckbox/
│   ├── CategoriesList/
│   ├── Footer/
│   ├── Header/
│   ├── Loader/
│   ├── ReviewRating/
│   ├── TanStackProvider/
│   ├── ui/
│   └── VehicleDetails/
├── constants/
├── lib/
│   ├── api/
│   ├── store/
│   └── utils.ts
├── node_modules/
├── public/
├── types/
├── .prettierrc
├── components.json
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
└── tsconfig.json

🛠️ Tech Stack

Next.js 15 with Turbopack - App router, server+client components

React 19 - functional components and hooks

Tailwind - Utility-first CSS

Zustand 5.0.8 - global state management

shadcn/ui - ui components

lucide-react - icons

Axios - API calls

⚡ Installation

1. Clone the repo

git clone https://github.com/MarvinNox/TravelTrucks.git
cd traveltrucks

2. Install dependencies

npm install

3. Start dev server

npm run dev

4. Open http://localhost:3000 in your browser

Usage Tips

• Use filters sidebar to refine campers by location, equipment, and vehicle type

• Toggle favorites with heart icon; favorites persist locally

• Click "Show more" to load more campers incrementally

• Camper details page has a two different tabs, with reviews and van tech specs.

Contacts

Questions and contributions: Marvin Nox — send me a email