xmohammedawad / arabvan

ultimate platform for van rentals, where you can experience the world on wheels! explore rent and have fun

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 [email protected].

Credits

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

Stay Connected

Stay updated and connected with me:

• LinkedIn
• devTo

arabvan's Issues

File separation

It's easy to keep writing into the same file, and hard to decide when to break into multiple files, but generally, none of your css/js files should exceed 120 lines, and maintain 80 as your optimal number.

Pages vs Components

In your structure, you've created two directories, pages and components without clearly distinguishing one from the other in terms of roles, generally, there are two main elements for any interface element, FUNCTIONALITY and DISPLAY.

Usually, pages are looked at as the collection of components that constitute as a full page, there isn't any functionality to the page itself, you as a user don't interact with the page, you interact with elements/components. So your pages should be stripped from all functionality, no states or requests or even hooks called inside your page, they're just displaying your components.

Now for your components, this is where your functionality lies, your component is aware via state management of the state of the application, it is a unit fully responsible for its functionality, so it doesn't need anything from the page to fully render, it already uses the state from the store/url/direct api calls.

Consistent code

https://github.com/MuhmmadAwd/VanLife/blob/5c65ff21841dd3bab573b60312de3cf02027de67/src/components/FetchVans.jsx#L6

It should be clear, at all times, even before seeing any code, at least to you as the developer, where is the state living and where is it coming from.
Sometimes you're using react-dom hooks to get search URL and parameters, sometimes you pass it through props, what is the rule?

Control Access with Custom Claims and Security Rules

I tried to add a Custom claims role. but I found that I need billing account to use functions

Single responsibility principle

Here "Components" doesn't refer to react components, but to the general concept of software components,

https://github.com/MuhmmadAwd/VanLife/blob/ec0748c9f1fa346e969b31b6b6d478d9dd8d27eb/src/pages/Vans/VanDetail.jsx#L12-L25

In your code there is generally a mixup in the roles that a piece of software holds, you assign responsibility to your software as you go, when your software should have a fixed single responsibility from the start of development to the end

This code in VanDetail.jsx - similar to many of your components - is responsible for: Display of UI, the functionality behind the UI, displaying edge cases such as errors and loading, and both declaring and calling the API requests
All of these responsibilities must be separate, it doesn't matter even if you put each into a 3 line file

Separation of Concerns / Single Responsibility Principle

https://github.com/MuhmmadAwd/VanLife/blob/5c65ff21841dd3bab573b60312de3cf02027de67/src/pages/Login.jsx#L6-L25

Set fixed responsibilities for each of the components you write, a component should not do any action it is not responsible for.

In this example, your Login component calls the useLoginForm hook, and then passes all the values directly to the LoginForm component without using any of them, why not just use the useLoginForm directly within the LoginForm component? Is it Login's responsibility to pass these props down to LoginForm? Why?

Programming with resources in mind

https://github.com/MuhmmadAwd/VanLife/blob/ec0748c9f1fa346e969b31b6b6d478d9dd8d27eb/src/pages/Login.jsx#L15-L30

It's rare to find websites that stress either the CPU or the GPU, but memory is an easy-to-abuse resource which sometimes is handled very poorly by developers, one issue that causes memory leaks is not memoizing functions and values.

This login component will rerender every time a character is typed into the username and password fields, and on every render, react is going to tell Javascript to redeclare these handleSubmit and handleChange functions. At this scale, this is not an issue, and this is only possibly going to cost less than a KB of memory, but maintaining this behavior across an entire platform is how you end up with websites that demand 2+ GBs of memory.

Write configurable code

https://github.com/MuhmmadAwd/VanLife/blob/ec0748c9f1fa346e969b31b6b6d478d9dd8d27eb/src/App.jsx#L37-L60

Don't copy paste code, and keep a mentality of writing for larger teams and preparing for larger projects, and even writing code for non-techs or low-techs
In this example, you would have much more accessible code with smaller footprint if you rewrite your routes as a configurable object in this format

type Route = {
  path: string;
  component: React.ReactNode;
  children: Route[]
}

This object would be easy to reconfigure or modify even for someone who doesn't know React, and it's more compact and clear on the long run when you have tens of pages to account for.

Same ideology for your Header.jsx and HostLayout.jsx

Extremely dangerous behavior

https://github.com/MuhmmadAwd/VanLife/blob/ec0748c9f1fa346e969b31b6b6d478d9dd8d27eb/src/api.js#L14-L19

No matter what you think of the project or its future, even if it's just a throwaway project which you're going to delete, always, ALWAYS save your keys, passwords and IDs in private config files, it is an extremely dangerous behavior to write sensitive keys directly into the code.

Write a function that does only one specific task

https://github.com/MuhmmadAwd/VanLife/blob/5c65ff21841dd3bab573b60312de3cf02027de67/src/hooks/useLoginForm.jsx#L16-L34

This also falls under SRP.
Your handleSubmit function is responsible for:

• Setting localStorage item
• Sending login request and handling its state (Status + Error)
• Navigating to the page you came from
  We can assume that setting the local storage falls under handling the login request's state, but it's not the responsibility of this function nor the entire hook to navigate to a different page.

Using unique identifying array keys

https://github.com/MuhmmadAwd/VanLife/blob/5c65ff21841dd3bab573b60312de3cf02027de67/src/components/RenderRoutes.jsx#L6

It should be safe to assume that each route should have a different unique route.path, use that as a key instead of array index.
Here it is not problematic to use array index, but it's generally a good practice to use IDs for keys just in case you ever needed to reorder your array.

Importing just to run

https://github.com/MuhmmadAwd/VanLife/blob/ec0748c9f1fa346e969b31b6b6d478d9dd8d27eb/src/App.jsx#L22

What you intended here is understandable, but generally avoid calling files just for the sake of running them, it could change easy-to-fix issues and bugs into nightmares to trace.