VanLife React App

A modern van rental web application built with React, React Router, and MirageJS. This project simulates a van rental platform, allowing users to browse available vans, view details, and manage listings as a host. The app is designed for learning and demonstration purposes, using a mock backend with MirageJS.

Features

• Browse a list of available vans with details and images
• View individual van details
• Host dashboard to manage your vans, income, and reviews
• Nested routing for host van management (info, pricing, photos)
• Error handling and loading states
• Responsive and modern UI

Tech Stack

• React 18
• React Router v6
• MirageJS (mock API server)
• Vite (development/build tool)

Getting Started

Prerequisites

• Node.js (v16 or higher recommended)
• npm (comes with Node.js)

Installation

1. Clone the repository:

   git clone <repo-url>
   cd vanlife

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

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

Project Structure

vanlife/
├── api.js
├── index.html
├── index.jsx
├── index.css
├── server.js
├── vite.config.js
├── components/
│   ├── Footer.jsx
│   ├── Header.jsx
│   ├── HostLayout.jsx
│   └── Layout.jsx
├── pages/
│   ├── About.jsx
│   ├── Home.jsx
│   ├── NotFound.jsx
│   ├── Host/
│   │   ├── Dashboard.jsx
│   │   ├── HostVanDetail.jsx
│   │   ├── HostVanInfo.jsx
│   │   ├── HostVanPhotos.jsx
│   │   ├── HostVanPricing.jsx
│   │   ├── HostVans.jsx
│   │   ├── Income.jsx
│   │   └── Reviews.jsx
│   └── Vans/
│       ├── VanDetail.jsx
│       └── Vans.jsx
└── assets/
    └── images/

Scripts

• npm run dev — Start the development server
• npm run build — Build for production
• npm run preview — Preview the production build

License

This project is for educational purposes and does not include a production backend or real payment integration.