|
1 | | -The vanlife website is a platform where users can rent vans for trips. Technologies used for this project are React and React Router. |
| 1 | +# π VanLife App |
| 2 | + |
| 3 | +## π Project Overview |
| 4 | + |
| 5 | +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. |
| 6 | + |
| 7 | +## π Key Features |
| 8 | + |
| 9 | +### User Features |
| 10 | +- Browse available vans |
| 11 | +- Filter vans by type (simple, luxury, rugged) |
| 12 | +- Fake authentication system |
| 13 | +- User profile management |
| 14 | + |
| 15 | +### Host Features |
| 16 | +- Van listing dashboard |
| 17 | +- Income tracking per van |
| 18 | +- Van details and performance metrics |
| 19 | +- Add and manage van listings |
| 20 | + |
| 21 | +## π₯οΈ Screenshots |
| 22 | + |
| 23 | + |
| 24 | + |
| 25 | + |
| 26 | + |
| 27 | + |
| 28 | +## π οΈ Technologies Used |
| 29 | + |
| 30 | +- **Frontend**: React |
| 31 | +- **Routing**: React Router v6.4 |
| 32 | +- **State Management**: React Hooks |
| 33 | +- **Styling**: CSS Modules |
| 34 | +- **Mock Backend**: Local JSON data / Mirage JS (optional) |
| 35 | + |
| 36 | +## π Getting Started |
| 37 | + |
| 38 | +### Prerequisites |
| 39 | +- Node.js (v14 or later) |
| 40 | +- npm or Yarn |
| 41 | + |
| 42 | +### Installation |
| 43 | + |
| 44 | +1. Clone the repository |
| 45 | +```bash |
| 46 | +git clone https://github.com/premdood/van-life-app.git |
| 47 | +``` |
| 48 | + |
| 49 | +2. Navigate to project directory |
| 50 | +```bash |
| 51 | +cd van-life-app |
| 52 | +``` |
| 53 | + |
| 54 | +3. Install dependencies |
| 55 | +```bash |
| 56 | +npm install |
| 57 | +``` |
| 58 | + |
| 59 | +4. Start the development server |
| 60 | +```bash |
| 61 | +npm start |
| 62 | +``` |
| 63 | + |
| 64 | +## π Authentication |
| 65 | + |
| 66 | +The app features a simulated authentication system with: |
| 67 | +- Login/Logout functionality |
| 68 | +- Protected routes for hosts |
| 69 | +- Basic user role management |
| 70 | + |
| 71 | +### Authentication Flow |
| 72 | +1. User logs in with mock credentials |
| 73 | +2. Receive simulated authentication token |
| 74 | +3. Access protected routes based on user role |
| 75 | + |
| 76 | +## π Key Components |
| 77 | + |
| 78 | +### Vans Page |
| 79 | +- Grid of available vans |
| 80 | +- Filters by van type |
| 81 | +- Search functionality |
| 82 | + |
| 83 | +### Host Dashboard |
| 84 | +- Van listing management |
| 85 | +- Income tracking |
| 86 | +- Van performance metrics |
| 87 | + |
| 88 | +## π¦ Routing |
| 89 | + |
| 90 | +Implemented with React Router featuring: |
| 91 | +- Public routes |
| 92 | +- Protected host routes |
| 93 | +- Dynamic van detail pages |
| 94 | +- Nested routing for host sections |
| 95 | + |
| 96 | +## π§ Customization |
| 97 | + |
| 98 | +Easy to extend with: |
| 99 | +- Additional van types |
| 100 | +- More detailed host analytics |
| 101 | +- Enhanced filtering options |
| 102 | + |
| 103 | +## π Planned Features |
| 104 | + |
| 105 | +- Implement actual backend integration |
| 106 | +- Add booking system |
| 107 | +- Create more detailed user profiles |
| 108 | +-Enhance van recommendation algorithm |
| 109 | + |
| 110 | +## π Known Issues |
| 111 | + |
| 112 | +- Mock authentication system |
| 113 | +- Static data sources |
| 114 | +- Limited error handling |
| 115 | + |
| 116 | +## π Contact |
| 117 | + |
| 118 | +Prem Singh - [LinkedIn](https://www.linkedin.com/in/premdood) |
| 119 | + |
| 120 | +--- |
| 121 | + |
| 122 | +**Disclaimer**: This is a frontend demonstration project with mock data and authentication. |
0 commit comments