Ionic 4 Car Pooling App Starter — Features Overview
Tags: ionic, ridesharing, carpooling
Published: 2020-03-29 19:07:15

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-withAccentColors" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="5d80" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="b814" class="graf graf--p graf-after--figure is-selected">Carpooling is the sharing of car journeys so that more than one person travels in a car, and prevents the need for others to have to drive to a location themselves. Growing population lead to more vehicles on the road thus increasing traffic congestion and pollution.</p><p name="eefe" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Carpool </strong>is carpooling or ride-sharing app template built in Ionic 4. With this template, you can create apps like BlaBla Car, UberPool, Ola Share, etc. With this starter kit, you can build a full working cab booking and sharing application to provide services to the people at an extremely convenient way, You only have to integrate a back-end server to make it fully functional.</p><figure tabindex="0" contenteditable="false" name="d8a9" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 480px; max-height: 270px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*QPwHCJUelG1xy-yPK5DmUg.gif" data-width="480" data-height="270" src="https://cdn-images-1.medium.com/max/800/1*QPwHCJUelG1xy-yPK5DmUg.gif"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="c4cc" class="graf graf--h3 graf-after--figure">How can I use this&nbsp;template</h3><p name="7ddb" class="graf graf--p graf-after--h3">This template is a ready-made front-end template for a carpooling and ride-sharing App. You can use the screens coded in this app, navigation between the screens and specific functions applied to buttons, etc. This saves your 100% cost and time in front-end UI development. You can simply add a back-end/server to this app template, and replace the demo data with data coming from your server. This way, you only spend time and money on back-end development. You can easily change the screens, styles, and logics to suit your requirements. To make it a live app like BlaBla Car, UberPool, ToGo, Uber Eats, and Ola Share, etc. you just need to add a back-end to the app, and load your data in the back-end.</p><figure tabindex="0" contenteditable="false" name="d98c" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 700px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*t2brU6K3ognGtSQXodLRKA.jpeg" data-width="800" data-height="800" src="https://cdn-images-1.medium.com/max/800/1*t2brU6K3ognGtSQXodLRKA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="a7b2" class="graf graf--p graf-after--figure">This template is made in IONIC 4 language. With IONIC 4, you can</p><ul class="postList"><li name="67ce" class="graf graf--li graf-after--p">Create iOS and an Android app with a single source code</li><li name="5272" class="graf graf--li graf-after--li">Cut your project cost and time in half</li><li name="42cd" class="graf graf--li graf-after--li">Ensure exact same UI in iOS and Android, while following the standard UI norms</li><li name="8d95" class="graf graf--li graf-after--li">Saves separate updates for each app in future</li></ul><h3 name="b40b" class="graf graf--h3 graf-after--li">Features of this&nbsp;template</h3><h4 name="6de2" class="graf graf--h4 graf-after--h3">Screens</h4></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="c932" class="graf graf--figure graf--layoutOutsetCenter graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 589px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.4%;"></div><img class="graf-image" data-image-id="1*7OflEcKyHqSy0eocSJ69uw.png" data-width="1460" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*7OflEcKyHqSy0eocSJ69uw.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="01d8" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Landing<br></strong>You will get this screen as the app loads successfully after the splash screen timeout. Here you are provided with two options on this screen one is log in and another one is signup. If a user already exists then he/she may opt for login or if he/she has no account on this application then the user will have to create an account by clicking on the signup button.<br>This page navigates you to the login page and signup page. Here this page only UI for demo purpose but you can make it a fully working application by integrating backend to it with the help of a good backend developer.</p><p name="dcec" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Login<br></strong>This page can be accessed from the Landing page as the app loads. By clicking on the login button after the required entries in the input field it redirects you to the home page. The login page can be used to perform login action with username/email and password. Currently, the login is only for demo purposes. The login page also contains “Forgot Password” and “Signup” page navigations.</p><p name="02b5" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Signup<br></strong>This page can be accessed as the app loads. By clicking on the signup button it redirects you to the Home page. The signup page can be used to register a user with a username/email and password. Currently, the signup is only for demo purposes. The signup page also contains “Login page “ page navigations.</p><p name="2682" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Forgot Password<br></strong>This page can be accessed from the “Login” page. Forgot Password page can be used to send a reset password URL or OTP to the user’s email or any other way you want to use. Currently, this page is only UI. The email sent to the user can be verified from their mail and the user may be asked to provide a new password.</p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="bd7f" class="graf graf--figure graf--layoutOutsetCenter graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 589px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.4%;"></div><img class="graf-image" data-image-id="1*MkWE7Y6pX0CuSKbm4mK3TA.png" data-width="1460" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*MkWE7Y6pX0CuSKbm4mK3TA.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="c594" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Home<br></strong>This is the first tab of the application. This page can be accessed after a successful login by a registered user for the application. Home page contains two segments “CURRENT ” and “HISTORY” at the top of the page after the header. The current segment has options to <strong class="markup--strong markup--p-strong">OFFER A RIDE</strong> and <strong class="markup--strong markup--p-strong">FIND A RIDE </strong>options for a user. The history segment has the details of all the rides taken in the past. By clicking on any one options in the current segment, it will navigate to the Offer a ride page or Find a ride page.</p><p name="d0aa" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">History<br></strong>This is the first tab’s second segment of the application. This page can be accessed by clicking on the second segment “History” in the application. This page contains all the information about previous rides.</p><p name="c258" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Offer Ride&#8202;—&#8202;Pick-up<br></strong>This page can be accessed by clicking on<strong class="markup--strong markup--p-strong"> offer a ride</strong> button on the home page. Here you can search for a pickup location of your choice or bu clicking on use current location to access your current location with the help of Ionic geolocation plugin.<br>This page navigates you to your pickup location’s view on the pickup map page.</p><p name="3d1d" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Offer Ride &gt; Pick-up &gt; Map<br></strong>This page can be accessed by clicking on any of the locations in pickup page. This page depicts the exact pick-up location on the map. This page navigates to the drop-off page.</p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="ca83" class="graf graf--figure graf--layoutOutsetCenter graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 589px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.4%;"></div><img class="graf-image" data-image-id="1*tjDxgwEqTzhQ-9H0zZy66g.png" data-width="1460" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*tjDxgwEqTzhQ-9H0zZy66g.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="2251" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Offer Ride&#8202;—&#8202;Drop-off<br></strong>This page can be accessed by clicking on the arrow forward button on the pick-up-map page. Here you can select your drop location same as the pickup location. This page navigates to drop-off map view page.</p><p name="8487" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Offer Ride&#8202;—&#8202;Drop-off&#8202;—&#8202;Map<br></strong>This page can be accessed by clicking on any of the locations in drop-off page. This page depicts the exact drop location on the map. This page navigates to the add stopover page.</p><p name="57f7" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Add Stopover<br></strong>This page can be accessed by clicking on the arrow forward button on the drop-off-map page. Here you can select your stopover in-between the journey. This page navigates to map view page of your complete ride.</p><p name="3924" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Add Stopover&#8202;—&#8202;Complete journey on the map<br></strong>This page can be accessed by clicking on the confirm button on the <strong class="markup--strong markup--p-strong">Add Stopover </strong>page. This page shows the map view of the journey.<br>This page navigates to the calendar page.</p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="8657" class="graf graf--figure graf--layoutOutsetCenter graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 589px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.4%;"></div><img class="graf-image" data-image-id="1*8e9I8MwODh1Y2-uI6ExYXQ.png" data-width="1460" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*8e9I8MwODh1Y2-uI6ExYXQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="754d" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Calendar page<br></strong>This page can be accessed by clicking on the Good for me button on the journey map view after the stopover selection. Here we can select the date of departure for your ride.<br>This page navigates you to the <strong class="markup--strong markup--p-strong">Select Time</strong> page.</p><p name="91c2" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Select time page<br></strong>This page can be accessed by clicking on the arrow-forward button on the select date page. Here we can select the time of departure for the ride.<br>This page navigates to the comfort page.</p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="8079" class="graf graf--figure graf--layoutOutsetCenter graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 589px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.4%;"></div><img class="graf-image" data-image-id="1*jEu7SDpUO4aKTfTJKkUlEQ.png" data-width="1460" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*jEu7SDpUO4aKTfTJKkUlEQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="cd2f" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Comfort page<br></strong>This page can be accessed after the pickup time selection. this page navigates you to the total no of carpool passenger’s page.</p><p name="28d2" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Total passengers<br></strong>This page can be accessed after comfort page by clicking on any button on that page. Here you can select the total number of passengers that you can take with you for the ride.<br>This page navigates you to the permission page to verify either passenger booking instantly or not&nbsp;?.</p><p name="3b50" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Permission to book by Passengers instantly<br></strong>This page can be accessed after total passengers page by clicking on the arrow-forward button at the right end of the page.<br>This page navigates you to the recommended price per se seat page.</p><p name="1277" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Recommended price per seat<br></strong>This page can be accessed after the permission page.<br>This page navigates to the don’t agree or confirmation price page.</p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="5378" class="graf graf--figure graf--layoutOutsetCenter graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 589px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.4%;"></div><img class="graf-image" data-image-id="1*AlsR29H7bTCx8SiLzRB9EQ.png" data-width="1460" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*AlsR29H7bTCx8SiLzRB9EQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="311a" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Price Edit<br></strong>This page can be accessed after the recommended price page. This page navigates to the edit price page.</p><p name="3388" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Price Amount Enter<br></strong>This page can be accessed from the don’t agree page. Here you can edit the price of the journey. This page navigates you to the return trip page.</p><p name="e546" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Return Trip Plan<br></strong>This page can be accessed from the edit price page. This page navigates to the return journey plan Calender.</p><p name="df8e" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Return Trip Plan date selector<br></strong>This page can be accessed from the return trip plan confirmation page. Here you can select the return date of the journey. This page navigates to the return time page.</p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="54d1" class="graf graf--figure graf--layoutOutsetCenter graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 589px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.4%;"></div><img class="graf-image" data-image-id="1*SAqSCCPTLivfLtPOm9iWJA.png" data-width="1460" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*SAqSCCPTLivfLtPOm9iWJA.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="c98a" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Select return time<br></strong>This page can be accessed by clicking on the arrow-forward button on the select return date page. Here we can select the return time of pick for the ride.<br>This page navigates to message for the passenger’s page.</p><p name="4710" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Message for the passengers<br></strong>This page can be accessed after the return time page. Here on this page, the user can add some messages or instructions about his/her ride. This page navigates to the ride confirmation page.</p><p name="4b7c" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Offer Ride Confirmation<br></strong>This page can be accessed after complete ride information. This page navigates to the Home page current segment.</p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="d917" class="graf graf--figure graf--layoutOutsetCenter graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 589px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.4%;"></div><img class="graf-image" data-image-id="1*vfAgnUvdtBn8wdfUkHcKNw.png" data-width="1460" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*vfAgnUvdtBn8wdfUkHcKNw.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="3217" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Home Page&#8202;—&#8202;Current segment&#8202;—&#8202;offered rides<br></strong>This page can be accessed after filling and selecting all the details from the “<strong class="markup--strong markup--p-strong">OFFER A RIDE</strong>” to “<strong class="markup--strong markup--p-strong">RIDE CONFIRMATION</strong>”. This page contains the navigation to journey and stops page.</p><p name="5f18" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Home Page&#8202;—&#8202;Current segment&#8202;—&#8202;offered rides&#8202;—&#8202;Journey and Stops<br></strong>This page can be accessed by clicking on the card in the home page.<br>This page navigates to:-<br>1. Journey &amp; Stops<br>2. Passenger contribution<br>3. Passenger Options<br>4: Delete Offered Journey</p><p name="b586" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Offered Rides&#8202;—&#8202;Journey and Stops&#8202;—&#8202;Journey &amp; stops details<br></strong>This page can be accessed from the Journey &amp; Stops. this page contains the details of the offered journey.</p><p name="7398" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Offered Rides&#8202;—&#8202;Journey and Stops&#8202;—&#8202;Passenger contribution<br></strong>This page can be accessed from the Journey &amp; Stops. This page contains the details of the price offered for the journey. Here you can edit the price and save that.</p><figure tabindex="0" contenteditable="false" name="9169" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 689px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 98.4%;"></div><img class="graf-image" data-image-id="1*k6zKiFyd2dkjGXVXRIddCg.png" data-width="733" data-height="721" src="https://cdn-images-1.medium.com/max/800/1*k6zKiFyd2dkjGXVXRIddCg.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="9eb6" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Offered Rides&#8202;—&#8202;Journey and Stops&#8202;—&#8202;Passenger options<br></strong>This page can be accessed from the Journey &amp; Stops. This page contains the details of the passengers offered for the journey. Here you can edit the number of passengers and message for the passengers and save that.</p><p name="c62d" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Offered Rides&#8202;—&#8202;Journey and Stops&#8202;—&#8202;Delete Offered Journey<br></strong>This page can be accessed from the Journey &amp; stops page by clicking on the delete button at the bottom of the page. This page navigates to the first tab’s first segment.</p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="ed29" class="graf graf--figure graf--layoutOutsetCenter graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1099px; max-height: 721px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 65.60000000000001%;"></div><img class="graf-image" data-image-id="1*wmtEMwUPsiJeh89hYv8E1w.png" data-width="1099" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*wmtEMwUPsiJeh89hYv8E1w.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="d7d8" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Find a ride<br></strong>This is the second tab of the application. This page navigates to the: —</p><ul class="postList"><li name="340c" class="graf graf--li graf-after--p">Destination location</li><li name="57d0" class="graf graf--li graf-after--li">Pickup Location</li><li name="f3b7" class="graf graf--li graf-after--li">Date and time selection</li></ul><p name="cd61" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">Find a ride&#8202;—&#8202;Pickup Location<br></strong>This page can be accessed by clicking on the <strong class="markup--strong markup--p-strong">Pickup location</strong> in the second tab of the application. In this page, we can select the pickup location of our’s using google place prediction.<br>This page navigates back to find a ride page.</p><p name="7220" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Find a ride&#8202;—&#8202;Destination Location<br></strong>This page can be accessed by clicking on the<strong class="markup--strong markup--p-strong"> Destination location</strong> in the second tab of the application. In this page, we can select the destination location of our’s with the help google place prediction.<br>This page navigates back to find a ride page.</p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="22a5" class="graf graf--figure graf--layoutOutsetCenter graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 589px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.4%;"></div><img class="graf-image" data-image-id="1*lIgza91OjVgm7TCbYtjiEQ.png" data-width="1460" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*lIgza91OjVgm7TCbYtjiEQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="b5f3" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Find a ride&#8202;—&#8202;Date and Time<br></strong>These pages can be accessed by clicking on the Date and Time button on the Find a ride page to select the date and time for the ride. This page navigates back to find a ride page. In find ride page after selecting all the information this page navigates to the available rides page by clicking on the search.</p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="47f7" class="graf graf--figure graf--layoutOutsetCenter graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 589px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.4%;"></div><img class="graf-image" data-image-id="1*KrG0d50YwAYl_Pha3LFKUw.png" data-width="1460" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*KrG0d50YwAYl_Pha3LFKUw.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="0ed2" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Find a ride&#8202;—&#8202;Available rides<br></strong>This page can be accessed by clicking on the search on the second tabs of the application after filling/selecting all the required details of the ride. By selecting any ride it navigates to the ride details page.<br>Find a ride&#8202;—&#8202;Available rides details<br>This page can be accessed by clicking on any card in the available rides page. The page contains detailed information about the available ride. This page navigates to the total riding passenger’s page.</p><p name="4e0a" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Find a ride&#8202;—&#8202;Total passengers count<br></strong>This page can be accessed by clicking on the “<strong class="markup--strong markup--p-strong">CONTINUE</strong>” at the bottom of the available ride details page.<br>This page navigates to the “<strong class="markup--strong markup--p-strong">Book</strong>” page.</p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="72e0" class="graf graf--figure graf--layoutOutsetCenter graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1099px; max-height: 721px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 65.60000000000001%;"></div><img class="graf-image" data-image-id="1*TnQY9nVYQ3WRzKeFJrNPyQ.png" data-width="1099" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*TnQY9nVYQ3WRzKeFJrNPyQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="5b06" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Find a ride&#8202;—&#8202;Book ride page<br></strong>This page can be accessed from the total passenger’s count by clicking on the arrow-forward button at the bottom right most of the page. This page navigates to the “<strong class="markup--strong markup--p-strong">Booking confirmation</strong>” page.</p><p name="1600" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Find a ride&#8202;—&#8202;Booking confirmation<br></strong>These pages can be accessed from the “<strong class="markup--strong markup--p-strong">Book ride</strong>” page. This page processes the progress for booking confirmation.<br>This page navigates to the ride booked confirmation page.</p><p name="c589" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Find a ride&#8202;—&#8202;Ride Booked<br></strong>This is the last page of the find a ride flow. This page navigates back to the find ride page after successful ride booking.</p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="2e7c" class="graf graf--figure graf--layoutOutsetCenter graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1099px; max-height: 721px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 65.60000000000001%;"></div><img class="graf-image" data-image-id="1*x6WSHA-NFGJJ6zbrvL239A.png" data-width="1099" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*x6WSHA-NFGJJ6zbrvL239A.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="e798" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Inbox<br></strong>This is the fourth tab of this application. This page contains the nesting of tabs and segments. This page has two segments at the top of the page below the header as “MESSAGES” and “NOTIFICATION”.This is the first segment of the inbox tabs.<br>This page navigates to the Chat page.</p><p name="ee87" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Inbox&#8202;—&#8202;Messages-Chat<br></strong>This page can be accessed by clicking on any chat contact in the “MESSAGES” segment. Messages page contains the chat application for direct interaction to the carpool customer service. Here chat is only UI and for demo purpose.</p><p name="1bf1" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Inbox&#8202;—&#8202;Notification<br></strong>This is the second segment of the inbox tabs. This page contains the notification as list items in the vertical direction of the page. To enable and disable mobile notifications, you will first need a Push notifications system in your back-end. If you are using Firebase&#8202;—&#8202;implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notification<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"> here</a>.</p><p name="eb1f" class="graf graf--p graf-after--p">You will first need a Push notifications system in your back-end. <a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">If you are using Firebase&#8202;—&#8202;implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notification here.</a></p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="e473" class="graf graf--figure graf--layoutOutsetCenter graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 589px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.4%;"></div><img class="graf-image" data-image-id="1*uZmeTNpu74f8ZG-kCUrwAQ.png" data-width="1460" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*uZmeTNpu74f8ZG-kCUrwAQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="3ef9" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Profile<br></strong>This is the fifth tab and the first segment of this application. This page contains the nesting of tabs and segments. This page has two segments at the top of the page below the header as “DETAILS” and “ACCOUNTS”. This is the first segment of the profile tabs. This segment has a list of actions in vertical direction. All the action executes as…</p><ol class="postList"><li name="a9ed" class="graf graf--li graf-after--p">Mini Biography</li><li name="964d" class="graf graf--li graf-after--li">Add my preferences</li><li name="32c7" class="graf graf--li graf-after--li">Verify my id</li><li name="458d" class="graf graf--li graf-after--li">Verify mobile number</li><li name="3e97" class="graf graf--li graf-after--li">verify email</li><li name="ec5f" class="graf graf--li graf-after--li">Add a car</li></ol><p name="8c42" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">Profile&#8202;—&#8202;Mini Biography<br></strong>This page can be accessed from the “Profile” page. The options available can be chosen to edit user name, email address, update password, address, contact, Gender, DOB, Bio, and etc as per your requirement and update all those. Back button takes you back to the “Profile” page.</p><p name="3612" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Profile&#8202;—&#8202;Add my preferences<br></strong>This page can be accessed from the “Profile” page by clicking on the “Add my preferences”. Here you can edit your preferences and update that. The save preferences button will update your data in the database and navigate back to the profile tab. Here this is only UI for demo purpose.</p><p name="72e6" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Profile&#8202;—&#8202;Verify my ID<br></strong>This page can be accessed from the “Profile” page by clicking on the Verify my id”. This page will navigate to update document details.</p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="3c21" class="graf graf--figure graf--layoutOutsetCenter graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 589px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.4%;"></div><img class="graf-image" data-image-id="1*lFXSYn5h5zksJ0ZdTPYgJw.png" data-width="1460" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*lFXSYn5h5zksJ0ZdTPYgJw.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="ccf8" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Profile&#8202;—&#8202;Update Document<br></strong>This page can be accessed from the “Verify my id” page by clicking on the “Driving License”. This page will navigate to the camera. Here this is only UI and for demo purpose. You can make it in a fully functioning app by integrating back-end with the help of a back-end developer.</p><p name="1cac" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Profile&#8202;—&#8202;Verify mobile number<br></strong>This page can be accessed from the “Profile” page first segment. <strong class="markup--strong markup--p-strong">Verify mobile numbers </strong>page can be used to authenticate a user to check a user is registered or not. After entering the registered mobile number it navigates the user to the OTP verification page which a user receives after entering his/her mobile number.</p><p name="1721" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Profile&#8202;—&#8202;OTP Verification<br></strong>This page can be accessed after entering the phone number in with phone number page. In this page, received OTP on user’s mobile gets verified for letting the user to access the home page. On clicking “CONTINUE” it navigates back to the apps profile tab.<br>This page here is only the UI but you can make it a fully working app by integrating a suitable backend by a developer.</p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="e700" class="graf graf--figure graf--layoutOutsetCenter graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 589px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.4%;"></div><img class="graf-image" data-image-id="1*djCRgIBx-Ivi_p7sLWti6w.png" data-width="1460" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*djCRgIBx-Ivi_p7sLWti6w.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="84b8" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Profile&#8202;—&#8202;Verify email<br></strong>This page can be accessed by clicking on the <strong class="markup--strong markup--p-strong">verify email </strong>in the profile page.<br>Here you can control the emails you want to get either all of them, just the important stuff or the bare minimum. Here you have the options to enable and disable email notifications.</p><p name="ea4e" class="graf graf--p graf-after--p">You will first need a Push notifications system in your back-end. <a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">If you are using Firebase&#8202;—&#8202;implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notification here.</a><br>Here this is only the UI for demo purpose.</p><p name="c886" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Profile&#8202;—&#8202;Add a car<br></strong>This page can be accessed by clicking on the Add a car in the profile page.<br>This page navigates to the add new vehicle page.</p><p name="6299" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Profile&#8202;—&#8202;Add a car&#8202;—&#8202;Add new vehicle<br></strong>This page can be accessed by clicking on the Add button at the very bottom in the Add a car page of the profile page. Here the items are listed in a list view in the vertical direction. Each item contains a dropdown menu to select the matching item from them.<br>By clicking on the “<strong class="markup--strong markup--p-strong">COMPLETE</strong>” button it will navigate back to the add car page.</p><h4 name="748f" class="graf graf--h4 graf-after--p">Features</h4></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="5c81" class="graf graf--figure graf--layoutOutsetCenter graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 589px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.4%;"></div><img class="graf-image" data-image-id="1*ed9ABs0s9nzl38iHkNj2Zw.png" data-width="1460" data-height="721" src="https://cdn-images-1.medium.com/max/1200/1*ed9ABs0s9nzl38iHkNj2Zw.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="5edf" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Geolocation<br></strong>This can be accessed by clicking on the pickup page or drop-off page on the find ride page. This allows the app to get your current location by clicking on the current location button.</p><p name="eddc" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Google Map<br></strong>Google map shows us the current location of the app by clicking on the current location or by filling the input field in the pickup or drop location. This shows us the exact point of our location on the map.</p><p name="cbb2" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Google Place Prediction<br></strong>As mentioned earlier in the geolocation, by filling the input text in the set pickup page or drop-off page, this will show you some predicted locations according to your filled entries in the text input field. By selecting any predicted location it will store that location and show that on Find a ride pages’ pickup and destination location individually.</p><p name="577f" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Payments<br></strong>You can have a payment page like above for the payments of the rides with the help of some developer. You can implement the payments by using any one or multiple of the following for your rides…</p><ul class="postList"><li name="4e69" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/payment-gateway-solutions-in-ionic-4-paypal-apple-pay-stripe-and-others/6"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic PayPal</a></li><li name="c70c" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/payment-gateway-solutions-in-ionic-4-paypal-apple-pay-stripe-and-others/6"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic Stripe</a></li><li name="e0f3" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/payment-gateway-solutions-in-ionic-4-paypal-apple-pay-stripe-and-others/6"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic in-app purchase</a></li><li name="e0f8" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/payment-gateway-solutions-in-ionic-4-paypal-apple-pay-stripe-and-others/6"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic Apple Pay and Android Pay</a></li><li name="4fd8" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic Razorpay</a></li><li name="4e9e" class="graf graf--li graf-after--li">PhonePe</li><li name="875c" class="graf graf--li graf-after--li">GooglePay</li><li name="e78f" class="graf graf--li graf-after--li">AmazonPay</li></ul><h4 name="1f67" class="graf graf--h4 graf-after--li">Conclusion</h4><p name="8997" class="graf graf--p graf-after--h4">In this article, we get to know in quick fashion about all the screens and features of Ionic 4 Carpooling App Starter from Enappd. Carpooling is one of the most booming and trending app based business opportunities. Keeping in mind the positive environmental benefits of this model, more people are getting inclined towards carpooling services, it is also pocket-friendly at the same time. This starter can be a very useful and time saving starting point for freelancers and so provide great value at a fraction of the price if one goes for the custom development from the scratch.</p><p name="9dc0" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;-</em></p><p name="2ada" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">Buy “</em></strong><a href="https://store.enappd.com/product/carpool-app-starter/"  class="markup--anchor markup--p-anchor"    target="_blank"><strong class="markup--strong markup--p-strong">Ionic 4 Carpooling App Starter: Carpool</strong></a><strong class="markup--strong markup--p-strong">”<em class="markup--em markup--p-em"> today!!</em></strong></p><p name="fba2" class="graf graf--p graf-after--p graf--trailing"><em class="markup--em markup--p-em">—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;-</em></p></div></div></section></div></article></main>