MERN Stack ECommerce App - React,Redux,Node,Express,Mongo DB

Set up the React app by creating a client folder, initializing with create react app, and running npm start to view at localhost:3000, then update source with project title.

Build a responsive navbar for the MERN eCommerce app using React and Bootstrap, import Bootstrap, style with className, and add login, register, and cart links.

Display the home screen by mapping static product data through a reusable product component using a Bootstrap grid, showing the separation of screens and components.

Implement routing with React Router to navigate from the home screen to the product description page using a product id parameter.

Display dynamic product details on the product description page by filtering the selected product, showing image, name, description, and price, and implement a stock-based quantity selector and add-to-cart workflow.

Implement a star rating bar on product cards using the react-rating npm package, configuring initial rating, symbols, color, and read-only mode to display decimal ratings such as 4.5.

Initialize npm in the backend folder, install express, create an express server with a home route, and start the server using a restart-on-change tool on a configured port.

learn to set up MongoDB Atlas, create a free cluster, create a database and collection, configure database users and IP access, and connect to MongoDB Compass for local development.

Install mongoose, create a database connection file, and connect to MongoDB Atlas; verify the connection and handle authentication errors for a reusable mongoose setup.

Learn to import static product data into a new products collection in MongoDB, allowing automatic _id generation, so the homepage can render data from the database.

Create product model for MERN stack by defining a mongoose schema and model with name, image, category, description, price, stock, rating, and a reviews schema with user, rating, and timestamps.

Learn to fetch all products from MongoDB using Express router, create a get route, and test with Postman, returning product data to the client.

Fetch all products from the backend with axios on homescreen, remove static data, and render Product components by mapping the API data with keys from product._id.

Implement redux state management in the MERN app by creating actions, reducers, and store; fetch all products with axios, manage loading and success/failure, and connect via react-redux.

Wire the homepage to the Redux store by dispatching get all products actions, using useSelector to read loading, products, and error, and render accordingly.

Fetches a single product by id and renders its details on the product description page by wiring actions, reducers, and a backend route in the MERN stack.

Bring state to the product description page by selecting the product data from Redux, handling loading and error states, and refining layout to display product details after data retrieval.

Learn to implement add to cart on the product description page using frontend quantity state and redux actions and reducers, dispatching product data and quantity to update the cart.

Dispatch add to cart with product and quantity to create a cart item and update the cart reducer, tracking name, ProductID, price, stock, and quantity.

Prevent duplicates in the cart by updating the quantity of an existing item when the same product is added, using redux state and item id matching.

Store the cart data in local storage to persist after refreshes, initialize from local storage on load, and update local storage when items are added to the cart.

Design and implement the cart screen for the MERN stack ecommerce app with a dynamic table showing name, price, quantity, and total, supporting deletion and persisting across refreshes.

Update the quantity directly from the cart screen using dispatch actions to automatically adjust item counts and prices, and implement delete from cart for seamless cart management.

Calculate the cart subtotal by reducing the cart items array, summing each item's price times its quantity, and display the subtotal on the cart screen.

Design and implement a registration and login flow in a MERN app, creating backend user models, routes, and a validated registration form with name, email, password, and confirm password fields.

Learn to implement user registration in a MERN stack app by creating Redux actions and reducers, wiring Axios post requests to register routes, and updating the store.

Implement the backend user registration by creating a mongoose user model with name, email, and password, adding a post /api/users/register route, and handling success or email already registered errors.

Transform the registration screen into a login screen with email and password inputs, update handlers and actions to login, and wire a post /login route returning success or invalid credentials.

store the logged-in user in local storage and app state to persist authentication, initialize current user in the store, and redirect to the home page after login.

Update the navbar to reflect login state by displaying the current user name with a dropdown (profile, orders, logout) using local storage or the login reducer.

Implement logout logic for MERN stack e-commerce app with React and Redux, clearing current user data, cart items, and local storage, dispatching the logout action, and routing to login page.

Implement loading spinners with a loader component and show error messages via an error component across home, product, login, and registration pages; display a registration success alert and login/register navigation.

Design and implement a homepage filter component for the MERN e-commerce app to search by name, sort by price, and filter by popular and categories (electronics, fashion, mobiles, games).

Implement the filter logic for the product list by dispatching a filter products action, calling get all products, and filtering by tzatziki, sarti, and category.

Implement a Stripe payment gateway in a MERN ecommerce app, including simulating an order, entering customer shipping details, and validating transactions in the Stripe demo environment.

Implement a Stripe checkout flow in the Monstercat e-commerce app, configuring publishable and secret keys, installing react-stripe-checkout, and handling tokens and currency conversion.

Implement action creators and reducers for placing orders in the payment gateway. Dispatch place order requests with token, subtotal, current user, and cart items to backend, handling success or failure.

Implement stripe payment checkout on the backend by creating an order route, configuring stripe, creating customers and payments, and handling success or failure.

Create a Mongoose order model to store user details, order items, shipping address, amount, and transaction data after successful payment, then save the order before sending it to the user.

Create and send a properly formatted order to the database by filtering counting stock, building the order object with user and shipping address, and including the Stripe payment token.

Fix a bug by updating local storage after cart item deletions and implement loading, success, and error states on checkout to confirm orders in MongoDB.

Design an orders screen to display all a specific user's orders by filtering the MongoDB orders collection, using a Bootstrap table with amount, date, and status.

Learn to implement redux actions and reducers to fetch orders by user from the backend, dispatch the get orders by user call, and guard the orders screen by login check.

Update the orders screen by fetching user orders, rendering them in a table with delivery status, created timestamps, and error handling, using Redux selectors and dispatch.

Design an order info page that shows details, status, and shipping, when a table row is clicked, using route parameters and redux actions to fetch the order by id.

Design the order description page by wiring state with selectors, handling loading and errors, and rendering order items, order details, and shipping information.