The video demonstrates building a full-stack laundry app in React Native using the Expo framework and

Firebase backend. The app allows users to book laundry services, select addresses, add items to the cart,
place orders, and view order history.

Detailed walkthrough of the app's home screen design and functionality for booking laundry services.

Explanation of the address selection process and the steps involved in booking laundry services.

Overview of the basket tab functionality including adding items to the cart and selecting service types.

Outline of the order screen displaying past orders and the backend setup for storing order data using
Firebase.

The video demonstrates the process of creating an Expo application, initializing different actions like
adding to cart and changing quantities, and setting up a tab layout with multiple tabs and icons.

Demonstrating the creation of an Expo application and initializing various actions like adding to cart and
changing quantities.

Setting up a tab layout with multiple tabs such as basket, home, and orders, along with icons for each
tab.

Designing the home screen of the application, including initializing a scroll view, displaying images, and
adding icons like three bars icon.

The video demonstrates how to style different views in a mobile app using React Native, including
applying colors, fonts, padding, and alignment. The process involves targeting specific elements and
giving them unique styles.

Styling the outermost view with padding, height, and background color. Applying yellow background
color with specific height and internal spacing.

Styling the inner view with flex direction, alignment, and color. Setting flex direction to row, aligning
items, and justifying content.

Designing text elements with specific font sizes, font families, and colors. Customizing text styles for
different parts of the app layout.

The video demonstrates the process of designing a user interface, including styling text, icons, and views
using flexbox properties for alignment and spacing. The design involves multiple nested views with text
and icons positioned in rows and centered, creating a visually appealing layout.

Styling text and icons with specified colors, font sizes, and font weights to enhance visual appeal.

Utilizing flexbox properties like Flex direction, align items, and gap for layout design to ensure proper
alignment and spacing.

Creating nested views to structure the UI components effectively, showcasing a hierarchical layout.
The video demonstrates the process of designing and implementing different views, icons, and buttons
in a screen layout using React Native, focusing on styling and functionality.

Designing and implementing notification icons, text, and styles for a specific view.

Creating pressable components with icons and text for user interaction.

Incorporating multiple icons, styling them, and arranging them in a row within a view.

The video demonstrates coding steps to create a user interface for selecting addresses and navigating
steps in an app. It includes styling components, handling button presses, and displaying content based
on user actions.

The video demonstrates coding steps including copying components, giving styles, initializing states,
rendering date buttons, and formatting text design. The process involves moment dependency, state
management, and functional component implementation.

Demonstrating component copying, styling, and saving files. It involves giving styles for icons,
backgrounds, and text design.

Initializing states and dependencies. Includes setting up moment for date formatting, managing current
and delivery dates, and selecting times.

Rendering date buttons and formatting text design. Involves mapping over dates, showing touchable
opacity for each date, and styling the date buttons.

The video demonstrates how to style and design elements in a mobile app interface based on selected
date and time slots, including disabling past time options and changing colors based on selection.

Styling date buttons and touchable opacity elements with flexbox properties and specific dimensions.

1:48:02

Implementing logic to disable past time slots and dynamically change background colors based on
selected time options.

1:57:03

Setting up touchable opacity for selecting time slots and applying conditional styling based on user
selection.

The video demonstrates designing and styling elements for a mobile app interface step by step,
including setting conditions, copying styles, initializing views, and defining functions for rendering
buttons. The process involves selecting dates, showing text, and setting styles.

Styling and designing elements for the app interface, such as backgrounds, text colors, padding, and
margin.

Setting conditions and copying styles for different elements based on specific criteria.

Defining functions for rendering buttons and displaying dates in a specific format for user interaction.
The video demonstrates the process of designing a user interface for selecting delivery dates and placing
orders, including styling elements and navigating between screens. It covers setting styles, initializing
views, handling user interactions, and importing data for different categories.

Styling elements such as text, views, and buttons for a user interface. It involves setting colors, fonts,
padding, and alignment for a visually appealing design.

Handling user interactions like button presses and navigating between screens. This includes setting up
event handlers and using router functions to move between different parts of the app.

Importing and using data for different categories to display items. The video shows how to structure and
import data for men, women, kids, and household items for a shopping app.

The video demonstrates designing a user interface for a mobile app, including text, icons, and pressable
elements, and customizing styles based on user interactions.

Designing text, icons, and pressable elements for the UI. Customizing font size, background color,
padding, and border radius.

Styling the outermost views and aligning elements using flex properties. Implementing on press events
for interactive user experience.

Creating categories like men, women, kids, and household with corresponding pressable elements.
Changing styles based on user selection.

The video demonstrates the process of designing a screen for selecting and adding items to a shopping
cart using React Native, including mapping over data categories and implementing Redux functionalities.

Designing individual components for different categories like men, women, kids, and household,
including mapping over data and displaying images and prices.

Implementing Redux functionalities for adding items to the cart, updating quantities, and displaying
selected options and prices based on user selections.

Setting up Redux toolkit and React Redux, creating reducers, and defining actions for adding items to the
cart within the application.

The video discusses how to add, increment, and decrement items in a shopping cart using Redux Toolkit
and React. It covers actions such as adding items to the cart, incrementing quantity, decrementing
quantity, and clearing the cart.

Explanation of adding items to the cart and checking for existing items.

Demonstration of incrementing and decrementing item quantities in the cart.

Implementation of clearing the cart functionality.

Redux toolkit helps manage state in React components efficiently by dispatching actions to update the
store, creating a new state, and automatically updating components. This process eliminates the need
for prop drilling from top to bottom level components.
The video demonstrates the process of styling a button and text elements, creating a new screen called
the card screen, and initializing a Firebase project for the app. It covers styling, layout, and Firebase
integration.

Styling button and text elements for a design. Demonstrates setting background color, padding, border
radius, and flex properties for a visually appealing layout.

Creating a new screen called the card screen. Shows the steps to create a new file, integrate it into the
layout, and set up navigation to the new screen.

Initializing a Firebase project for the application. Covers creating a new project, adding Firebase
configurations, and installing Firebase into the application.

The video demonstrates the initialization of an app with Firebase config, setting up screens for login and
register functionalities, and designing the login screen with input fields, buttons, and styling.

Initializing the Firebase app and database. Importing necessary components and setting up Firebase
config.

Setting up screens for login and register functionalities. Creating files for login and register screens
within an authenticate folder.

Designing the login screen with safe area view, images, text fields, keyboard avoiding view, text inputs,
and pressable buttons. Styling elements for a visually appealing interface.

The video demonstrates the process of setting up authentication and database storage using Firebase in
a React Native application, including handling user registration and login. It also highlights the
importance of correct Firebase SDK version for smooth integration.

Setting up authentication and database storage using Firebase in a React Native app.

Handling user registration and login processes.

Importance of using the correct Firebase SDK version for seamless integration.

The video demonstrates the process of adding an address to a user profile using React Native and
Firebase, including handling user input, saving data to Firebase, and fetching dynamic addresses. It also
covers implementing onPress events and use effect for fetching data.

Demonstration of setting up user input fields for adding an address and implementing the functionality
to save the address data to Firebase.

Explanation of how to fetch dynamic addresses from the backend using useEffect and integrating
onPress events to trigger actions like adding addresses.

Overview of handling errors, such as expired access tokens, and the importance of keeping user input
fields empty after adding an address.

The video demonstrates the process of initializing and accessing user addresses from a Firebase
Firestore database in a React Native application, showcasing the retrieval and display of address data
dynamically.
Demonstrating the initialization of address collection reference and query in React Native using Firebase
Firestore. Explaining the process of fetching address data and populating an empty array with the
retrieved addresses.

Illustrating the setting of addresses using useState in React Native and displaying the retrieved addresses
through console.log to ensure correct retrieval from the backend database.

Expanding on dynamically mapping and displaying the retrieved addresses in the frontend interface of
the React Native application, emphasizing interactive selection and display of user addresses.

Detailing the design implementation for displaying total amount, promo code, delivery charges, and the
final payable amount in the React Native application interface, providing step-by-step styling
instructions.

The video demonstrates the process of placing an order in a system, including calculating charges,
navigating screens, and storing orders in the backend. It also covers initializing functions, fetching data,
and designing the order screen.

Calculating charges and total amount for the order. It involves adding charges and displaying the
payable amount.

Navigating screens and placing the order. It includes transitioning to the order screen and displaying
order details after pressing the place order button.

Storing orders in the backend and initializing functions. It covers creating order collections, fetching
orders, and defining functions for order placement.

Designing the order screen and mapping over orders. It involves styling the order screen layout,
mapping over orders to display details, and designing individual order components.

The video demonstrates the process of designing an application interface, including styling orders, text
elements, icons, and layout. It also mentions potential improvements in login functionality and
navigation from the cart to checkout.

Styling elements such as orders, text, and icons within the application interface.

Suggestions for improving login functionality and navigation within the application.

Ability to add items to the cart, addresses to the backend, and fetch orders from the backend in the
application.