MERN Stack E-Commerce App using React Native & Redux Toolkit

Install Node.js and VS Code, set up a frontend with Expo, add React Navigation Native and Native Stack, React Native Paper, Expo Camera, and run on Android, iOS, or web.

Explore how React Native uses view, text, and stylesheet to build an interface. Learn about safe area view, status bar handling, and Android and iOS padding decisions for responsive layouts.

Set up a navigation container from react navigation native, create a stack navigator, and define screens with names and components to build the app’s routing flow.

Create a centralized styles file in a React Native app, define theme colors as variables, and export reusable styles (padding, background, and input styling) with platform-specific adjustments.

Hide the header and set the initial route to home by default. Create a header and a 'our products' heading with font size 25 and font weight nine.

Create a header component for the MERN stack e-commerce app using React Native, featuring back and cart icons from React Native Paper, plus empty cart and product details awareness.

Build a search bar in React Native with a touchable magnify icon inside a row layout, applying spacing and elevation for shadow, and navigate to a new screen on press.

Create a responsive categories component in a React Native e-commerce app, building a horizontal scrollable button row with styled category buttons, managing selected category state, and preparing for backend-supplied categories.

Develop a search component in a React Native app by toggling an active search state and managing the search query. Render a search model with products via a search bar.

Create a product card in a react native app with redux toolkit, render a horizontal product list with stock, name, price, image, id, and enable add-to-cart and navigation to details.

Create a reusable React Native footer that highlights the active route and navigates between home, cart, and profile using useNavigate, with an authenticated flag guiding login.

Learn to build a product image carousel in a React Native app using React Native Snap Carousel, configuring layout, dimensions, refs, and rendering items from an image array.

Design a product details layout in a React Native view with a carousel-driven content area, including product name, price, description, and a quantity selector with stock checks and add-to-cart.

Create and style an add to cart button in a React Native app using React Native Paper, with a cart icon, and use Redux Toolkit for stock-checked add-to-cart and toast.

Learn to integrate the react-native-toast-message package in a MERN stack e-commerce app, configure position and offsets, and trigger success and error toasts like added to cart and out of stock.

Create a cart heading in a React Native app with a header including a cart button and back button, plus a reusable heading component for the home and cart screens.

Create a cart layout in a React Native app with Redux Toolkit by building a scrollable cart container, mapping cart items, and adding a checkout button.

Create a cart item component for a MERN stack e-commerce app using React Native and Redux Toolkit, passing id, name, stock, amount, and image with decrement and increment handlers.

Implement a checkout handler that navigates to the confirm order page only when the cart contains items, using a bottom add-to-cart workflow in a React Native app with Redux Toolkit.

Create a confirm order screen that renders cart items, shows a price summary (subtotal, shipping, tax, total), and navigates to the payment page with order details.

Develop a compact confirm order item component in React Native that displays an image, product name, and a quantity x price row with a rupee symbol, using a row layout.

Design a payment screen in a MERN stack app using React Native, offering cash on delivery or online payment with a radio group, navigation, and a Stripe integration plan.

Build a login screen for the MERN stack e-commerce app in React Native, with email and password inputs, a loading login button, and forgot password plus sign up navigation.

Build a forget password flow by reusing login screen styling, collecting email, sending otp, and guiding users through otp verification to reset their password with navigation to a verify page.

Create a sign up screen component with name, email, password, address fields and a photo upload, then wire navigation to camera, login, forgot password via OTP, and profile flows.

Build a profile screen in a React Native app, toggle login and profile views based on authentication, and update the avatar via camera integration using redux-enabled state.

Create a tiny React Native button box using touchable opacity for the profile page, configurable with icon, text, and press handler; supports reverse color and loading state with Redux integration.

Create a loader component and render React Native Paper's loading indicator. Center the activity indicator at top-50%, size 200, color black, to display the loading screen.

Implement a common navigation handler in a React Native MERN app to route admin panel, orders, profile, password, and sign-out actions via a switch statement.

Edit profile UI built by repurposing sign-up form into an update profile screen, wired to a route with padding tweaks and fields pin code, country, city, address, email, and name.

Create a change password screen in a React Native app, wire the change password route, and implement two password fields (old and new) with a header and top padding adjustments.

Learn to build an orders screen in a React Native e-commerce app, including a loading state, header, and rendering order items from a sample orders array with a no-orders placeholder.

Create a reusable order item component for a MERN stack app using React Native and Redux Toolkit, showing id, price, address, created at, status, payment method, and admin update handler.

Create the admin panel for a MERN stack e-commerce app using React Native and Redux Toolkit, featuring an admin dashboard, header with back button, and product, order, and category management.

Develop a product list item component for react native e-commerce app, enabling navigation to details with id, and a long-press modal for edit or delete with image, price, and category.

Create a pie chart in the admin panel using React Native chart kit, install React Native SVG, configure data, colors, dimensions, and ensure proper styling for the dashboard.

Design and implement an admin navigation handler that routes to categories, all orders, and new product screens by case matching, includes a default fallback, and tweaks the panel's UI radius.

Build and manage the category screen inside the admin panel by creating a category list and card component, with add and delete handlers and input driven category creation.

Build the admin orders screen in React Native, display all orders with a loading state, render order items, and wire an update handler for admin use.

Create an update product UI in a React Native panel: build an edit page with loading states, inputs for name, description, price, stock, and a category select with route params.

Create the new product screen by adapting the update product controller, add product image handling with an avatar and camera navigation, and configure inputs for name, price, stock, and category.

Manage product images in the admin panel by adding a single image for new products and multiple images for updates, with image cards for preview and delete options.

Create a camera screen with expo camera and expo image picker, handle permissions, capture or select images, and pass them via navigation for new product and profile flows.

Learn to integrate camera access in the React Native app, handle camera permission with useEffect, and capture images using Expo Camera's takePictureAsync and image picker flow.

Demonstrates using the real phone camera in a React Native app, including permissions, taking photos, switching cameras, and handling data URI versus asset data for uploads, and backend integration.