How I Built a Real-Time E-Commerce Inventory System Using Next.js & Supabase

In modern e-commerce, few things frustrate a user more than adding the last available item to their cart, only to find out it’s out of stock at checkout because someone else bought it a second earlier. Traditional polling methods to check database stock are slow and server-heavy. To solve this for my high-traffic e-commerce architecture, I moved away from standard REST API calls and integrated Supabase Realtime with my Next.js frontend. Here is how I built a system that updates stock availability instantly across all active users. 1. Enabling PostgreSQL Realtime in Supabase Under the hood, Supabase uses PostgreSQL. Instead of constantly asking the database, "Has the stock changed?", I configured the database to push updates to the client whenever a row in the products table is updated. First, I enabled the realtime extension for my table via the Supabase SQL Editor: alter publication supabase_realtime add table products; 2. Subscribing to Changes in Next.js On the frontend, I utilized React's useEffect (or React 19's new data patterns) alongside TypeScript to listen for these database mutations. By subscribing to the specific product ID, the UI instantly reacts to any changes made by other users. Here is a simplified version of the real-time subscription hook: < > import { useEffect, useState } from 'react'; import { supabase } from '@/lib/supabaseClient'; export default function ProductStock({ productId, initialStock }: { productId: string, initialStock: number }) { const [stock, setStock] = useState(initialStock); useEffect(() => { const channel = supabase .channel('schema-db-changes') .on( 'postgres_changes', { event: 'UPDATE', schema: 'public', table: 'products', filter: `id=eq.${productId}` }, (payload) => { setStock(payload.new.stock_count); } ) .subscribe(); return () => { supabase.removeChannel(channel) }; }, [productId]); return ( ); } < /> The Result By leveraging Supabase's WebSocket connections, the product page now reflects stock changes in milliseconds. This completely eliminated concurrent checkout conflicts, reduced unnecessary database read queries by over 70%, and provided a much more dynamic and trustworthy user experience.