Skip to content

Commit 2fdc59f

Browse files
committed
fix: update README.md for readability
1 parent d13168c commit 2fdc59f

File tree

5 files changed

+122
-1
lines changed

5 files changed

+122
-1
lines changed

β€ŽREADME.mdβ€Ž

Lines changed: 122 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,122 @@
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+
![Landing page](screenshots/image-1.png)
24+
![About page](screenshots/image-2.png)
25+
![Vans page](screenshots/image-3.png)
26+
![Login page](screenshots/image-4.png)
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.

β€Žscreenshots/image-1.pngβ€Ž

688 KB
Loading

β€Žscreenshots/image-2.pngβ€Ž

194 KB
Loading

β€Žscreenshots/image-3.pngβ€Ž

726 KB
Loading

β€Žscreenshots/image-4.pngβ€Ž

42.8 KB
Loading

0 commit comments

Comments
Β (0)