Dev Diary Update #2

In development, progress does not always look the same, but lately it feels good to be working more on the front-end of things. It really allows us the chance to physically see what we are doing and test it out like a user would.

Now that our app is functioning, we’ve been taking the time to fully take in the user experience and…. make some much needed changes.

One part of our app in particular wasn’t setting quite right from a user perspective. That part is the order stack that is shown after an order is placed to the user.

Before, we would just change the “cart” tab to an “order” tab that would allow a user to see their progress of an order in real time. In addition, there was a map tab but it really only showed them the restaurant location.

Well, today we overhauled this stack – removing tabs and giving that map tab new life. Now users can not only see where the restaurant is, but see their position on the map, toggle expanded or user tracking, see their distance in miles and duration in time, and toggle between being locked on their location or leaving it as a full map view.

Below is a sneak peak in the image we posted.

Here’s what this looked like in the code:

1) we overhauled the component to pull in order information from the our context and passed in lat and lng coordinates for the restaurant per order to be held on the server

2) Then we did plenty of digging into react native’s MapView and google’s direction API

3) After several thousand attempts, we managed to get the coordinates to flow through, have a marker on the restaurant, use an async permissions request on the user front-end to request location data, and pass all of that through the MapView along with the google APIs direction output to show a user’s starting location and where they should drive to get to the restaurant

4) While this seemed to be enough, it really was not enough for a user. So, we spent another few hours adding two toggle buttons to the top left, little bit of styling, and spent time learning about useRef() to trigger functions more seamlessly

5) the toggle button on the top left allows the user to toggle from an expanded view showing the entire trip from origin to destination and a smaller view for just your current location. The other toggle on the right side of the two buttons, will actually zoom in like normal apple maps and follow you the entire way. We achieved this by passing in follows User Location into the map as an object that represents a useState variable that is triggered true/false when the button is pressed. This is similarly done with the first button but triggers a function that changes a useState variable to either the current location or a “fitToCoordinates” function that is tied to the maps ref.

We are very happy with the results of this, and will keep doing small overhauls as we push forward to our beta launch coming soon.