User Story: "As a user, I have visually appealing pages from where I can request my ride."

About

For this sprint, the API and the frontend for requesting rides and confirmations related to them are not connected, hence I have added a DEV button for testing and demonstration purpose. This will walk you through the scenario of requesting ride if you were a user. I have made numerous changes on this than our last sprint. The whole UI look is changed.

Usage

To experience the walk-through, go to maps and then click on this button that says DEV

This button is a place holder for the destination, after pressing the button, it will then ask the user if they want to request ride for that location.

Then it will start looking for drivers nearby.

After that it will show you the driver who accepted your ride request. I will also show driver's details, not including the phone number. If you do not like the driver, you can look for another. You also have the option to cancel the ride.

If you confirm yes, then it will show driver is on the way and provide you with driver's phone number, which can be copied to clipboard just by pressing on it.

After driver reaches the pickup location, it will send confirmation saying your driver is here.

While enroute, it will display on user's screen that they are enroute.

After the ride is completed, it will then show confirmation saying the ride is completed and provides user an option to rate their driver.

After you rate the driver, it will show in console how much you rated the driver.

Workings

The files associated with these implementations are located in frontend/src/scenes/map

GIFs used

The gifs used for this features are:

Source: https://dribbble.com/shots/1725705-celica

Source: https://giphy.com/stickers/eyes-look-see-FkdU6Or6txxpPdOsL8