SOFTAPEAL Catalog (Next.js)

A lightweight product catalog: browse by category, view a product page, and manage inventory from a hidden, password-gated /admin page.

Why this is lightweight

• Only 3 real dependencies: next, react, react-dom (plus Tailwind at build time).
• No database, no icon library, no font imports — system fonts + Tailwind utility classes only.
• No client-side state library — just React's built-in useState/useEffect.
• Catalog data lives in localStorage in the browser (see note on scaling below).

Getting started

npm install
npm run dev

Visit http://localhost:3000 for the shop, and http://localhost:3000/admin for the admin panel. Default password is velours2026 — change ADMIN_PASSWORD in lib/catalog.js before you deploy this anywhere real.

Deploying

This is a standard Next.js app — it deploys as-is to Vercel (vercel deploy) or Netlify with the Next.js build plugin. No environment variables are required for the base version.

Current limitation: storage is per-browser

Right now, product data (including admin edits) is saved to the visitor's own localStorage. That means:

• Changes an admin makes are only visible on the device/browser they used.
• Customers on other devices won't see those changes.

This is fine for a prototype, but for a real storefront you'll want the catalog in a real database (e.g. Postgres via Supabase or Neon, or Vercel Postgres), with the admin page writing to it through a small API route instead of localStorage. Happy to wire that up when you're ready — it's a moderate step up, not a rewrite.

Recommended ways to store product images

Right now the admin form takes a plain image URL. For real product photos, you need them hosted somewhere fast and reliable rather than pasted as local file paths. A few solid, low-effort options, roughly ordered by how little setup they need:

1. Cloudinary (easiest to start) Free tier, drag-and-drop or API upload, automatic resizing/compression via URL parameters (great for thumbnails vs. full-size product photos). Good first choice if you want to be live today.

2. Vercel Blob If you're deploying on Vercel anyway, this is the most native option — a few lines of code to upload from your admin form directly to Blob storage, and it returns a CDN URL you drop straight into the product's img field.

3. Supabase Storage Worth it if you're also planning to move the catalog itself into a Supabase Postgres database (see storage note above) — you'd get storage and database in the same dashboard, with built-in access rules.

4. UploadThing Purpose-built for exactly this: a small file-upload widget for Next.js apps, free tier, minimal config, returns a hosted URL. Good middle ground between Cloudinary and rolling your own.

5. AWS S3 + CloudFront Most scalable and cheapest at high volume, but more setup (bucket policies, CDN distribution, signed upload URLs). Worth it once you're past prototype stage and have real traffic/cost considerations.

For a boutique catalog like this, Cloudinary or Vercel Blob will get you the most functionality for the least setup time. Either way, once images are hosted, admin just pastes the resulting URL into the "Image URL" field already built into /admin — no code changes needed.

Project structure

app/
  page.js               shop homepage
  product/[id]/page.js  product detail page
  admin/page.js         password-gated admin CRUD
  layout.js             root layout
  globals.css           Tailwind entrypoint
components/
  SiteHeader.jsx
  SiteFooter.jsx
lib/
  catalog.js             seed data + storage helpers + price formatting