Real World Example

Marketplaces like Flipkart Seller Hub or Amazon Seller Central use one React app for many kinds of staff: some can only see orders, some can edit listings, some can see payouts. The UI hides buttons the user cannot use and the API rejects them anyway. Here is ShopEase's seller dashboard doing both.

// src/pages/SellerDashboard.jsx
import { useEffect, useState } from 'react';
import { api } from '../api';
import { useAuth } from '../auth/AuthContext';

export default function SellerDashboard() {
  const { user, hasRole } = useAuth();
  const [products, setProducts] = useState([]);
  const [message, setMessage] = useState('');

  useEffect(() => {
    api.get('/seller/products').then((res) => setProducts(res.data));
  }, []);

  async function deleteProduct(id) {
    try {
      await api.delete('/products/' + id);
      setProducts((list) => list.filter((p) => p.id !== id));
    } catch (err) {
      if (err.response?.status === 403) setMessage('Only admins can delete products.');
    }
  }

  return (
    <section>
      <h2>Products of {user.email}</h2>
      {message && <p className="error">{message}</p>}
      <table>
        <tbody>
          {products.map((p) => (
            <tr key={p.id}>
              <td>{p.name}</td>
              <td>Rs {p.price}</td>
              <td>{p.stock} in stock</td>
              <td>{hasRole('ROLE_ADMIN') && <button onClick={() => deleteProduct(p.id)}>Delete</button>}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </section>
  );
}