DAY 64: How I Completed a Full-Featured E-Commerce Frontend Using React & Redux Toolkit | ReactJS

---

🚀 Introduction

Welcome to Day 64 of my Web Development Journey!
After building a strong foundation in HTML, CSS, and JavaScript, I transitioned to ReactJS — a powerful library for creating dynamic and interactive user interfaces.

Along the way, I explored different state management techniques in React, including useState, Context API, useReducer, and external libraries like Zustand. More recently, I dove deep into Redux Toolkit (RTK) — one of the most popular and robust solutions for managing state in modern web applications.

In my previous blog (Day 61) I documented the first half of my E-Commerce Application journey, where I implemented routing, product listing, filtering, sorting, search functionality, and the product details page.

Over the past few days, I continued building this project and worked on completing the remaining core features. This included implementing the cart functionality, building the checkout and place order flow, creating an orders page, and adding essential pages like Login, About Us, and Contact. With this, my full-featured E-Commerce App is now complete 🎉.

📂 You can check out the complete source code of my E-Commerce App in this GitHub repository.

👉 I also share real-time updates and coding insights on Twitter.

I’m documenting this journey to stay consistent and share my learnings. Whether you’re starting with React or exploring state management & project structuring, I hope this blog gives you practical insights!

📅 Here’s What I Covered Over the Last 3 Days

Day 61

• Built the Cart Page UI.
• Implemented a dedicated cartSlice in Redux Toolkit to manage cart state (add, remove, update items).

Day 62

• Developed the Place Order Page with checkout functionality.
• Created an ordersSlice to manage and persist order details.
• Built the Orders Page to display all user orders in a structured way.

Day 63

• Implemented the Login Page for authentication flow (basic version).
• Added static informational pages: About Us and Contact Us to enhance the app structure.

Now, let’s dive into each of these implementations with explanations and code snippets 👇

---

1. Completing the E-Commerce App: Cart, Orders, and Pages

In the last few days, I continued building the E-Commerce Application with React and Redux Toolkit. I focused on implementing the cart functionality, order placement, checkout flow, and additional pages like Login, About, and Contact.

Here’s a detailed walkthrough of these features and their implementation.

1.1 Cart Page

The Cart Page allows users to view all items added to the cart, update quantities, and proceed to checkout.

Key Features Implemented:

• Display all cart items with name, image, price, size, and quantity.
• Update item quantity directly in the cart.
• Delete cart items using a delete button.
• Show cart totals including subtotal and shipping fee.
• Navigate to the Place Order Page.

Redux Implementation Highlights:

• cartSlice manages the state of the cart, including actions like:
  • addCartItem → Adds a product to the cart or increments quantity if it already exists.
  • deleteCartItem → Removes an item from the cart.
  • updateCartItemQuantity → Updates quantity for a specific cart item.
  • clearCart → Empties the cart after checkout.

const cartSlice = createSlice({
  name: "cart",
  initialState: {
    list: [],
  },
  reducers: {
    addCartItem: (state, action) => {
      const itemIndex = state.list.findIndex(
        (item) =>
          item.productId === action.payload.productId &&
          item.size === action.payload.size,
      );
      if (
        itemIndex !== -1 &&
        action.payload.size === state.list[itemIndex].size
      ) {
        state.list[itemIndex].quantity += 1;
        return;
      }
      state.list.push({ ...action.payload, quantity: 1 });
    },
    deleteCartItem: (state, action) => {
      const itemIndex = state.list.findIndex(
        (item) =>
          item.productId === action.payload.productId &&
          item.size === action.payload.size,
      );
      if (itemIndex === -1) {
        return;
      }
      state.list.splice(itemIndex, 1);
    },
    updateCartItemQuantity: (state, action) => {
      const itemIndex = state.list.findIndex(
        (item) =>
          item.productId === action.payload.productId &&
          item.size === action.payload.size,
      );
      const qty = Math.max(1, Number(action.payload.quantity));
      state.list[itemIndex].quantity = qty;
    },
    clearCart: (state) => {
      state.list = [];
    },
  },
});

export const selectCartItems = (state) => state.cartItems.list;
export const selectCartItemsData = createSelector(
  [selectAllProducts, selectCartItems],
  (products, cartItems) => {
    return cartItems
      .map((item) => {
        const product = products.find((p) => p._id === item.productId);
        if (!product) return null;
        return { ...product, size: item.size, quantity: item.quantity };
      })
      .filter(Boolean);
  },
);

export const selectCartTotal = createSelector(
  [selectCartItemsData],
  (cartItems) =>
    cartItems.reduce((acc, item) => {
      return acc + item.price * item.quantity;
    }, 0),
);

export const {
  addCartItem,
  deleteCartItem,
  updateCartItemQuantity,
  clearCart,
} = cartSlice.actions;

export default cartSlice.reducer;

Explanation:
Selectors are functions that derive state in an optimized way.
createSelector from Redux Toolkit memoizes the output, so the UI only re-renders when the data actually changes.
Here, it merges the cart items with full product details to display them in the Cart Page.

• selectCartItemsData is a selector that combines the cart state with product data from productsSlice

• selectCartTotal calculates the total price of the cart.

• Components like CartTotal consume these selectors to render derived data, keeping UI components clean and stateless.

  const totalCartAmount = useSelector(selectCartTotal);
  

1.2 Place Order Page

The Place Order Page allows users to fill delivery information and choose a payment method before placing an order.

Key Features:

• Collect user delivery details: name, email, address, city, state, zip code, country, and phone number.
• Select a payment method: Stripe, Razorpay, or Cash on Delivery.
• Display cart totals on the right.
• Place an order and clear the cart after successful submission.

Redux Implementation Highlights:

• Local state method tracks the selected payment method.
• Dispatches placeOrder action from ordersSlice to save order details:

  const handlePlaceOrder = () => {
    dispatch(placeOrder({ items: cartItems, method, total: totalCartAmount }));
    dispatch(clearCart());
    navigate("/orders");
  };

• clearCart is dispatched to empty the cart after the order is successfully placed:

Explanation:

• Here, Redux Toolkit ensures a single source of truth for cart and orders.
• cartSlice maintains the cart state while ordersSlice maintains a list of all orders.
• Actions update the global store, and selectors derive data for UI rendering.
• The PaymentMethod component handles the UI for selecting the payment type and updates the local state accordingly.

1.3 Orders Page

The Orders Page displays all past orders placed by the user, along with order details and status.

Key Features:

• List all orders with items, quantity, size, price, order date, and payment method.
• Order tracking and status indication.
• Orders are dynamically derived from ordersSlice.

Redux Implementation Highlights:

• selectOrdersData maps each order’s items with product details:

const ordersSlice = createSlice({
  name: "orders",
  initialState: {
    allOrders: [],
  },
  reducers: {
    placeOrder: (state, action) => {
      const order = {
        orderId: crypto.randomUUID(),
        list: action.payload.items,
        method: action.payload.method,
        date: new Date().toISOString(),
        total: action.payload.total,
      };
      state.allOrders.push(order);
    },
  },
});

export const selectOrdersData = createSelector(
  [selectAllProducts, (state) => state.orders.allOrders],
  (products, allOrders) => {
    return allOrders.map((order) => {
      const data = order.list
        .map((item) => {
          const product = products.find((p) => p._id === item.productId);
          if (!product) return null;
          return { ...product, size: item.size, quantity: item.quantity };
        })
        .filter(Boolean);

      return {
        data,
        method: order.method,
        date: order.date,
        orderId: order.orderId,
        total: order.total,
      };
    });
  },
);

export const { placeOrder } = ordersSlice.actions;

export default ordersSlice.reducer;

Explanation:

Using createSelector ensures that the Orders Page only re-renders when orders actually change.
This is highly efficient for performance, especially with larger data sets.

1.4 Login Page

The Login Page provides both login and signup forms with a toggle option.

Features:

• Input fields for name (signup only), email, and password.
• Toggle between Sign Up and Login forms.
• Basic validation via required inputs.

<p
  onClick={() =>
    setAuthState(authState === "Sign Up" ? "Login" : "Sign Up")
  }
  className="cursor-pointer"
>
  {authState === "Sign Up" ? "Create Account" : "Login Here"}
</p>

Note: Authentication state can later be managed using Redux Toolkit userSlice to store user info and JWT tokens.

1.5 About Page

The About Page introduces the company and provides information about the mission and values.

Features:

• Company history and mission statement.
• Why choose us section with quality assurance, convenience, and customer service.
• Newsletter subscription at the bottom.

1.6 Contact Page

The Contact Page provides contact details and career information.

Features:

• Store address, phone, and email.
• Career section with a button to explore job openings.
• Newsletter subscription.

1.7 Key Redux Concepts Applied

• Centralized State Management: Cart and orders logic are fully managed via Redux Toolkit slices (cartSlice and ordersSlice), providing a single source of truth.
• Selectors: selectCartItemsData, selectCartTotal, and selectOrdersData provide derived, memoized state that components can directly consume.
• Actions & Reducers: Every state modification happens via actions (like addCartItem or placeOrder) and reducers that update the store predictably.
• Scalability: New features (wishlist, user profile, admin functionality) can be added without breaking existing logic because the store is modular and centralized.

1.8 Summary of New Features

1.9 Final Thoughts

Over the past few days, I successfully wrapped up the remaining features of my E-Commerce Application — including cart management, order placement, authentication, and informational pages. With these implementations, the project is now complete and fully functional as a frontend e-commerce app.

This journey not only strengthened my React and Redux Toolkit skills but also gave me hands-on experience in building a scalable, real-world project. I learned how to structure slices, use selectors effectively, and keep the UI clean by deriving state from Redux.

The best part is seeing how everything fits together — from browsing products to placing an order — just like a real e-commerce platform.

But this is only the beginning. In the future, I plan to extend this project by:

• Adding user authentication with JWT
• Implementing a wishlist feature
• Building an admin panel for managing products and orders
• Connecting it with a backend (Node.js + Express + MongoDB) for persistence

With the frontend complete, I now feel confident about the progress made and will continue polishing my frontend skills while exploring more advanced concepts in React and Redux.

---

2. What’s Next

I’m excited to keep growing and sharing along the way! Here’s what’s coming up:

• Posting new blog updates every 3 days to share what I’m learning and building.
• Diving deeper into Data Structures & Algorithms with Java — check out my ongoing DSA Journey Blog for detailed walkthroughs and solutions.
• Sharing regular progress and insights on X (Twitter) — feel free to follow me there and join the conversation!

Thanks for being part of this journey!

---

3. Conclusion

This project marks the completion of a fully functional frontend E-Commerce application with features like product browsing, filtering, cart management, order placement, and more.

Throughout the journey, I applied Redux Toolkit extensively for state management, keeping business logic centralized and UI components clean. By implementing selectors, reducers, and actions, the app became both scalable and efficient — a structure that can easily support future enhancements like authentication, wishlist, and admin features.

Completing this milestone has given me a solid foundation in React + Redux Toolkit and the confidence to take on more complex projects. For now, my focus will remain on strengthening my frontend skills and exploring advanced React patterns before diving deeper into backend development. 🚀

This project is not just a practice exercise but a portfolio-ready application that reflects real-world e-commerce functionality.

👉 You can explore the complete source code here: GitHub Repository

Thanks for reading — and if you’re also learning Redux Toolkit, I hope this blog helps you speed up your journey.