# Carry Car - Car Sharing App (Mobile First)

***

## Intro

<figure><img src="https://1902731257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyM7CEtjfwUmHTpeDZjma%2Fuploads%2Fo98NMXsNYT5MXDklkEGO%2Fhttps___meta-q.cdn.bubble.io_f1675251346874x558641094629056500_Frame%2520900.png?alt=media&#x26;token=4d522e95-08ba-407b-947e-6247254cad6f" alt=""><figcaption></figcaption></figure>

## Links

🖥️ [Preview link](https://carry-car.bubbleapps.io/)

🌐 [Template page on Bubble Marketplace](https://bubble.io/template/car-sharing-app-mobile-first-1673523613595x176828958139482100)

***

## Screenshots

<div align="center" data-full-width="false"><figure><img src="https://1902731257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyM7CEtjfwUmHTpeDZjma%2Fuploads%2Fo7gqEh4heThXXq4IPpSw%2F1.png?alt=media&#x26;token=62e4d499-991d-4956-b987-9cb5949ec029" alt=""><figcaption><p>Index page</p></figcaption></figure> <figure><img src="https://1902731257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyM7CEtjfwUmHTpeDZjma%2Fuploads%2Fa1Fuu1Y8bjzDhRR0FxTa%2F2.png?alt=media&#x26;token=82341ce9-f3c8-495e-9d11-7697d3149b4d" alt=""><figcaption><p>Features</p></figcaption></figure> <figure><img src="https://1902731257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyM7CEtjfwUmHTpeDZjma%2Fuploads%2FzNaEmjnm0XgT9tntU7xm%2F3.png?alt=media&#x26;token=aa9231cb-ff6a-4444-a8b8-2cb5bd29e65c" alt=""><figcaption><p>Search page</p></figcaption></figure> <figure><img src="https://1902731257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyM7CEtjfwUmHTpeDZjma%2Fuploads%2FDmwu9mFRC1tezkEhILAJ%2F4.png?alt=media&#x26;token=606ed88d-3f5a-4590-8721-2655efd72996" alt=""><figcaption><p>Contact us</p></figcaption></figure> <figure><img src="https://1902731257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyM7CEtjfwUmHTpeDZjma%2Fuploads%2F7sEXjhzAodil4vbDM3WS%2F5.png?alt=media&#x26;token=4610c3c0-ae5e-43ce-954e-781d323f5013" alt=""><figcaption><p>Profile page</p></figcaption></figure> <figure><img src="https://1902731257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyM7CEtjfwUmHTpeDZjma%2Fuploads%2FABbSuVr7fhn3Buslpesy%2F6.png?alt=media&#x26;token=e56b379d-bbc5-47c1-8177-6606db12a960" alt=""><figcaption><p>Register page</p></figcaption></figure></div>

***

## Template details

Carry Car - this is a great template for those who want to open their startup related to car sharing business. Using the admin dashboard, you can easily complete all the basic settings. Indicate the locations where you can pick up the car and where it should be left. Well-implemented admin panel, where you can find all the information about cars and their booking. And for the user, we have prepared a personal account, where he can see available cars for rent and all his previous bookings.\
\
Carry Car template features the following:\
✅ Responsive design\
✅ Demo Admin/User\
✅ Admin dashboard\
✅ User dashboard\
✅ Analytics in the dashboard\
✅ Add and update cars\
✅ Additional services for the bookings\
✅ Car booking\
✅ Displaying detailed data for each booking\
\
We tried to keep all the workflows and design architecture simple for beginner-intermediate users to use and adjust. However, we recommend having at least moderate experience with Bubble to be able to fully use and edit the app’s backend.\
\
If you need any assistance to customize this template for your personal or business project, feel free to reach out to our team via <dev@appassion.io>. We are always there to help build new products and mobile/web applications.\
\
We hope this template would become a great starting point for your project.

{% hint style="warning" %}
*<mark style="color:red;">**Removing the banner**</mark>*

*<mark style="color:red;">**1. Open the app in Bubble editor**</mark>*&#x20;

*<mark style="color:red;">**2. Go to settings -> SEO/Metatags**</mark>*&#x20;

*<mark style="color:red;">**3. Remove the content of "Script in the body"**</mark>*
{% endhint %}

***

## User flows&#x20;

Main user flo&#x77;**:**&#x20;

-> Cars search -> View the selected vehicle page and all the necessary information -> Filling up the required information -> Choosing additional services -> Payment process

***

## Key features

<table data-view="cards"><thead><tr><th></th><th align="center"></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-type="checkbox"></th></tr></thead><tbody><tr><td></td><td align="center"><mark style="color:orange;"><strong>INTUITIVE BOOKING SYSTEM</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>RESPONSIVE DESIGN</strong></mark></td><td></td><td></td><td>false</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>VEHICLE VARIETY</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>FLEXIBLE RENTAL OPTIONS</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>TRANSPARENT PRICING</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>CUSTOMER SUPPORT</strong></mark></td><td></td><td></td><td>false</td></tr></tbody></table>

## Fijo Overview | Starter tips&#x20;

Based on commonly asked questions, we've prepared a list of basic tips for those who are just starting on Bubble and want to navigate through their dream projects.

If you have any questions, feel free to leave a comment or reach out to us via <dev@appassion.io>.

## Workflows&#x20;

### Primary colors and their purposes

### **Green**

Emphasizes actions related to creating or modifying records in the database, indicating successful operation completion.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/yM7CEtjfwUmHTpeDZjma/blobs/rqQCnkwyvdtQu1Xevvko/exmp%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/yM7CEtjfwUmHTpeDZjma/blobs/EppSo1HDVyf1hfiXcN7y/exmp%202.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Red**

Designated for actions involving deletion or resetting of values, aiding users in quickly identifying them.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/yM7CEtjfwUmHTpeDZjma/blobs/ocUtaU6jfzY78oSY0IOM/exmp%203.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/yM7CEtjfwUmHTpeDZjma/blobs/sQcKy709HPl9pHeTNMNI/exmp%204.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Blue**

Reserved for actions that do not impact application resources, such as opening or closing pop-up windows.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/yM7CEtjfwUmHTpeDZjma/blobs/mQx25Nd5iqQotYTOGNy0/exmp%205.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/yM7CEtjfwUmHTpeDZjma/blobs/sGLkKMzRB9FkE48cRB29/exmp%206.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Orange**

Used for actions related to app navigation, providing ease of orientation within the interface.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/yM7CEtjfwUmHTpeDZjma/blobs/iivNpAN9XOtsoYkgBuH8/exmp%207.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/yM7CEtjfwUmHTpeDZjma/blobs/XuxSvBUQ4fTCfEMGSebB/exmp%208.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Brown**

&#x20;Utilized for custom workflows and API work, highlighting these actions among others.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/yM7CEtjfwUmHTpeDZjma/blobs/4yUJZ4hDj3af2jQZVeGw/exmp%209.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/yM7CEtjfwUmHTpeDZjma/blobs/PWZ5nsxX672twqmVVgEy/exmp%2010.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Purple**

Left to the developer's discretion for assigning color to actions as they see fit.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/yM7CEtjfwUmHTpeDZjma/blobs/dpgyTo7QxHNhQ9T1ELIa/purple%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/yM7CEtjfwUmHTpeDZjma/blobs/cHBdnbL7YFWEoZbXjLbo/purple%202.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Cyan**

&#x20;**I**ntended for actions involving the use of Custom Events, ensuring ease of perception for complex operations.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/yM7CEtjfwUmHTpeDZjma/blobs/RltuJ0Oxqk2hqsGAlOz3/cyan%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/yM7CEtjfwUmHTpeDZjma/blobs/8WoPer4mflQqCgf5KmSm/cyan%202.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Grey**

Employed for all other actions not covered by other colors, aiding in making the interface clear and balanced.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/yM7CEtjfwUmHTpeDZjma/blobs/J5HytJo7BjkdBKSY3Inx/grey%201.svg" alt="" width="352"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
These standards are purely recommendations. Possible discrepancies do not affect the functionality of the application.
{% endhint %}

***

## Pages

*Below, you will find a list of all the pages available on this platform, along with a brief description of their functionality.*

\ <mark style="color:orange;">**Index:**</mark> Begin your journey into the world of car renting with our comprehensive landing page, offering insights into our services, vehicle options, and rental processes.

<mark style="color:orange;">**Car Page:**</mark> Explore our vast collection of vehicles available for rent, each meticulously detailed with specifications, images, and rental options to suit your needs.

<mark style="color:orange;">**Contact Us:**</mark> Connect effortlessly with our team through our user-friendly contact page, ensuring prompt assistance and support for all your inquiries and concerns.

<mark style="color:orange;">**Login:**</mark> Access your personalized account securely with our easy-to-use login page, providing seamless access to your dashboard and rental history.

<mark style="color:orange;">**User dashboard:**</mark> Manage your car rental experience efficiently with our intuitive user dashboard, featuring booking details, payments, favorite cars, and account settings for a personalized experience.

<mark style="color:orange;">**Admin dashboard:**</mark> Streamline your rental business operations with our robust admin dashboard, offering comprehensive management tools for vehicle listings, bookings, user interactions, car brands, additional services, locations and feedbacks.

<mark style="color:orange;">**Car Rent:**</mark> Embark on a hassle-free car rental journey with our streamlined booking process, providing flexible rental options and transparent pricing for a seamless experience.

<mark style="color:orange;">**Docs:**</mark> Access all necessary platform documentation, including Privacy Policy, Terms & Conditions, and Frequently Asked Questions (FAQ).

<mark style="color:orange;">**Search:**</mark> Find your ideal rental vehicle quickly and easily with our powerful search functionality, allowing you to filter by location, vehicle type, and rental dates for tailored results.

<mark style="color:orange;">**Reset password:**</mark> Effortlessly regain access to your account with our convenient password reset feature, ensuring uninterrupted access to our car rental services.

***

## Reusable elements

1. **Car Card** - this element is used to display information about the most rented cars. Used in the following pages: <mark style="color:orange;">index, search</mark>.
2. **Footer** - a section at the bottom of a web page containing additional information such as contacts and links. Used in the following pages: <mark style="color:orange;">index, car\_page, contact\_us, user\_dashboard, car\_rent, docs, search.</mark>
3. **Header** - the top part of a web page containing the logo, application name, navigation elements, and other important components. Used in the following pages: <mark style="color:orange;">index, car\_page, contact\_us, user\_dashboard, car\_rent, docs, search.</mark>
4. **Mobile nav** - this element is used to display navigation specifically designed for small screens, especially for phones. Used in the following pages: <mark style="color:orange;">index, car\_page, contact\_us, user\_dashboard, car\_rent, docs, search.</mark>

***

## Data Types

### Additional Services

This data type is designed for storing all information about Additional Services.

| Field name    | Type     | Notes                          |
| ------------- | -------- | ------------------------------ |
| `Description` | `Text`   | Additional service description |
| `Name`        | `Text`   | Additional service name        |
| `Price`       | `Number` | Additional service price       |

### Booking

This data type is designed for storing information related to Booking.&#x20;

| Field name            | Type                                                      | Notes                       |
| --------------------- | --------------------------------------------------------- | --------------------------- |
| `Additional Services` | `List of` [`Additional Serviceses`](#additional-services) | Booking additional services |
| `Booking ID`          | `Number`                                                  | Booking id                  |
| `Car`                 | [`Car`](#car)                                             | Booking car                 |
| `Drop off Datetime`   | `Date`                                                    | Booking drop off date       |
| `Drop off Location`   | [`Location Adresses`](#location-adresses)                 | Booking location address    |
| `Feedbacks`           | `List of` [`Feedbacks`](#feedback)                        | Booking feedbacks           |
| `Payment`             | [`Credit Cards`](#credit-cards)                           | Booking payment             |
| `Pick up Datetime`    | `Date`                                                    | Booking pick up date        |
| `Pick up Location`    | [`Location Adresses`](#location-adresses)                 | Booking pick up location    |
| `Status`              | `Booking Status`                                          | Booking status              |
| `Total price`         | `Number`                                                  | Booking price               |
| `User`                | [`User`](#user)                                           | Booking user                |

### Car

This data type is designed for storing information related to Car.

| Field name     | Type                                                            | Notes            |
| -------------- | --------------------------------------------------------------- | ---------------- |
| `Bags`         | `Number`                                                        | Car bags number  |
| `Brand`        | `Option set:` [`Car Brands`](#car-brands-1)                     | Car brand name   |
| `Car ID`       | `Number`                                                        | Car id           |
| `Class`        | `Option set:` [`Car Classes`](#car-classes)                     | Car Class        |
| `Description`  | `Text`                                                          | Car description  |
| `Engine Type`  | `Option set:` [`Car Engine Type`](#car-engine-type)             | Engine car       |
| `Feedbacks`    | `List of` [`Feedbacks`](#feedback)                              | Car feedbacks    |
| `Location`     | `Geographic Address`                                            | Location car     |
| `Model`        | `Text`                                                          | Car model        |
| `Photos`       | `List of Images`                                                | Car photos       |
| `Price`        | `Number`                                                        | Car price        |
| `Range`        | `Number`                                                        | Car range        |
| `Rating`       | `Number`                                                        | Car rating       |
| `Search`       | `Text`                                                          | Car search name  |
| `Seats`        | `Number`                                                        | Car seats number |
| `Status`       | `Option set:` [`Car Status`](#car-status)                       | Car status       |
| `Top Speed`    | `Number`                                                        | Car max speed    |
| `Transmission` | `Option set:` [`Car Transmission Type`](#car-transmission-type) | Car transmission |

### Car Brands

This data type is designed for storing information regarding Car Brands.

| Field name | Type    | Notes       |
| ---------- | ------- | ----------- |
| `Logo`     | `Image` | Brand logo  |
| `Title`    | `Text`  | Brand title |

### Credit Cards

This data type is designed for storing information regarding Credit Cards.&#x20;

| Field name   | Type            | Notes                   |
| ------------ | --------------- | ----------------------- |
| `Expires On` | `Date`          | Credit card expiry date |
| `Holder`     | `Text`          | Credit card holder      |
| `Number`     | `Text`          | Credit car number       |
| `User`       | [`User`](#user) | Credit card user        |

### Feedback

This data type is designed for storing information regarding Feedbacks.

| Field name       | Type                  | Notes                   |
| ---------------- | --------------------- | ----------------------- |
| `Author`         | [`User`](#user)       | Feedback author         |
| `Booking`        | [`Booking`](#booking) | Booking feedback        |
| `Comment`        | `Text`                | Feedback comments       |
| `Published Date` | `Date`                | Feedback published date |
| `Rating`         | `Number`              | Feedback rating         |

### Location Adresses

This data type is designed for displaying preview of Location Addresses.

| Field name | Type                                        | Notes            |
| ---------- | ------------------------------------------- | ---------------- |
| `Address`  | `Text`                                      | Location address |
| `City`     | [`Location Cities`](#location-cities)       | City name        |
| `Country`  | [`Location Countries`](#location-countries) | Country name     |
| `Display`  | `Text`                                      | Location display |

### Location Cities

This data type is designed for storing all information related to Location Cities.<br>

| Field name   | Type                                        | Notes              |
| ------------ | ------------------------------------------- | ------------------ |
| `Country`    | [`Location Countries`](#location-countries) | Country name       |
| `Full Name`  | `Text`                                      | Full name of city  |
| `Short Name` | `Text`                                      | Short name of city |

### Location Countries

This data type is designed for storing all Location Countries.<br>

| Field name   | Type   |                       |
| ------------ | ------ | --------------------- |
| `Full Name`  | `Text` | Full name of country  |
| `Short Name` | `Text` | Short name of country |

### User

This data type is designed for storing user related information and precisely to indicate user type. <br>

| Field name               | Type                                                                 |                             |
| ------------------------ | -------------------------------------------------------------------- | --------------------------- |
| `Address`                | `Text`                                                               | User  address               |
| `Birth Date`             | `Date`                                                               | User birthday               |
| `City`                   | `Option set:` [`Cities`](#cities)                                    | User city                   |
| `Country`                | `Option set:` [`Countries`](#countries)                              | User country                |
| `Driver License Date`    | `Date`                                                               | User driver license date    |
| `Driver License ID`      | `Text`                                                               | User driver license id      |
| `Driver License Country` | `Option set:` [`Driver License Cuntries`](#driver-license-countries) | User driver license country |
| `Driver License Photos`  | `List of Images`                                                     | User driver license photos  |
| `Favorites`              | `List of` [`Cars`](#car)                                             | User favorite cars          |
| `First Name`             | `Text`                                                               | User first name             |
| `Gender`                 | `Option set:` [`Gender`](#gender)                                    | User gender                 |
| `Last Name`              | `Text`                                                               | User last name              |
| `Password Modified Date` | `Date`                                                               | User password modified date |
| `Phone`                  | `Text`                                                               | User phone number           |
| `Profile Image`          | `Image`                                                              | User profile image          |
| `Search`                 | `Text`                                                               | User search name            |
| `User Type`              | `Option set:` [`User Type`](#user-type)                              | Type of user                |
| `Email`                  | `Text`                                                               | User email                  |

***

## Option sets&#x20;

#### Banners

* Bugatti Chiron
* Ferrari F8 Tributo

#### Booking Extra Options

* Baby seat
* Navigation systems
* Complete protection
* Cancellation protect

#### Booking Status

* New
* In progress
* Finished

#### Car Brands

* Audi
* Hyundai
* Tesla

#### Car Classes

* All
* Sedan
* Coupe
* Sports car
* Station wagon
* Hatchback
* Convertible
* SUV
* Minivan
* Pickup

#### Car Engine Type

* Electric
* Diesel
* Hybrid
* Gas

#### Car Status

* Available
* Booked
* In service

#### Car Transmission Type

* Automatic
* Manual

#### Cities

* Buenos Aires
* Canberra
* Vienna
* Brasilia
* Santiago
* Beijing
* Bogota
* Copenhagen
* Helsinki
* Paris
* Athens
* New Delhi
* Dublin
* Rome
* Tokyo
* Mexico City
* Chisinau
* Amsterdam
* Oslo
* Lima
* Manila
* Warshaw
* Lisbon
* Bucharest
* Stockholm
* Ankara
* Kiev

#### Countries

* Argentina
* Australia
* Austria
* Brazil
* Chile
* China
* Colombia
* Denmark
* Finland
* France
* Greece
* India
* Ireland
* Italy
* Japan
* Mexico
* Netherlands
* Netherlands
* Peru
* Philippines
* Poland
* Portugal
* Romania
* Sweden
* Turkey
* Ukraine
* Moldova

#### Driver License Countries

* USA
* France

#### Gender

* Male
* Female

#### User Type&#x20;

* Admin
* Customer

***

<figure><img src="https://content.gitbook.com/content/yM7CEtjfwUmHTpeDZjma/blobs/1m4t8QPKhIx6jCBHH12e/Logo-Appassion.png" alt=""><figcaption></figcaption></figure>

The template is available in its current form, however, further alterations can be negotiated.&#x20;

Don't hesitate to reach out to us with any questions, and we'll gladly explore options to accommodate your concepts – Visit us at [<mark style="color:orange;">https://appassion.io/</mark>](https://appassion.io/) or email us at <mark style="color:orange;"><dev@appassion.io></mark>

<mark style="color:orange;">**We are always at your service through:**</mark> [Upwork](https://www.upwork.com/agencies/1472948949083369472/), [Clutch](https://clutch.co/profile/appassion#highlights). \ <br>