MERN Stack E-commerce Project: Part 2: Frontend Only

Define the user slice initial state with loading, error, an empty users array, a single customer profile, and authentication state with nested loading and Userinfo.

Learn how to dispatch a login action from a React component using useDispatch, manage login form state with a dynamic onChange, and handle a CORS error when calling the backend.

Install and apply the course package to the express server, enable client access to the API with cors, and test the login flow to verify the token.

Learn to display error and success messages in a React app using the SweetAlert component, including installing the package, rendering the component, and configuring icon, title, and message props.

Display the login error using a dedicated error message component and the sweet alert library, showing 'invalid login credentials' to guide front-end feedback.

Learn to protect client-side routes using a higher-order component that checks login status from local storage (token presence) and conditionally renders protected pages, including admin routes.

Learn to show loading and error states during user registration, fetch data from the store with useSelector, and implement redirect to the login page on successful signup.

Display product categories, brand, colors, and sizes using the React Select component. Transform sizes into value/label options, wire multi-select state, and enable search and clear for backend submission.

Fetch categories in the product component using useEffect and dispatch, then display category names in a native select and prepare value-label data for React Select.

Develop the frontend image upload for product creation by managing files and errors with useState, enabling multi-file selection and preparing them for backend submission, including pdf files.

Explore frontend implementation for the mern project: dispatch a create product action, manage image state separately, and map color and size selections to backend-ready data.

Learn front-end image validation in a MERN ecommerce project by rejecting pdf uploads and enforcing image size limits on add product form, showing real-time errors and disabling submission when invalid.

Create a fetch all products action in Redux to display the product list. Wire it into the slice and dispatch it with the get method and no payload.

Modify the frontend category creation action to use form data with name and image. Update backend file upload middleware and the categories route/controller to utilize the uploaded file path.

Dispatch the create category action with a name and a single image to add a new category from the frontend, handling form data and image validation.

Display category creation feedback by rendering loading, success, and error components using useSelector to read category state. Handle file size errors and reset error and success after dispatch.

Display product categories as navbar links by selecting categories from the store with useSelector, then slice to show the first four categories and handle nested category structures.

Walk through the product list component and its filter UI, using category URLs and backend filtering for price range, colors, brand, and size, with mobile and desktop css.

Learn to build dynamic product filtering in a MERN app by reading category from the query string, constructing a dynamic API URL, and dispatching a fetch action.

Discover frontend filtering of products by brand using API queries and optional URL updates, manage brand state, and validate results while preparing for size and color filters.

Add product colors by implementing the color form, dispatching create color actions with the color name, and updating the store to show loading, errors, and reset the form after success.

Master the frontend order placement flow: add to cart in local storage, apply client-side coupons, compute the total, and send order items and total to the API for stripe processing.

Implement a redux-driven approach to fetch cart items from local storage, prevent duplicate entries, and display cart data across components via a single source of truth.

Implement delete functionality to remove a product from the cart stored in local storage by id, update local storage, and dispatch a remove order item action to refresh the cart.

Modify the coupons API to fetch a single coupon by code, validate existence and expiry, differentiate the single coupon route, and return clear coupon not found or expired errors.

Implement frontend coupon functionality in the mern stack e-commerce project by dispatching the fetch coupon action, managing form state, and validating coupon codes.