Customized Shopify App for Seamless Inventory Management

Project Overview

Key Features

Technologies Used

Results

Code Snippet

import React, { useState, useEffect } from 'react';

import axios from 'axios';



const InventoryDashboard extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      products: [],

      lowStockProducts: [],

      totalInventoryValue: 0

    };

  }



  componentDidMount() {

    // Fetch inventory data from the custom Shopify app API

    axios.get('/api/inventory')

      .then(res => {

        this.setState({

          products: res.data.products,

          lowStockProducts: res.data.lowStockProducts,

          totalInventoryValue: res.data.totalInventoryValue

        });

      });

  }



  handleProductUpdate = (productId, newQuantity) => {

    // Update the product inventory quantity via the API

    axios.put(`/api/inventory/${productId}`, { quantity: newQuantity })

      .then(res => {

        // Update the local state with the new inventory data

        this.setState(prevState => ({

          products: prevState.products.map(product =>

            product.id === productId ? { ...product, quantity: newQuantity } : product

          )

        }));

      });

  }



  render() {

    const { products, lowStockProducts, totalInventoryValue } = this.state;



    return (

      <div className="inventory-dashboard">

        <div className="dashboard-header">

          <h1>Inventory Management</h1>

          <p>Total Inventory Value: ${totalInventoryValue.toFixed(2)}</p>

        </div>

        <div className="products-table">

          <table>

            <thead>

              <tr>

                <th>Product</th>

                <th>Quantity</th>

                <th>Actions</th>

              </tr>

            </thead>

            <tbody>

              {products.map(product => (

                <tr key={product.id}>

                  <td>{product.title}</td>

                  <td>

                    <input

                      type="number"

                      value={product.quantity}

                      onChange={e => this.handleProductUpdate(product.id, e.target.value)}

                    />

                  </td>

                  <td>

                    <button>Update</button>

                  </td>

                </tr>

              ))}

            </tbody>

          </table>

        </div>

        {lowStockProducts.length > 0 && (

          <div className="low-stock-alert">

            <h2>Low Stock Alerts</h2>

            <ul>

              {lowStockProducts.map(product => (

                <li key={product.id}>{product.title} - {product.quantity} in stock</li>

              ))}

            </ul>

          </div>

        )}

      </div>

    );

  }

}



export default InventoryDashboard;