Vanlife is a camper van rental marketplace that makes discovering and booking the perfect road trip van effortless. Travelers can browse, filter, and explore van details, while hosts get a clean dashboard to manage listings, track income, and monitor reviews. Everything runs in the browser with a mock API that feels just like the real thing.
The site puts a fleet of camper vans right at your fingertips. Search through options by type, dive into van details, and if you're a host, log in to see your earnings, review scores, and vans at a glance. It's built to be fast, responsive, and dead simple to use, no matter what device you're on.
The application is a single‑page React app powered by Vite. All API calls go to an in‑browser MirageJS mock server that stores data in memory and responds exactly like a real backend. This setup keeps everything self‑contained, so you can develop and demo it without any external services.
flowchart LR
Browser["Web Browser"]
ReactApp["React SPA (Vite)"]
ApiModule["API Module (api.js)"]
Mirage["MirageJS Mock Server"]
Models[("In-Memory Models")]
Browser --> ReactApp
ReactApp --> ApiModule
ApiModule --> Mirage
Mirage --> Models
style Browser fill:#1e1b4b,stroke:#6366f1,stroke-width:2px,color:#fff
style ReactApp fill:#2e1065,stroke:#8b5cf6,stroke-width:2px,color:#fff
style ApiModule fill:#2e1065,stroke:#8b5cf6,stroke-width:2px,color:#fff
style Mirage fill:#2e1065,stroke:#8b5cf6,stroke-width:2px,color:#fff
style Models fill:#0f172a,stroke:#3b82f6,stroke-width:2px,color:#fff
The login system verifies credentials against the mock user store, stores a login flag in localStorage, and protects host routes. If a user isn't logged in, they're redirected to the login page with a friendly message. The auth state is checked on every host route to keep things secure.
sequenceDiagram
actor User
participant LoginPage
participant ApiModule as API Module
participant Mirage as MirageJS Server
participant LocalStorage
User->>LoginPage: Enter email & password
LoginPage->>ApiModule: loginUser({email, password})
ApiModule->>Mirage: POST /api/login
Mirage->>Mirage: Find user by email and password
alt User found
Mirage->>ApiModule: { user, token }
ApiModule->>LoginPage: Success
LoginPage->>LocalStorage: Set "loggedin" = true
LoginPage->>User: Navigate to host dashboard
else User not found
Mirage->>ApiModule: 401 { message: "No user with those credentials found!" }
ApiModule->>LoginPage: Error thrown
LoginPage->>User: Show error message
end
The van listing page lets users filter vans by type (simple, rugged, luxury) using URL search parameters. The filter state stays in the URL, so you can share or bookmark filtered views. Clicking a van navigates to its detail page and preserves the filter context, making the back navigation feel seamless.
sequenceDiagram
actor User
participant VansPage
participant ApiModule as API Module
participant Mirage as MirageJS Server
User->>VansPage: Visits /vans
VansPage->>ApiModule: getVans()
ApiModule->>Mirage: GET /api/vans
Mirage->>ApiModule: all vans
ApiModule->>VansPage: vans array
VansPage->>User: Render all vans
User->>VansPage: Click filter (e.g. "Simple")
VansPage->>VansPage: Update searchParams, filter vans by type
VansPage->>User: Show only simple vans
User->>VansPage: Click van tile
VansPage->>User: Navigate to /vans/:id, passing search string
After logging in, hosts land on a dashboard that shows a 30‑day earnings summary, current review score, and all listed vans. The dashboard fetches host‑specific van data from the mock API and renders each van with a quick link to its detail page.
Hosts can drill into each van to see details, pricing, and photos. The host detail layout uses React Router outlet context to share van data between tabs, keeping the interface snappy and consistent.
All endpoints are simulated by a MirageJS server running inside the browser. No external server is needed. Authentication works through a simple login endpoint that returns a mock token; host‑specific endpoints are hard‑coded to return vans for hostId 123.
Description: Returns all available vans.
Response:
[
{
"id": "1",
"name": "Modest Explorer",
"price": 60,
"description": "The Modest Explorer is a van designed...",
"imageUrl": "https://assets.scrimba.com/advanced-react/react-router/modest-explorer.png",
"type": "simple",
"hostId": "123"
},
...
]Errors:
- 400: Generic error (returned if you uncomment the error simulation in server.js)
Description: Returns a single van by its ID.
Response:
{
"id": "1",
"name": "Modest Explorer",
"price": 60,
"description": "...",
"imageUrl": "...",
"type": "simple",
"hostId": "123"
}Errors:
- 404: Van not found
Description: Returns vans belonging to the hard‑coded host (hostId: "123"). This is a quick demo endpoint for the host dashboard.
Response: Same structure as /api/vans, filtered to host vans.
Description: Returns a single host van by ID (only if hostId matches 123).
Response: Same as /api/vans/:id.
Description: Authenticates a user against the mock user store.
Request:
{
"email": "b@b.com",
"password": "p123"
}Response (on success):
{
"user": {
"id": "123",
"email": "b@b.com",
"name": "Bob"
},
"token": "Enjoy your pizza, here's your tokens."
}Errors:
- 401:
{ "message": "No user with those credentials found!" }
Test credentials for the frontend:
- Email:
b@b.com - Password:
p123
-
Clone the repository:
git clone https://github.com/Spectra010s/vanlife.git
-
Navigate into the project directory:
cd vanlife -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and visit the URL shown in the terminal (usually
http://localhost:5173).
Once the app is running, you can:
- Browse vans on the homepage or the /vans page.
- Filter vans by type using the buttons at the top of the van list.
- Click any van to see its details and a "Rent this van" button (currently non‑functional for demo purposes).
- Navigate to /login to sign in with the demo credentials above.
- After login, access the host dashboard at /host to see earnings, reviews, and listed vans.
- Use the host navigation to explore income, reviews, and manage individual vans (details, pricing, photos).
All data is stored in memory and will reset on page refresh.
| Technology | Purpose |
|---|---|
| React 18.2 | UI library |
| React Router 6.4 | Client‑side routing |
| Vite latest | Build tool & dev server |
| MirageJS 0.1.48 | In‑browser mock API server |
| react-icons 4.7.1 | Icon library (used for stars) |
| CSS3 | Styling without any frameworks |
Contributions are welcome. If you'd like to improve Vanlife, please open an issue to discuss your ideas before submitting a pull request. Make sure your code follows the existing style and that all features still work with the mock server.
