Templates
Template Setup Guides

Ridely - Ride Sharing like Uber Template

Template page link: https://zeroqode.com/template/ridely---ride-sharing-like-uber-template-1501857279453x140151737882509310

Introduction

Ridely is an amazing no-code taxi template. It creates a ride sharing application for any taxi company, or can bring several into one app. This template features both rider's and driver's pages, which are formatted as a mobile app. As well as desktop pages for signup/signin and profile management.

This template is built with taxi services in mind, but it can be used for shuttle busses, ride-sharing etc. It is all up to your creativity and ideas.

Features

  • Mobile design

  • Landing page

  • Driver dashboard

  • Rider dashboard

  • Stripe Payment

  • Facebook Login

  • Integrated Map view using Google Maps Extended and Google places plugin.

  • Admin Dashboard

Payments: See the documentation on how to set Stripe Payments in Bubble App.

Data Structures

User

This template allows for two user types, a rider and a driver type account. Information about this user types are stored within the User. Within this data structure, they are fields that include basic profile details like Last Name, First Name, email, Phone Number. It also contains user Rating, snapshot of the Drivers License, Trip (takes a List of Trips) Driving Experience and so on.

Car

This data type takes information about the car used by a user (provided by the driver). The Car data table has fields like Brand of the car, the car's Color, Full Name, snapshot of the Insurance, License Plate, car Model, a Picture of the car, Selected (takes a value of either Yes or no and is True when a car is selected for use on the platform).

Payment

The payment data type only contains fields that include the Logo, Name and the associated User (takes a list of Users).

Transaction

When rider users takes a ride to their various locations, a fee is charged and paid to the driver user, the Transaction data table holds the information necessary for this process. Within this type, we have fields like the Amount charged for a trip, the CC Last 4 Digits ( found on the back of payment cards), the associated Driver user, the associated Rider user and the Trip.

Trip

The Trip data type holds all the details about a particular trip on the platform, it includes fields like the Cost, the Starting Point, Destination, Direction (takes a List of geographic addresses), Distance(API), the associated Driver and Rider, Duration(API) of the trip, End Time of the trip, Payment Received (takes a value of yes or no and is true when payment is received), Pickup Time, Transaction and Rating

Pages

index

The landing page of the template shows an overview of how the platform works, provides a call to action on user login and signup as either a driver or a rider.

Custom States

The index page has no custom states.

app_rider

This page provides the user the option to Get a Ride and also houses a list link of rider information that include the history of the rides, details on payment methods and transactions, Help (this displays a view with answers to frequently asked questions and so on), and the option to log out as a user. Note that when a user is not logged in, this page would prompt user to create an account or login with already existing account details.

Custom States

States

Elements

Note

selected

Group Ride Info Header, Group Driver Header

This state is used to display a view and is true when the ride or Driver information is displayed

page

app_rider

This state also determines view that is displayed.

selected

Materiallcon menu

This state is used on the navigation button to toggle (hide and show) between views.

user_type

Group User Signup

Used to set and determine the signup view to display

credentials

Popup Email

credentials state is either yes or no and is true when the Popup email view is shown or visible.

driver_profile_3

This is the driver user's profile page. within this page, there is a tab view with three tab items that include MY TRIPS (this tab item when active populates the list of trips the driver has taken below the tab view), PAYMENT (shows the driver's Card Details) and PROFILE (when this tab item is active, the user's details are displayed).

Custom States

States

Elements

Note

selected

Button PAYMENT, Button PROFILE, Button MY TRIPS

This state is used on the tab items PAYMENT, PROFILE, MY TRIPS to toggle (hide and show) between views.

status

Button Connect Payment

When the Connect Payment button within the PAYMENT TAB is clicked, this state sets and displays a view.

selected

Group Car in RG, Group Trip Panel Driver

Also in these elements, this state sets a view.

index_old

This is a previous layout for the index page.

signin_signout_driver

This page houses the sign in view that provides a form for the user's (driver) login credentials and also the signup view.

Custom States

States

Element

Notes

selected

Button Upgrade Driver!

This state is set on the Upgrade button that becomes visible when an email that is already in use is used for another account type.

app_driver

Like the app_rider page, this page provides a link list of items, but in this case the details are for the driver user. This list items include Go for a Ride, Rides History, Payment, Profile, Vehicle (on clicking this link, a view is populated with a form to take car details such as the brand, model, license plate number, etc), Help and Log out.

Custom States

States

Elements

Notes

screen

app_driver

Used to set and display a view

ride info

Group Ride

This state's value is either yes or no and is true when set view is displayed.

menu

FloatingGroup Top Menu

This state is set on the menu button and is used to make a view visible.

credentials

Popup Email

The view with the form that takes the inputs email and password for editing credentials is made visible or invisible using this state.

cities

This is a simple page with background image (static image) and a few elements. It has no custom states.

help

The help page displays a static content that an assists the users and answers frequently asked questions and it has no custom states.

rider_profile

This page is similar to the driver_profile_3 page. It contains a map view as background and a tab view with MY TRIPS, PAYMENT and PROFILE as the tab items.

Custom States

States

Elements

Notes

selected

Button PROFILE, Button PAYMENTS, Button MY TRIPS

In these elements, this state is used to alternate between the views that belong to different tab items.

selected

Group Trip Panel

Within the MY TRIPS view, the Group Trip Panel element is set with this state and it is used to display a view.

signin_signup_rider

This page contains views for the users(rider) sign-up and sign-in forms.

Custom States

States

Element

Notes

selected

Button Upgrade Driver!

This state is set on the Upgrade button that becomes visible when an email that is already in use is used for another account type.

Specific Reference

Payments

To setup your stripe account, go to stripe.com, create an account. You will be allowed to access your dashboard once you have successfully verified your email address and activated your account.

Click on Developers and then, API keys. copy your API keys. Ensure to use a live API key when your template goes live

Paste the API keys in the stripe connector calling the plugin.

Things to note

Demo to preview the template