In this tutorial, Dave walks through how to build an Uber clone using Bubble
Set your page settings for /index
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3129591c2effd_OFz1xEqEv0oRS2m0PogVAJdtMa5UgaC-4Z1O3TYmWLCAgxC4QGJ9rbCgJ0O0YzjN_tH7X8gbGHEYIL2QsmbV1A5n5eycspmHdm4_-2XUd5vnw56JdstMyq7i5GvUkRULxwdXco5yHgbKndHvcA.jpeg)
Grab the icons from uber.com
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3127ae9c2f0be_ew03ai54hKvLGFJSgop-4-hzRl-FEHJ9hVzUm3ZrKsLht34NTFF-OR_t1wAamPhsZ3G3lWQ13U_SQ6ewIiHbUdRFHRcfGeM1vXAvpA5Iw4IXlIyBXsxuiEJJP_U8XGh6hj_TtdEk_VYkWR6f0g.jpeg)
Get a photo from Unsplash and recreate the top part with the icons
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3125436c2f07d_FKaZ9jJdku2FXtfEiSj5IqEJiFhufYqFEbgO-XMqLoY0Q_dA_jq-1jiu46iekK-IKlqtMNRHlac8E8_NU_zfwQLdcCCvgpivr55vDstS83kYMVTPPRSWuKH2YSmwgUgO39F-TC9-vmlMBc92-w.jpeg)
First create one so you can later copy this one 8 times total
When you click the ‘earn’ group set a state /index show top = earn
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3124659c2efe1_WuOCYgofzomIV0217hqu3BPZj6VxM0kNZ78xi2xb10nemg-nPAxIvKWiOFXrlggqAkUDe3dWUUD_h3G3uAFUibbw6T5rlVpO4XGUIj2MixRhHcAFBmtqX3w5GmX5JsQhFKwY33J_K0QbwkbAUQ.jpeg)
Add this rule to the black group under Earn. Use a hide rule instead of a show because then you always see what things you have on your page when you edit.
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312413ec2efa8_lHThuLh50uzbBtp6N5bXM1ftNR1KSi0QhLVtjWVwB6WJw4L48uaCttNJ6MUyDy3ctQecdvFsWooEnCNLzaRgAFX_lwuy9MvAOuepOGapWULyWef0lRyn1tM-SziPtPYNVTnsFcZHIOh3cqpJ4g.jpeg)
Copy this (with workflows) for the 7 others
When page is loaded set one of the ‘show top’ to show first Should look something like this now:
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3125870c2f05f_lWxYHGdnNpraVulj6xgiTg6Oq6Q6RtkeXp6wbGkiXkYHR7UDGvc7a73ilOqaMKNCTksIc7iZ3SEpo49yHaYmTNLfxBhKCEH18_eodYeaf3IEEIL9p4VijYU2JaJhflOtF8HT1BDXsgoKFpU9Ig.jpeg)
Now you can add the groups bellow the icons that will show based on the selection made
You can stack them op top of each other and use the
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312b71cc2efe2_Z4EEr5yejEWv4U8_QPmd99u2bPVZpf7GopdwNyk08spKJn6y_XppiPRsGywwRzEJ4tK8tXy-jXBb-VoI26PdEoYso9ABtNBKaw_p8XDNkW-rE7ee8jEfA3lO2cALGgMiMmkp9mwLcMPTpE_L_w.jpeg)
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3124f19c2effe_bMiH5urOKx6etB56Il4JQx3Ds2ehFAClxy3oHn4N3bzv3pEbiRQ5chtkbNW5zaJI7HcfA8QH-7IlrKMKcuyqXjKtwTKYxSyYwWRvmq3AUidAKbr-mLZiKig6U2l00E_iKxbMbcA0SqGXU8vVCw.jpeg)
And add this as default value to the search input
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3128f46c2ef87_w9QZ-TpzecjB5ZVQ_Q9UkjjumAujHC17bHv-Mc_R1yCu_i0faLq8ybj_itooihqm_IpAsQyZ8ZACcmLdWmLEgg5hwwpLal8Qjxgryiqh16OPYlmqtPFEX-oKmAoTLR9fLpXMNJzeyLCPebehmw.jpeg)
This will ask the user to agree to give their location when they visit the site
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3128050c2ef88_jWwIV6lyaSlho6C8Z2NqE3Ipe0ObVQ1KYtOJjI7HN0If6pkdxubyYRQbnJyMCi_rOu_IfakbHzqfojalSI6Qe8UjOqSt3ssVFCJ5zTxck_z_TVhrQa2GhWYiV1MyjxeAO_6jqt0vBu-I2b7RDw.jpeg)
Add for both search boxes when input changes: first empty the list of locations
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3126044c2f039_-j3J3FdoktbampGGhO78Ve4AjDLS4RwM92mY5tC_DI_avob3EwN6z4dxrNYvT6IZ5SeO0diTSzD2F7P9AZHFCGdGGzt9zkes3_FlZTPltuyThsn_Tg2dZ2FzmE14KvpYEvLWmPHuM_osJPf2vA.jpeg)
Then
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312a940c2f05a_NMG66E-02tJSBv_Mm8zs1hFy7Ymp6227m8iKY_TscnmDSH8N-ST8d4ymZRUaCuSFoasRRgBvinWH42HdKIHBokVxF7Q6mQzWnYXzeWpoNtiwoS_quoDCSPcSiwmw2x0P-OHkETaG9CzTCfbiIg.png)
Do this for both searchboxes When pick up search box changes
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3125292c2ef35_g9AlpjVTwPNzyWT4fA1WPlQkKD8XPmvhG1zKTtVrjbjbELyN8YgYjXifYunT4h-ZNmvSTBSb3T3WdElEI3nK8C0MYu7ICbUWkmxKhqpuHiTXXysMDYr4lDUYVC4p5SFFiqBop1GwVhHgIUtrrA.png)
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3129fe8c2efa9_RumZIaV8zy9LNhpn-lRgEn4e8TOZDq3BAHq2QmCCdD0iHyWgGEHEe12S8hF66WYrNSpZlHQzgIOXX3fdUaJwpx0RGmUVNbp9TmLnkmi1ZBImBeyEdxxRfD5D8WBRF_uqHqTqbKN5Ar9GkbL25g.jpeg)
Add this bellow later we can use this to calculate the price.. x km x $
Since the other groups like eat, freight have all the same text, button fields we can use the index show top states to show different data in those groups.
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3122599c2efe3__jOUMXbbW43EzwVO4cYctALrPQF9Hx0L1m81q6era4SILXq6IoD5vWym27Hg47pvnBzq3GeZXgzW7Fcgg6ZZfxx1OBugD-gUb67HQQNj04QchEqSMbyTP0zVNpGhFjFgFaYSaU_cS7v7dDd0nA.jpeg)
You can do this for all except ‘ride’
Add this rule to the first group since it only won’t show with ‘ride’ selected
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3122b33c2ef6b_iUnwzomdonWvygE5eh5vI_JGfrnjvY6nwIPG0MuiJhd10lJSCszOQYlcatVHhH7oq1QvM1ShBOt_gYlSaHjdEJ3mzQHro9IzkZ4ahZTuS5c5iyBUVXQc-J_Ooe2IVRoYgJVH3vxgcC17UwsMQg.jpeg)
You can also change the image based on the ‘show top’ state
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3124f3cc2f0d1_oAZX9JhCQEQ4-yLH27EC9Qd8PUve2zcQaARzVdk1L4RUTPMxT0L6t0mZAZaduwjbDpX43Nq-jHG6mjNQ0kHs2StmmVH7P87CTlklV14pFmwpo-Oh3RWOk6FHFJ2h-Q4_V4-hbgSp0WPpVegmcw.jpeg)
You can now design the rest of the homepage or move on to the booking & sign up process
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3126430c2f097_bsVuL7la4ktRi4h3S-x7XEeAXCqWqEDpO8HPKRjV3C_Q03SnW40vI1HSnGYuGEbXBNB86Yo31eXbB9l66nOlgipYysqBb2GMraCANIj2AlOOMbVJyFi56qpr73bsq3WNY0CpUO1oTqt-37iNCA.jpeg)
We’re going to add pop up that looks like this to handle the sign up Download the plugin ionic icons
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312307cc2f05c_XIxhI-T571r3VAOc1gaaxU48Gj5M5Nm3Srfbi1gan4tZslbnjg0wXu56W0xL-0q8J65SBRGtU3An6itPnaGMWDsusEv8cQM9TfGlce8FcuItPIQlLmc8PWkuug9mgrgNZsxBDnRnU5F1mHbgUw.png)
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3128f56c2f098__YEBIEGfL2-9Vy887xDOsYRD6D01w3Ml1At-aYOWl-aDl68QRdHrKdkdT8cnmYzRgW3LB7p6_8dJWUdQgBkJrebzz4PPlaaKdjktY-Rtot6F6eOBD4vlCtYHnhOX4_kZjR0T4WCsC76VFIq5yg.jpeg)
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3124135c2f002_tlKMnrXsfvtqpcwY8lrlHrHAQX_M23WV7ZKxNmWTVdNqPhJTdALKF58nn9I_5J4aSwoZo2e_s2QPJ0roLilccZ1fNpMwNmbdUn2zfk0r_XKIjp3BBXfrRQb7OxzKuUrtGkcX2fST8Tsob-h72g.png)
Later we can add the work flows to the 2 button. First we’re adding a top menu bar with the link to open the pop up.
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3124fb2c2f0bd_2uSiq1jO3jCLM3OtKk3X0BeWtg467dbGGb09tauwB1fdPGDJkOaBsyC_A1N62PaWyaDDIaDAeMFhikiN9xohtJzzoHQk2lzsejmEJjc7qjcEp05t8zgd2WjHs5SEE8xV1c_WclnYIUMzxg51-g.jpeg)
Do the same for ‘login’
Create a new blanco page ‘signup-ride’ And design it like this:
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3122194c2f038_Q6rRn3uEkim37e-lWgcKJBSK8arc9haPQtb4B7yI-UW5oWCuXYmr9ftb9vyuRdaJ8nO9qTPKi9hYYkT3ZRWYLQS_tegOZisWTp7J7kgpiZp8UsSCkorjbYdz0XeplwOTSsfDvDd4pq7zYubIwQ.jpeg)
Add this workflow to the sign up button
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3120598c2f0bc_NJssAhJVjSQdzE1nj2mSB_ZYkhf9Oh9BGr4_Nu3oTyag2XR0GVuwjbUP8_g6P7T0glHjgCZwp7PdbbB1hYq8yl302LjEPvKE3BdyqHue7iFccLNbMXggki6wwjC2o6vmvugJ9Wiz7QWsOdhZ9g.jpeg)
And make sure to add this to the user
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3120598c2f0bc_NJssAhJVjSQdzE1nj2mSB_ZYkhf9Oh9BGr4_Nu3oTyag2XR0GVuwjbUP8_g6P7T0glHjgCZwp7PdbbB1hYq8yl302LjEPvKE3BdyqHue7iFccLNbMXggki6wwjC2o6vmvugJ9Wiz7QWsOdhZ9g.jpeg)
Type of account is ‘ride’
After signing up send to home and give this data:
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312ee2ac2f07e_6IYk6m1dECeDpYG716AmDSNZJ-ei7smfVwKv1SCGYqX7SY5_4F5IFOryNmFFEyw6opwZjCxWzH_V3AxsWADBotLMUVOF4xmDtWrB8SVwS_NSrKpivl4ekgIqAVblWgUzG3zhp0vc-sDISh0tiA.jpeg)
On loading the /index create a flow for when ‘show’ is not empty
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312619cc2f0bf_VrbxJmZqhjjGGn4C--vj0ujZuXrhmR_feT_MBmNc5ah2v9qTGIoaold9lbbtMZR8qazFIogCtpylnmCntMG3iah-bIChLYtnTBnb8YGhhsIMU2CMeRt0OLJ8LLdwat_wWB1zPT1oIyekuPLppQ.jpeg)
add this to the pick up location
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3124ec0c2ef36_xPGHP3na4Jf76xE55D1QNTLdMCQksxLrM2ukUZTgq_HD-cxl9hfa-wn_pS6noI7LTQHdxloIoRUe5djcE7gB9PCUh8A3JwJ3yVRSFH993aI8tWxIS1Tp_C74VBYanOMErewBWWWzuTiShJu-yQ.jpeg)
Now we can clone the sign up page for ride and create the same but different page for drivers ‘signup-drive’
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3125279c2ef51_125RGsqFgZp_WL4pT5a-41Aq6Sp-Fiqqm4Iv0Yvmuywr6Ojk7EqVR1JPrSHf-DQIhABLeTfGmBewCIKvwFqXHIewBbWFl3IKn-Z2FKEqN3tsy8aiaXiaCcshLapIZzD9Nrun5Tk7Ar9UMCyJ2g.jpeg)
Bellow the sign up you can add some extra info to show it’s a driver & change the colors a bit
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312c5eec2ef37_QU2SvAPqbJM-cY0WszEFfc2eJwIsEZDihBkkygAPRKRoWtzvKZnbxS0pkwIivYBhOZR3gskM3N5TienL2FkuCYGNZfvZhnAyF_IR5fUIvN5qKaGDJPK5wxgq0MCAm7Zw0q9oSXlmK9f1VF4s4w.jpeg)
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312f8a6c2f001_WOSwOxjtY5tlK0I1so2cionQOUwR9K3AIqYd_V2HbezUPRvCbeb3uMZxVP0w3Yj0aPat4HBi1vErXwX8unmWTCdUvNyA-S5sRWfBLLJpQFSgJRCOezjAqkV7dseHrkTK63-Odth3cU4DzjrjFA.jpeg)
Change the type of account:
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312c70dc2f05e_b_NQ2Q9SUUsh6PtzrcMPslhqZ4I9oNXojofquvGfbz32lJZve6YicTf2IXVgEF-lpisHpOmnhRUqRtFsP_xl2b8CcIBzN1vntjKtgCikzJ_N7YG_JnnTiAKHzYfTKix_goJjJPxgeet9ZJIa8A.png)
On the /index you can now connect the sign up pop up buttons to the right pages
You can add the workflow if a user isn’t signed op to open de signup-ride page
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312264fc2f000_WcIHFGfzEC7Uea79N6D4gAgpT6awz3JI3SnwnFn56PKCQQ-WhKzmUfX5NYIm_b4Xit0MkHjEscsHTSTl6LrZetAC-qYzOcIqlJiHumdfDKk_14z0Nh20Ersa3fm_2agBl1l7-dZpSw-RZIOVEA.png)
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312d305c2ef70_EkydxdCJXGn4WWvsWlNDshdMRTAciSkCGdzItjMhjTJ5jO4DfCX2wVsaEGPfBal5QR41BWSFWEkb2OpGD8iNXwNyMTL6IN-YP_Cg0cwemPkxBTl6cvqwQoQs67aDlBzpSZs2OI55H6mj1lnQ2A.jpeg)
The custom workflow event opens the page
Create a new page called /looking Set the page background to ‘none’
Add a floating group
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312dac8c2ef4f_-29-x4HzEwJ0rGgOnB1WDEKKqBOnsxn-50Yjk1dAoFTlOy-ciihrBrca9lWw59s1ZWlp6PDyA-ax86MycC2n1rhzOSxmkHhHXOS0Qr3UniyJi0r6Y-JqL7svXsXgh6hH6s_xJf8qWnT98xpFoA.jpeg)
I this group we’re going to add a map like on the homepage Page should look like this:
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd31226e6c2efc5_znbkSXwnPAYz5ijXDNkRxOUE_ZMN5ScurbSvElDUv_2O7PTW5E6UvJgqplJWodTFOBK-V8MFFi_tmcjNgo1jGjfDNrDvXWyX7KUt-8oeUmfclFVqyg0wMGyVbmfySXWeIpYEgv2IefJlHk6Zbw.jpeg)
Add a floating group with 2 search boxes like the homepage with a pick up & a destination and design it like this:
In the blue you can add from? And to? when the inputs are filled in change to the location street
Add this calculation to the button
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312cab4c2ef89_3P0OGSQpdmDR0TpcLWTm7Y7sZgJTieFMrcqtF3vdt1Mv5jMuTXgmbgVOxiMFIGP6y1mXhl3UqbMKYa5oUOwjXA2kHrN-UonavfUrqGa2boCAIDgxo2F5LaWJ4y2JaEUGYWeMV9tTJLccvajIfA.jpeg)
Add this as the data source to the map:
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312d230c2f003_89ZVhoC-TynIdLIQcxa3OaC5NZoxGVyKZ2PqmxAf85O-oFWf7OSN8GV43IV4jjHvw57J-2De2IOctpawAlosdMOIJdv25vl_qCj3l3ZDG3nu28FQlyAqwaRPAUbwIiF432BZFG2NZFJnXQDGbA.jpeg)
Upload a custom car ;)
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3120b00c2ef75_DqjH0rbi0GTZ2sn_NJBop1sXkl_gE0K8BgqJ4xibW1Vc4LfqEcdYUS5SnRf6kG890FhWzOYejEgWTSJtA7H7KHB68h5Br9V5xwtnqAAZy5_BbQQcc44Ry9PqfBaYu7wMb2McZ5dJmdR-CrtI4g.jpeg)
add this rule to the map and copy paste the app
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3126a5dc2f03a_ICyMFHxFCBZ11qLwhIAobTnXrs5y5kf8g7gQVfY90qIzzDu265QRVPDjIzbCXOqSUYEf2zaKOtYiAQQp8NARlR0jESVC7jKD8Zi4MqEiO2UknQoYYl-edP8IyBZwWLLQYXjUZ_ADaNSM7bDsNQ.jpeg)
Make the copy visible when this rule is true Change the icon of map B
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312c708c2ef78_djRVpUWx0M8IvTZqq88RBd7u8AIDnhUxtZPxPUZYdwA-vjbyoypGBIlo8oGN1aw11HgtP-AdttO1Ryj-mPXaq_Ep35jumHlxbDwV8EuDVmf9jKM4C0hF4ai-TeSZBYN5IERtDil1RYbWqr1xJQ.jpeg)
Add the same workflow as you did on the /index for the search boxes
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd31211a4c2f03c_Uu1Ft2l7-bRZSIlbGQu1ErhvFZ7sEfis21UNjhZRdTsG3HkAAkkCzHYMTT15tk4jb5nend9jmFii5GwKveN2lMkgrr0trV9RnnnCfTLsO_Ct4TsGlTrQWm95lCUP3kQp1opiTM5j_3HrJgLOxA.jpeg)
Data for map B
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312a2b9c2f0d0_F0jWFlUf4eXzq2FLS5ZHD0Iu7xG37oEWdIbAwnZqhavjYEOhf-xVCYaUqh-6FHie00tQC3EM2CXW1tgXV0S-1uIzaHUUsBDZNfmD0nntq0jt25687XeqgxTnREgq9-9Tc89p5XXEk8CQJa57og.jpeg)
Download the Stripe plugin to handle the payments Add a workflow to the order button and create a order
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3125382c2ef8f_kEtohCtS0cvEg7vgNLerWBDuxr9O0FVympbaV1PWtG7DNNJlewjaLtsP5z62-cajoLs2texYBj2nv97LiHfOzeNemhYgMOjmdramH9YMDc3Z63kc2qFDZcg2xoWwML7E5BmVod301RzKpLkRVw.jpeg)
Add the orders to the driver and rider
Cancel the order if there is no driver available
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312218ac2f05d_rOgOAD7qCYYdYTixMdpUpG-cESIxYzqQOmZ80GRxQJAZ8ta8troTapC3-s4LuqS2R3H5mRkHdlgBVwBvf25atWMZwnvcyglssafgGiHoJ9epMdDtw4WQF_ybLYmZaNSm5eiXB8STefSEzegSjA.png)
If not cancelled charge the user
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3124485c2ef8a_63tF4ykITiRwwAYeLfC8X6c8pYiCJSwImbWdqvna3ExbnOseyaB-B_hO5QGrC8oItr1LxMAYCQr4QAStUCdT8O0qq8jUCZRpXxi_N_pYDayCbM8JX80YZsuDGm0z1S_YaeMtuBept2szD7rjZg.jpeg)
Change the order to paid if the user was charged
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3121ce6c2f0d2_QsZ20siIg71j79DsN4zk8-RFigVl6ipdYkXlFlISvfgMrQ34xP5G1ah7COaEXen8FcPa-f0tSiIDOrTlKtqHJAyDwq6dfIUcXoTDlxJ9SP9D-kadQpAxRtVCthFtA0lmmqdwoMB9WH_nn1B7YA.jpeg)
Create a blanco page called; /status we we’ll later use that
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3128220c2ef38_oR8jElGOJJl-gk5VSkw1TfqGv-yKIN-js7PM0jYV4Ly43KkTFxEZvb83trG2fPenBUgJiUIdG53vHxCOVpD2wm-aW9SY6VOaYvB8lYyXRHwlEMHohpAr8OhY90uRM1WwWkNJIMyu94O3HbsGcA.jpeg)
We’re now going to build a simple satus page
When page is loaded
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312a84cc2f099_N0EOpRKGrR-R4GmQ-ulW_VkhWpT89smO94rRw7GD8pCUgeCkmHdWZq3B3QtSlltKxM8xjTcACRWwggV9OrHFE80ESrp7LmCjfPVlUpsROn2RZNk4-onjCmH4CieMI96FeOR1pyFSDuKxkJcixA.jpeg)
Create a page with info about the driver that is coming
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3127d77c2f080_7dqNhb62DtxxrNzSrhT7vWpdtUSHHSawO0Br3ADEUzT9Kh7FXCKRXCR3xO0pASmrYk-anl3zfHZEaXZLhR245Apr2PfBtBGRDMDORI2pGZHDwZAJeLXyXIx6SijgJ-8Eq7esQSqxa7Z6g13NRA.jpeg)
You can add different rules to the page to show if the order is cancelled because there is no drive or which driver is coming.
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3124763c2efe6_jMh1QmwreJsnmqEjtK35V1NcOu96nBspOL2I4vg-UCQvRCDOlqtCX3CzmAOpE84YE1jR2BF5j2huRtebINdIS6ydShIyGazRYt_398mam71UB-CrSrTXpeWTCmuBqJeABKW99gEmnPsxkMaIJg.jpeg)
Page could look something like this when we found a driver
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312ace9c2f0d3_DrVdxzgMJsDCSu_2edyMViu4Azu1npzqsylWV2AMJ---eK9Ti7UNBwEOMfQlEYwwkEa2aryCPFcrHRWdUli3uKxeWF9eDkjQPMR8nba4lwZzjM3lIrDbf7GPuPcLtLm5rLkhtWbcZNgLuG6NWw.jpeg)
Or something like this when no driver was found
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd31249b4c2ef79_hyUV9xR0wnIVPSzSdIImKsjBodcI7PWWfSrsi_slSHkorPgujG3WG0X35rv3ntpgRCvgRnDKyDauh8fHKWthZiL5QhWCXrUYU8EIpelSQQsEGrrkMqebRI1J3H9pkHKdZZ6wq1V0PB6_iWVp2Q.jpeg)
The basics are working now. We can send the filled in locations from the homepage to the /looking page
When you go to the page use these parameters
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3120e94c2f082_5B2sic6WX-eUuAy-zyUklY6p-QXCI_jzVTv2vmdW2DMirMiv4O80wkDP-IZvO_AIpP2EEIoBF-h_XHV6ygaz1FlQ7oIbvGG2WnM7BiUEC4Wb8P8Qnyx_GWqBee__V0WGk4CtarVB4yezim161A.jpeg)
On the /looking page create a workflow that will fire when the page is loading setting the state of /looking for from & to
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3121188c2f07f_g502Xb7UseNYqKsgP3Pz3ZkXXe04NmtUaBAtwTQ5bRVWAyM52uTuXraTHiDGVtdq9Q4rAplDEwn857jo7t4NqSySDkMDGZoyImZKcjclUJ3Im7Fdny8TrOYPvKAYL-eb9yil7f63gkb5mtREJw.jpeg)
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312ed3ec2ef8c_FNCpoUh1_mcJR8EbrQHVeyFBM1Be2UTqzxU9GyJKL0KvxNyMTzm1A57g7xn1FsTLeVpGxF6tH11ZSaKq9PGZk_NSUO7CNlX26JtE1c6IfyHL_oMZarnC4CONMfHvmuHlc75IWhh52HFAEoSd1Q.jpeg)
And add them as a condition to the search location fields
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3127188c2f063_Dn7kvV9pT8tALUv7soFo-xQW9motYr9uT6zULeXmgQNbTGjBcM5hZea6In_XVh1NcBGfXPV5MIo0oye6tpuOainMWqNuIhLZ6Ha6pU0aNPywWXt0PBlYo_unWpAYwhNXuekYY4hDng-xCPeqCA.jpeg)
We can start building the dashboard so we can see the trips we’ve booked :) Create a new page /dashboard
Add these 3 groups to the page and add the same settings (also check in the responsive tab)
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312055fc2ef8b_FOXyUdcv8Lw2pEk8naSxu-4UdOKvCmUrSiVpTTd_vOWmPFG-1V_EwGdS17_4D29qbVAdCrehKiTy6_wpPPBO8NpZBebB4oqQenW1Pimloo-BQBcHBaqB3bvek5LwwKU-QPwq0kWLFg0Jp5BHfg.png)
Add a repeating group to the middle group
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3126130c2ef7a_FNLcyvWpAIJXhjdTD6Q01ysdFYrJY9nju9QlDBX5AvW87-sAJNhdOdd51VMtbLDozF-z10bh8HhL1kMiyn_hBqONwIEbf-wAKd5Iygv4xh_Oataa8e_WpJ4g8enVzhtFNLhOltnrAhX9BVxp0Q.jpeg)
Add to groups to a cell. One with only the date and price And the other one with more info about the trip
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312cf32c2f03d_3-ozULSbmut9TD4V4A41MAVfqw-iGxsX2pbcBzkbNki5SNcNrVBsSQUDb7ccNi7T6CMmOSNl1aMOsASuxRrxbQ8P-frFjQsXay_SZN7BC87lCTDyTQlpZXTz_wV9RISrJA0oX-wabS1ZB-rp5w.png)
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3120e6dc2f09a_Rjfnkm9eQ1bBH-BpA8-mSaBv59PmEPRwitHKbxSuvUrfOnaAjOMG9b7SKRJ8lQIDTr253HPyBWa_iJ4Lk_JdOAw4sLXpWAuqvqYJZiwjdUVlWTB3eu4rpZwTITqjPdaBvLapxMn_-wZ4_jzOLw.jpeg)
When you click on the top one set state of the /dashboard
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3125e11c2efc6_rSIw3TMoiT4tMB5Ey96mDKZlh1jNI0T0Y3n98_ygD3nr3dxr0IqvdNhuXKaPvHRjRezicmSaDGPETrYfII8owIFw5WyyT-9LrzMV8I0DTw8AWluAxobrOkqMdC2DuW2F3pDS8c9jO6zdhqUPvA.jpeg)
Then make this rule for the group with the more info
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd312ce61c2f081__WZ_C7DqAJjs7ovqeljIP9_-wQytURjjiWDn0CWP6ogcmBxNs5oOzmZabkHxWZufdTQYNJNbOqN2ys47G8zaPIL5PDbgpwYqFuCI9TfyisG16DBOPO0KtnKLCLQ4s2MJvViBiYAzE-VdLfBfjw.jpeg)
Add this rule to the repeating group so a driver sees their past rides.. also add rules to the text inside the repeating group
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3123b42c2ef3a_LxXiD02zhwgGfSThf4NXw6dwWBxJW2nVhrBzbAmoeEouIkcrKGHxy2uYqbFEdZUTZubqbBKOy2NoKJSV3HvRh-xpZ7-gtWoeA-49IdtkXwLIe9Nd1d1K-JG-u-NuIiv27c4SK_wJ-jhoow2kng.jpeg)
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3120e27c2f020_40FXkVk87DkGveHAJjRhjITtbLCaIZpNPyQ0PwZfLq4QSlwmg390LDWsaYBnF21PrPPf1XRZSjxtyWdYLKkOEG3q2HNdUcunlp3X3MeO1-icmgPK4Z6eRG_BWHaTuJeCjh6EBaAPsf-4kyxVrw.jpeg)
*to needs to be destination
Create a pop up that will show when you click the ‘profile’ button where the user can change their profile settings
Create these fields and enable auto-binding
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd31244a1c2f03f_YFQJvhMqmTiNqVZIffAYzK8n4QIVxisop9TG-JtfiiIH1iOpFAazet38zFmwFKX-lcRzn-nY52KWKTB6sUuCeDWxVkNCRAN0vbT1oW3c6xzAIU7RVoxUD7eTxvM_eTZZf9g1wzo-JmBoJQgIsQ.png)
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3125d0bc2ef53_B6GPH3NEWOFTMlfqbRVZ1x1UH-OmrcgEZr6beFxeSRE7Z7VBBUkHiajsT7-C6L7IUK-7GeakbuVlYI88QpMcEVm9QoSaeYNdCk2OmOqu6LinOYaBw86VnCXUH3F3gvTjIzw-XVR259hDmpwixQ.jpeg)
Add a pop up to open when the user clicks ‘free ride?’
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3123bdcc2f0d5_DDt1mWDM3sPJ1Flhy9wXmvIgnjpbj3tg12wCvq3CPAqAOd5l7wd-Dby08UKgU3ak5VRlvTKUQViYthcmXl_StGLIXgS8oQxOxDCqSESPlxQxzcCOS6K667mErCPwk3ewiIVHDRxUGSBEFVRJYw.jpeg)
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3121b20c2ef8d_iii3ndGyeOc289lRZ7u4YEj4tDZEUXQv2RxCb8xAgaLZTOISg2j33PG8VEN5MYtnSeQRrUAOGmc5oZvF_6nl6KQaLJIwtDusG_6N5FUqNrf0_tMjLxexFyDVmAgfJk_QLcSG1IYp2vWHGsiM_g.jpeg)
Add this to the /index page
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3123a06c2efaa_kb0Hz5CtfwQ9PaIncEUj1SjQSaT8vXOMW4sPZiJddIlpFPW29Q4uNp9yTRoBg6YPpRHUHozCqc_1U2OUWec8PBsDhBA3YH0TvdQvdIVCUm8VoiXarndGTesS8mLeTToZ1XcpqgwtBs6lDYrvAw.jpeg)
And this one
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd31250bfc2efae_BxULPo6XQAJqn2-N_07Si1ZymFkAriilUuiqGh01cv3Nt0Ph7PnArtX-fpjCqhgZwLAJbd4zuiYprm5QR5c_vHPij3YBfBwGbcuRuSnxIoeUYzsHtttlQF0An8lCgH8o_TQl3hbFrok6SzPekw.jpeg)
Add this line to the sign up flow
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd31210b0c2f060_pqA5vjwCQUi1IQtn9Dws3etWKzCiayO5GXb8RJC1lWudek5VBrwMMFgsIaFuA2hIrlHpt5OS5yE2Lwnv8_Iy7D-ue7_BT--e2-K2M1VWi5KllQI4EJ2LkDvQ4evKFEbPKVsVCqwnN1dEJ-s0Cg.png)
And this action to the sign up work flow
![](https://uploads-ssl.webflow.com/61facd366dd312afdec2e1ae/61facd366dd3129876c2efab_py2TuTwxDMhdDYmOuGBPbIK5ggsT-TnPpF57ekcLrmwfwvXuOT9adBBuAEGDlMEw3p1Q-fbduFr5P1oPbXC_3csYl8Lbe3ypM0aGbBytX5mjgFmEud6UhKzK9ERmau2fwo1KyPAX_YLGEoiR4A.jpeg)