Customer & Admin Side Workflow

Customer Side:

A visitor lands on the home page and immediately sees featured products. From there, they can move to the products page, use search and category filters to find what they want, and open any product to see its price, rating, description, and stock.

Adding an item shows a quick toast message, and clicking buy now takes them straight to checkout.

The cart page updates the total instantly whenever the quantity changes or an item is removed. Checkout collects shipping details and payment choice, and once the order is placed, a thank-you page confirms it with an order ID and a short success animation.

Please refer to the screenshots of the Customer Side:

Admin Side:

The admin panel is not linked anywhere in the customer UI, so it can only be reached by typing /admin directly in the browser. Once there, the admin lands on a dashboard showing quick stats like total products, total orders, and revenue.

From the products page, the admin can add, edit, or delete products, with every change reflecting instantly through React state.

The orders page lists customer orders, and the admin can update order status directly from a dropdown. An exit admin option takes them back to the customer-facing store at any point.

Please note: To access the Admin Page, manually type /admin at the end of the URL.  (Refer to Module 1, Lesson 1 for this reason).

Please refer to the screenshots of the Admin Side: