Product Studio

A Next.js 13 (App Router) dashboard for managing products — create, update, and delete — backed by a separate FastAPI products API.

Tech Stack

• Next.js 13 (App Router) + React 18
• TypeScript
• lucide-react icons
• FastAPI backend (external service, not included in this repo)

Architecture

The app itself holds no product data — it's a thin UI layer over a FastAPI service:

Browser → Next.js route handlers (app/api/products) → FastAPI backend (PRODUCTS_API_URL)

Route handlers in app/api/products proxy requests to the backend and are implemented in src/features/products/server/products-api.ts. The dashboard UI lives under src/features/products.

Getting Started

Prerequisites

• Node.js 18+
• A running instance of the FastAPI products API (exposing GET/POST /products and GET/PUT/DELETE /products/{id})

Installation

npm install

Configuration

Copy the example environment file and point it at your FastAPI backend:

cp .env.local.example .env.local

Variable	Description	Default
PRODUCTS_API_URL	Base URL of the FastAPI products service	http://127.0.0.1:8000

Development

npm run dev

Open http://localhost:3000 to view the dashboard.

Production build

npm run build
npm start

Linting

npm run lint

Project Structure

app/
  layout.tsx                # Root layout
  page.tsx                  # Products page entry point
  api/products/             # Route handlers proxying to the FastAPI backend
src/
  config/env.ts             # Server-side environment config
  lib/                      # Shared HTTP helpers and formatters
  components/ui/            # Reusable UI primitives
  features/products/
    components/              # Dashboard UI (hero, table, form, stats, dialogs)
    hooks/                    # use-product-manager state hook
    api/                      # Client-side API wrapper
    server/                   # Server-side proxy to the FastAPI backend
    types.ts                  # Shared Product types

License

ISC