Skip to main content
2026

E-commerce storefront and admin

Next.js
React 19
Supabase
PostgreSQL
Row Level Security
next-intl
Mercado Pago
TanStack Query
Tailwind CSS
TypeScript

Description

A storefront and a back office for a clothing shop: catalogue with filters, cart, Mercado Pago checkout with card and PIX, and an admin for products, variants, promotions and banners. Published as a live demo, in Portuguese and English.

Features

  • Catalogue with filters by collection, category, size and colour, with pagination kept in the URL
  • Cart and checkout through Mercado Pago, card and PIX, polling the order until the payment settles
  • Admin for products, variants, stock, promotions, banners and which home sections are visible
  • Portuguese and English with the locale in the URL, including the catalogue content stored in the database
  • Row Level Security on carts, orders and payments, so a signed-in customer only reads their own rows

Challenges

  • Rebuilding the schema after the original database was gone: the migrations in the repository created 3 of the 14 tables, and the rest had to be read out of the generated types file of an older version of the project
  • Partial Prerendering was falling back to client rendering on every page, because a single Suspense boundary at the root turned the whole tree into one resumable hole
  • Caching the public catalogue without the request cookie, so those queries stop counting as request data

Learnings

  • That a 200 from curl does not prove a page works: with streaming the first HTML is a skeleton, and the broken links only showed up in the browser console
  • That a generated types file is a usable backup of a schema when the migrations are incomplete
  • Where Cache Components pays off, and where it only gets in the way