VanLife is a modern web application that allows users to explore, rent, and list vans for unique travel experiences. Built with React and React Router, this frontend application provides a seamless interface for van enthusiasts to connect, rent, and host vans.
- Browse available vans
- Filter vans by type (simple, luxury, rugged)
- Fake authentication system
- User profile management
- Van listing dashboard
- Income tracking per van
- Van details and performance metrics
- Add and manage van listings
- Frontend: React
- Routing: React Router v6.4
- State Management: React Hooks
- Styling: CSS Modules
- Mock Backend: Local JSON data / Mirage JS (optional)
- Node.js (v14 or later)
- npm or Yarn
- Clone the repository
git clone https://github.com/premdood/van-life-app.git- Navigate to project directory
cd van-life-app- Install dependencies
npm install- Start the development server
npm startThe app features a simulated authentication system with:
- Login/Logout functionality
- Protected routes for hosts
- Basic user role management
- User logs in with mock credentials
- Receive simulated authentication token
- Access protected routes based on user role
- Grid of available vans
- Filters by van type
- Search functionality
- Van listing management
- Income tracking
- Van performance metrics
Implemented with React Router featuring:
- Public routes
- Protected host routes
- Dynamic van detail pages
- Nested routing for host sections
Easy to extend with:
- Additional van types
- More detailed host analytics
- Enhanced filtering options
- Implement actual backend integration
- Add booking system
- Create more detailed user profiles -Enhance van recommendation algorithm
- Mock authentication system
- Static data sources
- Limited error handling
Disclaimer: This is a frontend demonstration project with mock data and authentication.