Login Get started

Build a full stack UBER EATS clone - 3/5 Days Challenge 🔴

notJust․dev・153 minutes read

The text discusses building three applications in the Uber series using React Native, Drag Jazz, and AWS Amplify with specific focuses on user, driver, and restaurant dashboard functionalities and features. Detailed instructions are provided for each step of the development process, including setting up the backend, styling components, implementing navigation, and integrating map functionalities for order tracking and delivery.

Insights

Building three applications in the Uber series: user side, driver side, and restaurant dashboard, using React Native, Drag Jazz, and AWS Amplify.
Detailed process of developing user and driver applications, focusing on map usage, authentication, backend setup, and real-time synchronization for live location tracking.
Importance of styling and structuring components for rendering order items, implementing a bottom sheet for orders, and utilizing hooks like `useMemo` for performance optimization.
Business potential highlighted, emphasizing the separation of styles from logic, organizing styles into a separate file, and implementing navigation for enhanced user experience.

Get key ideas from YouTube videos. It’s free

Recent questions

How many applications are built in the Uber series?
Three applications are built: user side, driver side, and restaurant dashboard.

Related videos

Summary

00:00

"Building Uber Apps with React Native"

The challenge involves building three applications in the Uber series: user side, driver side, and restaurant dashboard, all using React Native, Drag Jazz, and AWS Amplify.
Day one focused on creating the user side application with React Native, incorporating numerous screens and features.
Day two involved setting up the backend for the user application using AWS Amplify, integrating authentication, and designing a complex database model.
Day three introduces the driver side application, emphasizing map usage, directions, bottom sheet navigator, and other essential elements.
Day four will implement the backend for the driver application and real-time synchronization between drivers and users for live location tracking.
Day five will focus on the restaurant dashboard using Drag Jazz and AWS Amplify for managing orders, menus, and other details.
To follow along, download the asset bundle from assets.nodejs.dev/ubereats for PDF presentations, pre-made components, and source code from day one and day two.
The projects for user, driver, and restaurant applications should be structured within the same repository and folder for easier tracking.
The driver application development begins by initializing a new project with Expo, opening it in a code editor, and running it on an iOS simulator.
The initial focus is on creating a restaurant order item component using dummy data from the asset bundle, starting with rendering the view and displaying restaurant names and images.

19:07

Designing Restaurant Order Item with Styling Adjustments

The initial task involves setting up an image with dimensions of 50 by 50.
A restaurant address is required for the project.
A simple text for delivery details needs to be included.
User name and address are essential components.
An icon from Typo, sized at 30 and in white, needs to be imported.
The structure of the order item includes three columns: image, text, and icon.
Styling adjustments are needed for the container, including border color, width, and radius.
The image width should be adjusted, and the height set to 100.
The text elements like restaurant name, address, and delivery details require styling adjustments.
The icon view needs to be aligned correctly, with a white color and rounded corners.

41:57

"Rendering Different Data in Bottom Sheet"

The ability to render two separate order items with different data is highlighted.
Changing data at position one automatically renders different data.
Modifying the image URL can display different images.
Implementing a flat list within a bottom sheet is discussed.
The process of rendering a list of orders is detailed.
Instructions for implementing a bottom sheet that can scroll up and display orders are provided.
Installation of necessary libraries and dependencies for the bottom sheet is explained.
The process of styling the bottom sheet container is outlined.
Rendering available orders within the bottom sheet is demonstrated.
The creation of a new screen for order delivery details is initiated.

01:04:25

Optimize React Components with useRef and useMemo

Use `useRef` to import necessary imports from React.
Implement `useMemo` for performance optimization by remembering values that do not change.
Consider the balance of using `useMemo` as it stores values in memory.
Utilize `useMemo` to prevent unnecessary re-rendering of components.
Import `BottomSheet` and adjust its style using `handleIndicatorStyle`.
Set a light blue background color for the bottom sheet navigator.
Display the minutes and kilometers left for a destination using icons.
Style the display of minutes, kilometers, and icons for consistency.
Style the restaurant name, address, and user address for clarity and aesthetics.
Create a button with a green background color and text for accepting orders.

01:26:52

Enhancing Text Styling and Business Opportunities

Styling the text:
Change text color to white.
Add vertical padding of 15.
Set font size to 25 and font weight to 500.
Align text in the middle.
Add letter spacing for better readability.
Creating a business opportunity:
Utilize the project for business potential.
Opportunities present in the five-day challenge.
Focus on payments for business development.
Separate styles from logic for better organization.
Organizing styles into a separate file:
Create a styles.js file for better code structure.
Move inline styles to the styles.js file for clarity.
Use specific names for styles to enhance understanding.
Implementing navigation:
Install necessary dependencies for navigation.
Wrap the application in a navigation container.
Create a navigation folder with index.js for navigation setup.
Define screens and navigation options for the stack navigator.
Navigating between screens:
Use Pressable component for navigation triggers.
Import useNavigation for navigation functionality.
Navigate to the order delivery screen on press event.
Setting up maps:
Install react-native-maps for map functionality.
Import MapView from react-native-maps.
Replace blue background with MapView for displaying maps.
Style the MapView component for better presentation.

01:50:30

Optimizing React Native Map Display

The map dimensions need to be set to fill the screen, requiring the height and width of the screen to be passed to the map view as a style.
The height and width of the screen are obtained using `Dimensions.get('window').height` and `Dimensions.get('window').width`.
A suggestion is made to use the `useWindowDimensions` hook from React Native to automatically update dimensions when the screen size changes.
Destructuring the object returned by `useWindowDimensions` into width and height allows for cleaner code.
The `useWindowDimensions` hook is corrected to `useWindowDimensions`.
To display the user's location on the map, the `showUserLocation` prop needs to be passed.
The `followUserLocation` prop is used to track the user's movement on the map.
Custom locations can be manually updated on the emulator to simulate movement.
Markers on the map represent orders, with each marker displaying the restaurant's name, address, and coordinates.
Multiple markers for each order can be rendered by mapping through the orders array and displaying the necessary information for each order.

02:12:02

"React Native Duolingo Course Enrollment Open"

React like hooks are used, including effective state and other important hooks used daily.
A course is being offered to improve React Native fundamentals by building a Duolingo clone with gamification elements.
The course has been tested with over 200 members who provided valuable feedback.
Enrollment for the course starts on April 25th, lasting for a week with a special discount for the first batch.
Details can be found at academy.notjust.dev, with questions directed to vadim at no just.dev.
The course sponsor is acknowledged, and the focus returns to project implementation.
Instructions are given to install Expo location and React Native maps directions, including enabling APIs and setting quotas.
Billing information must be added to the Google Cloud platform to avoid integration issues with directions and maps APIs.
The process of creating credentials, generating an API key, and enabling the Directions API is detailed.
The importance of maintaining the API key and ensuring billing is enabled is emphasized for continued functionality.

02:32:06

Creating Synchronous Function for Location Tracking

To create a synchronous function, start by defining a function called `get`.
Two ways to create this function are shown, with the longer method explained first.
Request location permissions by destructuring the status from the request and using `await location.requestForegroundPermissionsSync`.
If permission is granted, send it to the user; if not, log an error message.
To get the current location, use `await location.getCurrentPositionSync`.
Set the driver's location using latitude and longitude coordinates.
Specify the initial region with latitude and longitude coordinates and zoom levels.
Simplify the function by wrapping it in parentheses and calling it immediately.
Include markers for the restaurant and user locations using coordinates from the order.
Display the path from the driver to the restaurant, then to the user, by adding waypoints for the restaurant.

02:55:07

Efficient Location Tracking for Delivery Orders

To determine the actual time and distance to a location, a function called `inMapViewDirections.onReady` is utilized.
The function `inMapViewDirections.onReady` is triggered when the map directions are ready and provides results that are utilized.
Two states are crucial for tracking total minutes and total kilometers, initialized to zero.
Upon directions being ready, the total minutes and total kilometers are set using the results obtained.
The displayed data is updated to show the total minutes and total kilometers accurately.
A listener is created to update the path and values as the user moves, using `location.watchPosition`.
Tracking options like accuracy and distance interval are set for location tracking.
The updated location is used to set the driver's location, ensuring accurate tracking.
To clean up and stop continuous tracking, the function is returned upon leaving the screen.
The process of accepting an order, picking it up, and finishing the delivery is outlined, with specific conditions for each step.

03:15:52

Order Lifecycle and Button Functionality Implementation

Check for an active order; if none, set the active order to the current order and change the route.
Access the order in GSX without an active order, considering enums for easier tracking of order stages.
Create order statuses: not accepted, new, ready for pickup, picked up, completed, and accepted.
The lifecycle of an order: starts as new, visible to restaurants only, moves to cooking, then ready for pickup, and finally completed.
Accepting an order transitions it to the accepted state, followed by picking it up, and completing the delivery.
Implement button functionality: render titles based on order status (accept order, pickup order, complete delivery).
Disable button based on driver proximity to destination (100 meters).
Adjust button styles based on disabled status (gray for disabled).
Implement button press logic: transition order status from accepted to picked up to completed.
Hide intermediate waypoints based on order status (accepted hides waypoint to user).

03:38:30

Order Pickup Process and Navigation Implementation

Waypoint is shown only when the order is ready for pickup; otherwise, an empty array is passed.
Testing the functionality by accepting the order and observing the route to the restaurant.
Discussion on extracting latitude and longitude into variables for user, restaurant, and driver locations.
Setting the destination based on order status: restaurant if ready for pickup, user if accepted.
Implementing changes in various parts of the code to reflect the new location variables.
Testing the changes by simulating the pickup and delivery process.
Adding a back navigation button and adjusting its position on the screen.
Addressing the issue of the button being pressable after picking up the order.
Mention of upcoming integration with backend for real-time updates and push notifications in the future.

Try it yourself — It’s free.