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

Set up the frontend of a MERN stack e-commerce app using a starter template with React and Redux Toolkit, clone the starter, install dependencies, and configure Tailwind CSS and Stripe.

Install Tailwind CSS into a React app, configure the Tailwind config file, and add Tailwind CSS styles to index.css. Use utility-first classes to build and test the frontend.

Explore the frontend structure of this MERN e-commerce project, examining the admin and public folders, nested routes, and login and registration forms, with Tailwind CSS responsiveness and React Router navigation.

Install redux toolkit and react redux to simplify state management, install axios for http requests, and configure the store with slices and thunks.

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.

Create an async login action with Redux Toolkit using createAsyncThunk and createSlice to manage the initial user state via axios to users/login. Handle errors with rejectWithValue.

Create a Redux Toolkit user slice to handle login via extra reducers, manage loading, user info, and errors, and export the generated reducer for the store.

Connect the app to the Redux store using configureStore from Redux Toolkit, add the user reducer, wrap the app with Provider, and enable Redux DevTools to inspect actions and state.

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.

Color-code your three Visual Studio Code instances with the Peacock extension to distinguish the React Playground, server, and front end in the MERN e-commerce project.

Learn how to redirect users after login by reading the store's user info with useSelector, then route admins to /admin and customers to /customers/profile using window.location.href.

Add a loading state to the login button and show invalid login credentials errors in the frontend of the MERN stack e-commerce project.

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.

Persist user sessions by saving the login token to local storage and sending it in headers for authenticated API calls, using the localStorage API and JSON.stringify in the MERN frontend.

Learn how to build a responsive navbar for MERN frontend using Tailwind, hiding links based on user authentication, dynamically rendering category links from the backend, with mobile and desktop behavior.

Show and hide navbar links based on a logged-in user by reading the login token from local storage, updating public, private, and profile links on mobile and desktop.

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.

Protect admin routes in the frontend by checking the local storage user's is admin flag, render an access denied message for non-admins, and guard the admin dashboard.

Learn to implement user registration in a React and Redux frontend by creating a register action, wiring the registration slice, and posting to /register with full name, email, and password.

Create a reusable loading component for the frontend of a MERN stack e-commerce project using the React Loading package, integrated into the login flow and customizable with colors and variants.

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.

Dispatch a reset error action in redux store to clear the error state when the user clicks ok on the error component, avoiding a full page reload.

Explore the admin dashboard of the MERN stack e-commerce project part 2 frontend only, focusing on creating products, managing stocks, and rendering nested content with Outlet via React Router Dom.

Create a redux based add product workflow in the frontend, defining product state and a create product action with axios post to /product, handling auth token and status flags.

Create product slice handles an authenticated create action, fetches categories, brand, and colors, and hardcodes name, sizes, and price, updating loading, product, and isAdded flags and mounting in the store.

Persist the login user in the redux store by loading the token from local storage into the user slice, ensuring authenticated requests include the token in headers for product creation.

Pull the login token from the redux store using getState, extract userInfo.token, and pass it in an axios config with an authorization bearer header to the product action's request handler.

Learn to dispatch the create product action from the admin product form using useDispatch, pass form data (size, color, image, price, quantity, description), and test the action in the frontend.

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.

Create a categories slice and actions, fetch all categories from the backend via the categories endpoint, and update the store to display category options on the frontend.

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.

Create a brands Redux slice, implement a fetch all brands action, and mount the reducer in the store. Dispatch the action and render brand options in the product form select.

Fetch colors from the backend via redux colors slice, convert them into the select component options, and handle color changes with a dedicated change handler.

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.

Fixes a product creation error by submitting text fields and images via form data to match files field, appending name, description, category, sizes, colors, price, quantity, and images as files.

Displays loading and error states during product creation and resets the add product form by clearing isAdded, loading, and error through store actions and useSelector access.

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.

Dispatch a fetch product action to load all products and display them, focusing on trending products, mapping results, and showing the first image with a link to product details.

Drop existing products and create new ones in the MERN stack e-commerce frontend, using admin login, the MongoDB extension, and API calls to set categories, brands, colors, and products.

Fetch a single product and render its details via a Redux action. Use useParams to obtain the product ID and display name, price, images, colors, sizes, description with Tailwind CSS.

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.

In this frontend-only MERN stack lecture, we modify the add category form to dispatch category creation from admin dashboard, using image-upload pattern and nested navigation for brand, color, and category.

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.

fix the category creation file upload by properly handling a single image file, updating state and validation, and aligning the frontend file field with the backend file for Cloudinary payload.

Fetch all categories and display them in the navbar, enabling the product list to reuse them. Use dispatch, useSelector, and useEffect to fetch categories and update loading and store state.

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.

Display home categories on homepage using the nav bar logic, dispatch fetch for all categories, render with map, show up to five with a browse all categories option and images.

Extend the home category logic to display categories with name and image on the categories page via browse all categories, and prepare to show products when a category is clicked.

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.

Fetch colors and brands via redux actions, pull them from the store, and display them for filtering by color, brand, and size in the MERN stack e-commerce frontend.

Display all products on the frontend by fetching data and rendering each with the product component, then navigate to product details while preparing to apply filtering next.

Implement frontend category filtering by reading the url parameter and updating the product query to show men or women products.

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.

Learn to filter products by price and size in a frontend only MERN app, passing selections to the endpoint, updating the URL, and re-fetching results when state changes.

Learn to filter products by color in a mern stack frontend using color inputs and color.name filtering for the API; apply the same approach to price, brand, and size.

Display loading and error states for products by wiring store data and using loading and error components, with no data found when empty.

Learn how to add brands on the frontend for a MERN stack e-commerce project, wiring create brand actions with Redux and handling loading, error, and success states.

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.

Learn to add a product to the cart by saving its details to local storage and updating cart state with a Redux slice and async thunk.

Dispatch add-to-cart actions to save the selected product in local storage, including id, name, quantity, price, and description, for a Stripe-ready payload and future color and size options.

Learn to add a product to the cart in a frontend-only MERN stack e-commerce project by handling color and size selections, updating state, and using local storage.

Learn to validate cart items by color and size before adding to local storage, prevent duplicate products, and display success or error messages using the Sweet Elect component.

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.

Prevent duplication of products in the cart by checking local storage cart items for the product id before adding; show an alert when the product already exists.

Fetch cart data from local storage and render it on the shopping cart page, using dispatch and selector to display cart items with images and pricing.

Explore the frontend shopping cart experience by displaying cart items, enabling proceed to checkout when items exist, and updating the order summary as users adjust quantities or remove products.

Create a change order item quantity action to update cart items stored locally, recalculate the price, and dispatch the new quantity for Stripe processing during checkout.

Learn to dynamically update the new price when changing quantity in the frontend by multiplying item price by quantity, and update the cart items and local storage.

Fix cart pricing when quantity changes by introducing a total price per product, keeping the original price intact; convert input to a number using parseInt, Number, or unary plus.

Display the original price times quantity and the total price in the cart, and update the price when quantity changes by dispatching a change order item action.

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.

Resolve the frontend white screen by dispatching the local storage data fetch after adding to cart, and update product details to include total price and a default quantity.

Calculate the total order price by reducing cart items' total price with an initial zero, and display it in the order summary formatted as currency, ignoring the coupon for now.

Dynamically display product quantities on the frontend by using the API's quantity left field to populate a dropdown from 1 to the quantity left, updating the cart and product pages.

Create and fetch coupons in the frontend by building a coupons Redux slice, wiring API calls for create and fetch, and integrating with the store for checkout.

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 a fetch single coupon action in the coupons slice, call coupons/single with the coupon code in the body, and dispatch it from the shopping cart form.

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

Retrieve the cart and coupon from the store, manage the coupon code input, and display loading, error, and success messages, preparing to apply the coupon to the order summary.

Apply a coupon to the order summary by calculating the total price after discount, handling dynamic coupon input and percent-based reductions with the coupon.discount value.

Learn how to fix coupon form issues in a frontend-only MERN e-commerce project by syncing subtotal and order total, and resetting the coupon state after submission.