Arab Van App

Welcome to your ultimate platform for van rentals,
where you can experience the world on wheels!

Live Url

---

If you like presentation instead of boring text here it's

• Arab Van presentation

---

Table of Contents

• Roles
• Technologies
• Getting Started
• Pages
  • Homepage (Home)
  • Van Listings (Vans)
  • Van Detail Page (VanDetail)
  • User Profile (Profile)
  • Host Dashboard (Dashboard)
• API Endpoint
• Contributing
• License
• Feedback
• Credits
• Stay Connected

Roles

The Arab Van App serves two key roles:

• User: As a user, you can explore and rent vans for your adventures.
• Host: Hosts have the opportunity to list their vans for rent and manage their listings.

  Due to limitations in my free Firebase account, I opted for an alternative approach to implement user roles within the app. Instead of deploying custom functions, I utilized the simplicity of localStorage in conjunction with a custom hook to manage user roles effectively.

Technologies

This app is crafted with the following technologies:

• React 18
• Vite
• React Router 6
• Firebase (Firestore,Authentication)

Getting Started

1. Clone the repository:

   git clone https://github.com/your-username/react-rental-app.git

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Pages

App Structure:

└── Layout
   ├── Home
   ├── Vans
   │
   ├── VanDetail
   │   ├── VanInfo
   │   └── VanReviews
   │
   ├── Login
   ├── Signup
   │
   ├── AuthRequired
   │   └── Checkout
   │
   ├── Profile
   │
   └── NotFound
   │
   └── AuthRequired (for Hosts)
       └── RoleBasedComponent
           ├── Dashboard
           ├── HostReviews
           ├── HostVans
           │
           ├── HostVanDetail
               ├── HostVanInfo
               ├── HostVanPricing
               └── HostVanPhotos

Homepage (Home)

Immersive landing page with GSAP-powered animations, high-quality images, and smooth scrolling for an engaging user experience.

1. GSAP Animation Magic: Elevate user engagement with seamless transitions and captivating animations throughout.
2. Visual Delight: Stunning images provide a glimpse of our rental service's essence in each section.
3. Effortless Exploration: Enjoy smooth scrolling, powered by the custom 'Lenis' library, for easy navigation.

Van Listings (Vans)

Browse a comprehensive list of vans available for rent, complete with enticing images and detailed descriptions.

Van Detail Page (VanDetail)

Get up close and personal with a specific van. Explore high-resolution images, read user reviews, and even rent the van directly.

• Nested Page: Van Info

Van Info

A subpage within Van Detail, providing essential information about the van's specifications.

• Nested Page: Van Reviews

Van Reviews

Read what others have to say about their rental experiences with this van.

User Profile (Profile)

View and edit your user profile, including your display name and profile picture.

Host Dashboard (Dashboard)

Hosts can efficiently manage their van listings, reviews, and track rental income in this dedicated dashboard.

API Endpoint

Our app communicates with Firebase Firestore to store and retrieve van listings and user data. Firestore powers the seamless interaction between users and hosts, making the experience smooth and efficient.

API Endpoints

Click to expand

Home

• Welcome

---

Vans

• Get All Vans
• Get Van by ID
• Get Host Vans
• Get Host Van by ID
• Add Van
• Add Review
• Get Van Reviews

---

Host

• Get Host Reviews
• Rent Van
• Get User Profile
• Update User Profile

Contributing

We welcome contributions from the community! If you'd like to enhance the app, fix bugs, or add exciting features.

License

This project is licensed under the MIT License.

Feedback

We highly value your feedback! If you have any questions, suggestions, or encounter any issues, please feel free to reach out to us at xMohamedAwad@gmail.com.

Credits

• Developed by MohamedAwad
• Special thanks to the open-source community.

Stay Connected

Stay updated and connected with me:

• LinkedIn
• devTo