VanLife
A responsive van-rental application with Firebase-powered data and authentication, dynamic van pages, and a protected host dashboard.
What I built
VanLife is a responsive van-rental web application built with React and React Router. The project was revisited and substantially improved by replacing its original mock API architecture with Firebase as the application's data source and authentication layer. It provides a customer-facing experience for browsing and filtering vans, viewing dynamic van details, and authenticating as a user, alongside a protected host dashboard for managing van listings and host-specific data. The project also includes improved loading, error, and empty states, as well as responsive UI refinements across the application.
What the application does
Browse van listings
Search and filter vans
Dynamic van detail pages
User registration and login
Firebase authentication
Protected host routes
Host dashboard
Host van management
Host-specific data
Loading, error, and empty states
Responsive interface
See it in action
How it was built
React with React Router and CSS
Firebase Authentication and Cloud Firestore
React Router loaders, actions, nested routes, dynamic routes, protected routes, Firestore security rules, and Vite
Challenges & solutions
Replacing the original MirageJS mock API with Firebase as the application's single source of truth.
Implementing Firebase Authentication and ensuring protected host routes are accessible only to authenticated users.
Structuring Firestore host data so users can manage their own van listings without accessing another user's data.
Configuring Firestore security rules to enforce user-specific access to host data.
Improving loading, error, and empty states to provide clearer feedback during asynchronous operations.
Refining the responsive layout and navigation across customer-facing and host pages.