E-Commerce Management Dashboard

Problem

In this e-commerce management dashboard built for small businesses, establishing real-time data synchronization and effective global state management across different modules (product listings, inventory movements, and order tracking) was a critical requirement.

As I was using Redux for the first time in this project, I initially encountered challenges in triggering global state actions (dispatching) and correctly synchronizing state updates across component trees. Because the global dispatching logic was not properly structured in early iterations, UI components failed to reflect state changes instantly—leading to data inconsistency between product updates, order placements, and stock deductions.

What I Did

• Redux Architecture & State Setup: Adopted Redux Toolkit (RTK) to design a modular architecture consisting of discrete slices and a central store for products, inventory movements, and order management.
• Resolving Global Action Dispatching Issues: Overcame initial state triggering and synchronization bottlenecks by refactoring component-level handlers and optimizing useDispatch usage. Encapsulated asynchronous API requests using createAsyncThunk to ensure global actions (fetching, updating) were properly tracked across all connected UI components.
• Component Synchronization: Ensured seamless reactive rendering via useSelector hooks so that when an order is placed or stock is updated, the UI updates instantly without requiring page refreshes.
• Full-Stack Integration:
  • Frontend: Built a responsive, intuitive admin dashboard using React, Redux, JavaScript, and Bootstrap.
  • Backend: Engineered RESTful API endpoints and business logic for stock management using C#, ASP.NET Core, Entity Framework Core, and MySQL.

Technical Notes

// Redux Toolkit async thunk action for stock updates
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

export const updateStock = createAsyncThunk(
  'stock/updateStock',
  async ({ productId, newQuantity }, { rejectWithValue }) => {
    try {
      const response = await axios.put(`/api/products/${productId}/stock`, {
        quantity: newQuantity,
      });
      return response.data;
    } catch (err) {
      return rejectWithValue(err.response.data);
    }
  }
);