Building the Ultimate Nike App in React Native & Redux
notJust․dev・132 minutes read
The text explains the process of developing the Nike application using React Native and Redux, focusing on creating a user-friendly interface, implementing key features like adding products to the cart, and exploring advanced functionalities like global state management with Redux. The author, Vadim, a full-stack developer, offers guidance on setting up the application, enhancing the user experience, and hints at upcoming tutorials covering Redux implementation, while also inviting feedback on potential features and promoting their weekly live sessions for project-based tutorials.
Insights
- The application being built is the Nike application using React Native and Redux, with a minimalistic user interface for easy development.
- Implementing global State Management using Redux is crucial for efficiently sharing data between components and handling frequent data changes like adding items and adjusting quantities in the shopping cart.
- Redux Toolkit simplifies Redux implementation by reducing boilerplate, utilizing actions, reducers, and selectors to manage the store efficiently.
- The creator, Vadim, focuses on aiding developers through YouTube and a premium Academy, offering tutorials on topics like React Native, Redux, and building e-commerce applications, with live sessions on Fridays at 3 P.M GMT for project-based discussions.
Get key ideas from YouTube videos. It’s free
Recent questions
How is the Nike application built?
Using React Native and Redux.
What does the main page of the Nike application display?
A list of products in two columns.
How can users view more details about a product in the Nike application?
By clicking on the product.
What can users find in the shopping cart of the Nike application?
All added items and calculations.
Who is the creator of the Nike application?
Vadim.
Related videos
Summary
00:00
Building Nike App with React Native & Redux
- The application being built is the Nike application using React Native and Redux.
- The main page displays a list of products in two columns that can be scrolled through.
- Each product can be clicked to view more details, including an image carousel and an "add to cart" button.
- The cart can be accessed from the top menu, showing all added items and calculations like total and subtotal.
- The user interface is minimalistic, making it easy to start building the application.
- Advanced features like navigation and global state management using Redux will be covered.
- The creator, Vadim, is a full-stack developer focusing on helping developers through YouTube and a premium Academy.
- To start building the application, initialize an empty Expo application named "Nike" using npx create Expo app.
- The application's home screen displays products using the image component from React Native.
- Products data is stored in a separate folder called "Data" and imported into the application for rendering using a flat list component.
20:32
Rendering Product Array in React Native
- To render a product array, the flat list requires a "render item" property.
- The "render item" property expects a function to be called for each item in the product array.
- This function should return JSX to specify how to render each product.
- To render an image for each product, use the item's image property.
- To display products in two columns, wrap the image in a View container.
- Define styles for the container to take half the screen width and add padding.
- Set the number of columns property in the flat list to render items in two columns.
- To extract the logic into a separate component, create a Product Screen file in the screens folder.
- A React Native component is a function that returns JSX, defining the component's structure.
- Import necessary components and styles into the Product Screen file for rendering the product list.
41:25
Customizing Image Rendering with FlatList
- To render images using the FlatList component, properties can be adjusted to customize the appearance.
- Import the FlatList component from React Native and render it as a self-closing tag.
- The FlatList requires two properties: data and renderItem.
- Access an array of images from the data source, such as products.js, to provide URLs for rendering images.
- Adjust the width of images to display them horizontally by setting the FlatList property to horizontal.
- To resolve a width dependency issue between images and the FlatList, change the width property from relative to a fixed value.
- Alternatively, use the useWindowDimensions hook to set the image width equal to the screen width.
- Remove the scrollable indicator at the bottom by setting showsHorizontalScrollIndicator to false.
- Enable paging to center images when scrolling, creating a smooth image carousel effect.
- For displaying text components like title, price, and description, use the Text component and style them accordingly with font size, font weight, margin, line height, and letter spacing.
01:01:54
"Center, Style, Function: Shopping Cart UI Guide"
- Align items center vertically and horizontally to center the "Add to Cart" button
- Change the text style to bold with a font size of 16
- Implement a function for the "onPress" event of the button
- The "onPress" event triggers a function called "add to cart" which displays a console warning
- Instructions on working with icons are optional and can be found in the guide
- Complete the product details page by committing changes
- Prepare for the shopping cart UI by creating a new file named "shopping cart.js"
- Render a list of shopping cart items using a FlatList component
- Include three lines of text for subtotal, delivery fee, and grand total at the bottom of the items
- Style the footer with borders, padding, and font sizes to enhance visual appeal.
01:26:10
"Optimizing Checkout Button Placement in React"
- The checkout button in the product details screen is similar to the add to cart button and is always displayed at the top of the screen.
- The checkout button should be placed beside the flat list, not in the footer, to avoid layout issues.
- To resolve layout problems, components in React should return one single child, so encapsulating them in a fragment component is necessary.
- Import the pressable component from React Native for the on press functionality, and use it for the checkout button.
- The button text for the checkout button can be taken from the product details screen and placed in the shopping cart screen.
- To keep the flat list component cleaner, separate the footer component into a separate component called shopping cart totals.
- Implement swipe down to reload the cart using a flat list, although it may not be necessary if data is managed locally.
- The shopping cart user interface is considered complete at this stage, with the addition of navigation and global state management in the next steps.
- React Navigation is used to connect all screens into a navigation system, with a native stack navigator for screen transitions.
- In the product screen, transform items into pressable components to handle press events and navigate to the product details screen upon pressing an item.
01:50:35
Efficient Navigation and Global State Management with Redux
- To access the navigation object when working within a screen or component rendered as a stack screen, utilize the props received as navigation to navigate to different screens.
- Use the navigation object instead of console.warn to navigate to the desired screen, like "product details," ensuring the correct screen name is provided.
- Pressing on an item redirects to the product details screen, with an automatic back button feature for seamless navigation.
- Adjust the presentation mode of screens, like making the product details screen appear as a model from the bottom, by providing additional options in the navigation settings.
- Implement the useNavigation hook to access the navigation object, ensuring reliability across components nested within the navigation.
- Add a button in the header to navigate to the shopping cart screen, using the headerRight component in the screen options and handling the onPress event to navigate to the "cart" screen.
- Customize the background color of all screens simultaneously by providing screen options with content style, like setting the background color to white.
- Prepare for managing the global state of the application using Redux to efficiently share data between multiple components and avoid prop drilling or unnecessary re-renders.
- Discuss the limitations of prop drilling and the context API for managing changing data frequently, highlighting the need for Redux in such scenarios.
- Emphasize the upcoming tutorial on implementing Redux for global state management, ensuring a scalable and efficient application structure.
02:14:55
Efficient Global State Management with Redux Toolkit
- Shopping cart use case involves adding items and changing quantities affecting total and subtotal data.
- Implementing global State Management is necessary due to frequent data changes.
- Redux is a popular library for managing global state, used in many projects.
- Redux Toolkit simplifies Redux implementation with less boilerplate.
- Redux operates with a store, actions, and reducers to manage state.
- Actions trigger reducers, which update the state based on the action.
- Redux Toolkit provides tools to create and manage the store efficiently.
- Slices in Redux split the store logically, like products and shopping cart data.
- Selectors are used to access specific data from the global state.
- Dispatching actions in Redux Toolkit is simplified, triggering reducers to update the state.
02:39:23
Updating and Displaying Selected Product Information
- The product ID is crucial for setting the selected product.
- The state is updated with the selected product information.
- The selected product data is utilized in the Details page to display the selected item's information.
- The `useSelector` from React Redux is imported for accessing the selected product.
- The selected product is obtained from the state using the `useSelector` function.
- Dispatching an action occurs when an item is pressed on the product screen.
- The action triggers a reducer in the product slice to update the state.
- The reducer updates the selected product by searching for the specific product ID.
- The selected product is consumed in the product details screen.
- The process seamlessly updates the selected product and displays the necessary information.
03:05:28
"Efficiently manage product quantities in card"
- To change the quantity for a product ID card item, use the Dot product.id and set the amount to one for increase and -1 for decrease.
- In the reducer, receive a payload with the product ID and amount to update the card item.
- Retrieve the product ID and amount from action.payload in the card slice.
- Locate the card item by matching the product ID in the state items.
- If the card item is found, adjust the quantity by adding the amount.
- Remove the item from the card if the quantity is zero or below.
- Implement two reducers for adding items to the card and changing quantity, including removal.
- Utilize selectors to derive data based on the state, reducing redundant data storage.
- Create a selector to determine the number of items in the card.
- Develop a selector to calculate the subtotal based on item prices and quantities.
- Use the create selector function to combine selectors for calculating the delivery fee.
- Define a selector to determine the total by adding the subtotal and delivery fee.
03:30:16
Building Navigation System with Redux Toolkit & Feedback
- The text discusses the process of building a navigation system, working with models, and implementing global State management using Redux and Redux toolkit. Data for the page is sourced from Redux, allowing for easy selection and updating of items, particularly for the card feature where quantities can be adjusted, triggering updates to subtotals, delivery, and total calculations.
- The creator invites feedback on potential features to add to the e-commerce application, such as implementing payments, animations, and a full stack application with a backend. They also mention their weekly live sessions on Fridays at 3 P.M GMT for project-based tutorials, encouraging viewers to subscribe and engage in discussions on Discord.
