# How to Build Inventory tracking platform with V0 - Tool: v0 - Difficulty: Intermediate - Compatibility: V0 Premium or higher - Last updated: April 2026 ## TL;DR Build a multi-location inventory tracking platform with V0 using Next.js, Supabase, and Recharts. Track real-time stock levels across warehouses, retail stores, and fulfillment centers with inter-location transfer workflows, computed available quantities, and demand analytics — all in about 1-2 hours. ## Before you start - A V0 account (Premium or higher for prompt queuing) - A Supabase project (free tier works — connect via V0's Connect panel) - A list of your stock locations (warehouses, stores, fulfillment centers) - Your product catalog with SKU numbers ## Step-by-step guide ### 1. Set up the database schema with computed columns Open V0 and create a new project. Connect Supabase via the Connect panel, then prompt V0 to create the schema with locations, items, stock levels with a PostgreSQL generated column for available quantity, and transfer tables. ``` // Paste this prompt into V0's AI chat: // Build a multi-location inventory tracking system. Create a Supabase schema: // 1. locations: id (uuid PK), name (text), type (text CHECK IN 'warehouse','retail','fulfillment'), address (text) // 2. items: id (uuid PK), sku (text UNIQUE), name (text), category (text), weight_grams (int), image_url (text) // 3. stock_levels: id (uuid PK), item_id (uuid FK to items), location_id (uuid FK to locations), quantity (int), reserved (int DEFAULT 0), available (int GENERATED ALWAYS AS quantity - reserved STORED) // 4. transfers: id (uuid PK), from_location (uuid FK to locations), to_location (uuid FK to locations), status (text DEFAULT 'pending'), created_by (uuid FK to auth.users), created_at (timestamptz) // 5. transfer_items: id (uuid PK), transfer_id (uuid FK to transfers), item_id (uuid FK to items), quantity (int) // Add RLS policies and a unique constraint on (item_id, location_id) in stock_levels. // Generate SQL migration and TypeScript types. ``` > Pro tip: Use V0's prompt queuing — queue up to 10 prompts while the first one generates. Queue the schema prompt first, then the matrix view and transfer form next. **Expected result:** Supabase is connected, all five tables are created with the generated available column and proper foreign keys. ### 2. Build the cross-location stock matrix Create the main tracking page that shows a matrix of all items across all locations. Each row is an item, each column group is a location showing quantity, reserved, and available. Use a DataTable with location columns for a spreadsheet-like experience. ``` // Paste this prompt into V0's AI chat: // Create an inventory tracking page at app/tracking/page.tsx. // Requirements: // - Fetch all items with stock_levels joined by location // - Display as a shadcn/ui DataTable matrix: first columns are SKU, Item Name, Category // - Then for each location, show three sub-columns: Qty, Reserved, Available // - Color the Available cell: green if > 10, yellow if 1-10, red if 0 // - Add a Progress bar in each location column showing stock health (available / max quantity) // - Add a Command palette (Cmd+K) for fast item search by SKU or name // - Add filter Select dropdowns for category and location type // - Summary Cards at top: Total Items, Total Locations, Items Below Threshold, Pending Transfers ``` **Expected result:** The tracking page shows a matrix view with color-coded stock levels across all locations, a Command palette for search, and summary cards. ### 3. Create the transfer workflow with stepper UI Build a multi-step transfer form using a stepper pattern. Step 1: select source and destination locations. Step 2: search and add items with quantities. Step 3: review and confirm. The confirmation triggers an atomic operation that decrements source and increments destination. ``` // Paste this prompt into V0's AI chat: // Create a transfer workflow at app/tracking/transfers/new/page.tsx. // Requirements: // - Step 1: Select 'From Location' and 'To Location' using shadcn/ui Select dropdowns. Show location type Badge next to each option. // - Step 2: Search items with Command, add them to a transfer list with quantity Input for each. Show available stock at the source location next to each item. Validate quantity <= available. // - Step 3: Review summary in a Card showing all items, quantities, source, and destination. Confirm Button and Back Button. // - Use a Progress bar or step indicators showing Step 1/2/3. // - On confirm, POST to /api/transfers with the transfer data. // - Show a success Toast with the transfer ID and redirect to the transfers queue. ``` **Expected result:** A three-step transfer form guides users through selecting locations, adding items, and confirming. The transfer is created on submission. ### 4. Build the atomic transfer completion API Create the API route that completes a transfer by atomically decrementing stock at the source location and incrementing at the destination. This uses a Supabase RPC function with row-level locking to prevent race conditions. ``` import { createClient } from '@supabase/supabase-js' import { NextRequest, NextResponse } from 'next/server' const supabase = createClient( process.env.SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY! ) export async function POST( req: NextRequest, { params }: { params: Promise<{ id: string }> } ) { const { id } = await params const { data, error } = await supabase.rpc('complete_transfer', { p_transfer_id: id, }) if (error) { const status = error.message.includes('Insufficient') ? 409 : 500 return NextResponse.json({ error: error.message }, { status }) } return NextResponse.json({ success: true, data }) } ``` > Pro tip: Always use Supabase RPC for multi-table writes. The complete_transfer function decrements source, increments destination, and updates transfer status — all in one transaction. If source stock is insufficient, it rolls back everything. **Expected result:** Completing a transfer atomically moves stock between locations. If source stock is insufficient, the API returns a 409 Conflict error. ### 5. Add stock trend charts with Recharts Build an analytics section showing stock-over-time trends per item and location. Use Recharts AreaChart wrapped in a client component to display historical data with interactive tooltips. ``` 'use client' import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' interface StockDataPoint { date: string quantity: number reserved: number available: number } export function StockTrendChart({ data }: { data: StockDataPoint[] }) { return ( Stock Trend 7 Days 30 Days 90 Days ) } ``` **Expected result:** The analytics section shows interactive area charts with stock trends over time, with tabs for different time ranges. ### 6. Configure RLS policies and deploy Set up Row Level Security policies scoped to the organization to prevent cross-tenant data leaks. Then configure environment variables and publish to production. ``` -- Run this in Supabase SQL Editor -- Add organization_id to all tables for multi-tenant isolation ALTER TABLE locations ADD COLUMN org_id uuid NOT NULL; ALTER TABLE items ADD COLUMN org_id uuid NOT NULL; ALTER TABLE stock_levels ADD COLUMN org_id uuid NOT NULL; ALTER TABLE transfers ADD COLUMN org_id uuid NOT NULL; -- RLS policy: users can only access data in their organization CREATE POLICY "Users see own org locations" ON locations FOR SELECT USING ( org_id IN ( SELECT org_id FROM user_orgs WHERE user_id = auth.uid() ) ); CREATE POLICY "Users see own org items" ON items FOR SELECT USING ( org_id IN ( SELECT org_id FROM user_orgs WHERE user_id = auth.uid() ) ); ``` **Expected result:** RLS policies are active. Users can only see inventory data belonging to their organization. The app is published to Vercel. ## Complete code example File: `app/api/transfers/[id]/complete/route.ts` ```typescript import { createClient } from '@supabase/supabase-js' import { NextRequest, NextResponse } from 'next/server' const supabase = createClient( process.env.SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY! ) export async function POST( req: NextRequest, { params }: { params: Promise<{ id: string }> } ) { const { id } = await params // Verify transfer exists and is pending const { data: transfer, error: fetchError } = await supabase .from('transfers') .select('*, transfer_items(*, items(name, sku))') .eq('id', id) .eq('status', 'pending') .single() if (fetchError || !transfer) { return NextResponse.json( { error: 'Transfer not found or already completed' }, { status: 404 } ) } // Execute atomic transfer via RPC const { data, error } = await supabase.rpc('complete_transfer', { p_transfer_id: id, }) if (error) { const status = error.message.includes('Insufficient') ? 409 : 500 return NextResponse.json({ error: error.message }, { status }) } return NextResponse.json({ success: true, transfer_id: id, items_transferred: transfer.transfer_items.length, }) } export async function GET( req: NextRequest, { params }: { params: Promise<{ id: string }> } ) { const { id } = await params const { data, error } = await supabase .from('transfers') .select(` *, from_loc:locations!from_location(name, type), to_loc:locations!to_location(name, type), transfer_items(*, items(name, sku)) `) .eq('id', id) .single() if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ data }) } ``` ## Common mistakes - **Not using PostgreSQL generated columns for computed fields like available quantity** — Calculating available (quantity - reserved) in application code means every query needs to do the math, and concurrent updates can show stale values. Fix: Use a PostgreSQL GENERATED ALWAYS AS column: available int GENERATED ALWAYS AS (quantity - reserved) STORED. The database keeps it in sync automatically. - **Running transfer operations as two separate UPDATE queries** — If the source decrement succeeds but the destination increment fails, stock disappears. Concurrent transfers can also create negative balances. Fix: Use a Supabase RPC function that performs both operations in a single transaction with FOR UPDATE row locking. If any step fails, everything rolls back. - **Using NEXT_PUBLIC_ prefix for SUPABASE_SERVICE_ROLE_KEY** — The service role key bypasses all RLS policies. Exposing it in the browser means any user can access all organizations' inventory data. Fix: Store SUPABASE_SERVICE_ROLE_KEY in V0's Vars tab without any prefix. Use it only in API routes. Use NEXT_PUBLIC_SUPABASE_ANON_KEY for client-side queries protected by RLS. - **Forgetting to add organization-scoped RLS policies** — Without org-scoped RLS, users from one company can see and modify another company's inventory data through the Supabase client. Fix: Add an org_id column to every table and create RLS policies that check the user's organization membership before allowing any read or write operation. ## Best practices - Use PostgreSQL generated columns for computed values like available stock — the database handles consistency automatically - Scope all RLS policies to organization_id to ensure multi-tenant data isolation from day one - Use V0's prompt queuing to build the matrix view, transfer form, and analytics chart in sequence without waiting between prompts - Wrap Recharts components in 'use client' components and load them with next/dynamic if they are heavy — Server Components handle the data fetching - Use Supavisor connection pooling string from the Supabase dashboard for all serverless API routes to avoid connection exhaustion - Add a unique constraint on (item_id, location_id) in stock_levels to prevent duplicate rows and ensure upserts work correctly - Use V0's Design Mode (Option+D) to adjust the stock matrix column widths and chart colors without spending credits - Store transfer history with full item details (not just IDs) so the audit trail is readable even if items are later deleted ## Frequently asked questions ### How does the platform handle stock transfers between locations? Transfers use a three-step workflow: select source and destination, add items with quantities, then confirm. On confirmation, a Supabase RPC function atomically decrements stock at the source and increments at the destination in a single transaction. If source stock is insufficient, the entire operation rolls back. ### What is a PostgreSQL generated column and why use it? A generated column is computed automatically by the database from other columns. The available column (quantity - reserved) updates instantly whenever quantity or reserved changes. This is more reliable than calculating it in your app code because the database guarantees consistency. ### Can I track stock across different types of locations like warehouses and Amazon FBA? Yes. The locations table has a type field (warehouse, retail, fulfillment) that lets you categorize each location. The stock matrix displays all location types with their quantities, and you can filter by type to focus on specific channels. ### Do I need a paid V0 plan? Premium ($20/month) is recommended. The tracking platform has multiple complex pages (matrix view, transfer workflow, analytics), and you will benefit from V0's prompt queuing to build them in sequence. The free tier's limited credits may not be enough. ### How do I prevent users from one company seeing another company's data? Add an org_id column to every table and create Supabase Row Level Security policies that check the user's organization membership. The anon key with RLS ensures that queries automatically filter to the user's organization. ### How do I deploy the tracking platform? Click Share in V0, then Publish to Production. Your app deploys to Vercel in 30-60 seconds. For team collaboration, use the Git panel to connect to GitHub — V0 creates a branch, and your team reviews the PR before merging to main. ### Can RapidDev help build a custom inventory tracking platform? Yes. RapidDev has built over 600 apps including multi-location inventory systems with barcode scanning, demand forecasting, and ERP integrations. Book a free consultation to scope your project and get a production-ready platform. --- Source: https://www.rapidevelopers.com/how-to-build-v0/inventory-tracking-platform © RapidDev — https://www.rapidevelopers.com/how-to-build-v0/inventory-tracking-platform