Laticínios Popoio

Context

Laticínios Popoio is a traditional delicatessen in Mooca, São Paulo, with more than 40 years of history. The site presents the shop, shows the catalog and takes orders through WhatsApp, which was already the customers' service channel. The shop also has an admin panel to maintain the catalog.

The challenge

The shop sells by weight (300 g of cheese, for instance) and by unit, and serves customers on WhatsApp, with no online payment. The site had to price an order correctly in both modes, build a complete, tamper-proof order message, and give the shop a safe way to update products, prices and photos without touching code.

What was built

• A cart persisted in the browser (Zustand) with two selling modes: by weight, with options from 100 g to 1 kg and a custom amount in grams or kilograms with a proportional price per kilo; and by unit.
• WhatsApp checkout: builds the message with items, subtotal, shipping, customer details, delivery or pickup, payment method and change. The total is recalculated from the catalog prices, not from the cart saved in the browser, so a hand-edited cart cannot change the order value.
• Delivery with shipping rules (flat fee, free shipping above a threshold and a minimum order) and address lookup by postal code, through its own route that queries ViaCEP and caches the result.
• Product details: ingredients, allergens, storage and a nutrition table in the ANVISA format, with barcode-assisted filling that queries Open Food Facts through a protected route.
• Admin panel with login (Supabase Auth): a dashboard that highlights products needing attention, product and category management, and photo upload that is downscaled and converted to WebP in the browser before it goes to Supabase Storage.
• A Postgres catalog with Next.js caching and tag-based revalidation, so an edit in the panel shows up in the storefront without a new deploy. There is also a secret-protected endpoint to clear the cache after changes made directly in the database.
• Local SEO and institutional pages: sitemap, robots, schema.org structured data of type GroceryStore (address, coordinates and opening hours), an open-or-closed indicator, and About, FAQ, Delivery time, Returns and Privacy pages.
• Security: a restrictive Content Security Policy, HSTS, iframe blocking and Permissions-Policy. In the panel actions the session is verified on the server on every call, not only on the screen redirect.

Highlight: Admin panel with Supabase Auth · cache with on-demand revalidation · local SEO (schema.org)

Technologies and the role of each

Next.js

App Router with static pages, admin Server Actions and API routes for postal code, barcode and revalidation.

Supabase

Postgres for products and categories, Auth for the panel and Storage for the photos, with @supabase/ssr.

Zustand

Cart state, persisted in localStorage.

Tailwind CSS

Storefront and panel UI, with shadcn/ui components on top of Base UI.

Framer Motion

Storefront micro-interactions.