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

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.

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.

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.

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 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.

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.

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.

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.