Piqniq Catering
A warm corporate catering site for quick, confident ordering without losing the craft of the brand.
PiQNiQ by La Chouquette is a corporate catering brand from an established French bakery group in Greater Manchester. The site is built for office managers and executive assistants ordering for meetings, client lunches and working events, where presentation and timing are part of the decision.
Corporate catering is a practical purchase with a reputational edge. The buyer needs the food to arrive well, look right and account for dietary needs without creating more admin. The site had to make confidence feel immediate, then keep the order flow calm.
Olive, cream and charcoal create a restrained hospitality palette. Olive carries provenance; cream keeps the experience soft and human; charcoal gives the interface enough structure. Cormorant Garamond handles display moments, while Inter keeps menus, forms and checkout legible.
Refined
Cormorant Garamond - DisplayCorporate Catering, Elevated
Inter - Body & UIThe ordering journey introduces complexity gradually. A four-step overview sets expectations before browsing begins. Categories follow how buyers plan an event, not how a catalogue is stored. Allergen, invoice and VAT details are placed where business buyers need them.
Built with React, TypeScript and Supabase. Product options, allergens, order flow and kitchen/admin views are handled from the same data model, with confirmation emails and image storage managed through platform services.
Admin Panel
Operations hub for orders, menus, and kitchen fulfilment
The PiQNiQ admin panel is a self-contained operations hub behind /admin - same codebase as the public site, but a separate application shell with a different mental model. Where the public site optimises for conversion and trust, the admin panel optimises for throughput and error prevention. It is currently running in demo mode with realistic mock data representing Manchester corporate clients, so the full feature set can be explored without Supabase credentials or login.
A small catering business needs to manage orders, menus, allergens, and media without enterprise software overhead. An office manager placing an order needs elegance; the kitchen manager fulfilling it needs clarity, speed, and guardrails. The panel had to be demonstrable for portfolio and stakeholder previews, yet deployable to production with auth, RLS, and role gates - all from a single boolean toggle.
The admin shell uses a grey utilitarian layout with a sticky white navigation bar - deliberately distinct from the cream-and-charcoal brand experience. Operators should never confuse admin mode with the public site. Olive is the only shared token. A consistent status colour system runs across dashboard and orders: pending yellow, confirmed green, completed blue, cancelled red. A persistent amber Demo Mode badge signals that preview data is local and ephemeral.
Eight self-contained routes cover the full operational loop: dashboard KPIs, order lifecycle with three-step delete confirmation, menu item CRUD with allergen multi-select, category and allergen registries, image library with copy-to-clipboard workflow, and super-admin user management. Orders link out to a kitchen display view for chef-facing fulfilment. Mobile navigation collapses to a hamburger below md - catering managers often check orders on a phone between deliveries.
Dashboard
Operational snapshot with KPI cards for total orders, pending count, revenue, and active menu items. Recent orders and upcoming events panels surface the morning's priorities without analytics charts.
Orders
Full lifecycle management with search, status tabs, expandable order cards, and a pending to confirmed to completed workflow. Delete requires three-step confirmation including typing the exact order number.
Menu Items
Category-tabbed CRUD with dietary badges, allergen counts, availability toggles, and size variant support. AllergenSelector multi-select links to the central allergen registry.
Categories
Organise checkout browsing groups with slug, display order, active toggle, and seasonal flags. Delete warns that items in the category will be affected.
Allergens
Central registry of 19 UK food-labelling allergens used across menu items, the public allergen page, and kitchen print tickets - one source of truth for consistent labelling.
Images
Media library with multi-file upload, search, bulk delete, and copy URL workflow. Admin uploads here, then pastes the URL into menu item fields - decoupled by design.
Users
Super-admin-only provisioning with role badges, inline edit, password reset, and a guard preventing deletion of the last super_admin account.
Kitchen View
Chef-facing display at /kitchen with print tickets and countdown timers. Accessible via shared password or kitchen_staff role for agency staff without accounts.
React SPA with a demo/production data layer swap: mockAdminApi serves an in-memory store in demo mode, while production queries Supabase directly via the anon client with RLS enforcing write access. Three roles - super_admin, admin, kitchen_staff - gate routes via ProtectedRoute and admin_users lookup. No API layer, no real-time subscriptions; order volume does not justify WebSocket overhead.
Built across breakpoints.
Visual system
Olive gives the brand a quieter catering language than the usual white-and-green defaults
Cream backgrounds keep the interface warm without making it decorative
Cormorant Garamond adds a French bakery note while Inter keeps ordering clear
Soft corners make the buying flow feel approachable and food-led
Live Website
piqniqcatering.co.uk
Next Project
Maestro Detailing
Premium Car Detailing Website