Skip to content

Overview

Akram El Assas edited this page Jun 22, 2024 · 12 revisions

In this section, you'll see the main pages of the frontend, the backend and the mobile app.

Frontend

From the frontend, the user can search for available cars, choose a car and checkout.

Below is the main page of the frontend where the user can choose pickup and drop-off points and time, and search for available cars.

Frontend

Below is the search result of the main page where the user can choose a car for rental.

Frontend

Below is the checkout page where the user can set rental options and checkout. If the user is not registered, he can checkout and register at the same time. He will receive a confirmation and activation email to set his password if he is not registered yet.

Frontend

Below is the sign in page. On production, authentication cookies are httpOnly, signed, secure and strict sameSite. These options prevent XSS, CSRF and MITM attacks. Authentication cookies are protected against XST attacks as well via a custom middleware.

Frontend

Below is the sign up page.

Frontend

Below is the page where the user can see and manage his bookings.

Frontend

Below is the page where the user can see a booking in detail.

Frontend

Below is the contact page.

Frontend

Below is the car rental locations page.

Frontend

Below is the page where the customer can see and manage his notifications.

Frontend

There are other pages but these are the main pages of the frontend.

Mobile App

From the mobile app, the user can search for available cars, choose a car and checkout.

The user can also receive push notifications, if the status of his booking is updated.

Below is the main page of the mobile app where the user can choose pickup and drop-off points and time, and search for available cars.

Below is the search result of the main page where the user can choose a car for rental and checkout.

Below are sign in and sign up pages.

Below are the pages where the user can see and manage his bookings.

Below are the pages where the user can update his profile information, change his password and see his notifications.

That's it for the main pages of the mobile app.

Backend

BookCars is supplier oriented. This means that there are three types of users:

  • Admin: He has full access on the backend. He can do everything.
  • Supplier: He has restricted access on the backend. He can only manage his cars and bookings.
  • User: He has only access to the frontend and the mobile app. He cannot access the backend.

BookCars is designed to work with multiple suppliers. Each supplier can manage his car fleet and bookings from the backend. BookCars can also work with only one supplier as well.

From the backend, the admin user can create and manage suppliers, cars, locations, users and bookings.

When the admin user creates a new supplier, the supplier will receive an automatic email for creating his account to access the backend so he can manage his car fleet and bookings.

Below is the sign in page of the backend.

Backend

Below is the dashboard page of the backend where admins and suppliers can see and manage bookings.

Backend

Below is the page where car fleet is displayed and can be managed.

Backend

Below is the page where admins and suppliers can create new cars by providing an image and car info. For car options to be included for free, set 0 for the corresponding car option. Otherwise, set the price of the option or leave it empty if you don't want to include it.

Backend

Below is the page where admins and suppliers can edit cars.

Backend

Below is the page where admins can manage platform users.

Backend

Below is the page where to edit bookings.

Backend

There are other pages but these are the main pages of the backend.