Coșul Local App
Marketplace Delivery PWA
Coșul Local is an offline-ready Progressive Web Application (PWA) connecting Romanian consumers directly with regional food producers. It streamlines local food hubs supply chains by offering a high-performance marketplace interface, dynamic client order tracking, and delivery log management.
Source: Lighthouse, production.
infoConsumer Dashboard
Main workspace greeting users, displaying key statistics cards (pending, confirmed, delivered orders) and order list filters.
Challenge, ownership, decisions, result
Local food producers needed ordering, live tracking and delivery management, for customers who shop from a phone on a weak rural connection — without the cost of a marketplace platform.
- The whole frontend: marketplace, cart, checkout, order tracking and the delivery log views.
- Data access through Supabase SSR, including session handling on the server.
- Offline behaviour and the PWA layer.
- Performance budget and the Core Web Vitals the app is held to.
- check_smallLive at cosul-local.ro, used by real producers and customers.
- check_smallLighthouse 98 performance / 100 accessibility / 100 best practices / 100 SEO, with 0.8s LCP and 45ms INP.
- check_smallShopping keeps working through a dropped connection instead of losing the basket.
Treat the cart as local state that survives the network
The cart lives in a Zustand store synchronized to localStorage rather than on the server. A customer who loses signal mid-shop keeps their basket, and the server only sees it at checkout.
Render on the server by default, hydrate only what interacts
Catalog and product pages are server-rendered through the Supabase SSR client with cookie-based session verification; only the cart and filters ship as client components. That is where the 0.8s LCP comes from.
Validate at the boundary with Zod
Every user-supplied payload passes a strict schema before it reaches Supabase, so a bad form submission fails as a readable error instead of as corrupted order data.
One codebase for customers and drivers
Driver routing and delivery logs reuse the same components and data layer as the customer portal, scoped by role, instead of a second application to keep in sync.
Key Capabilities & Features
Coșul Local integrates client-server synchronization, offline cart storage, and responsive views to deliver a unified local food hub app.
Consumer Statistics Overview
Responsive welcome headers displaying 4 themed cards representing total, pending, confirmed, and delivered order counts mapped instantly to database states.
Interactive Order Filters
Client-side filter toggles allowing users to instantly group orders by status (All, Pending, Confirmed, Delivered, Cancelled) with live indicators showing order counts per status.
Zustand Offline-Ready Cart
A light weight state store managing product quantities and delivery schedules locally, ensuring users don't lose their cart items when moving offline.
Dual Roles Management
Decoupled authenticated workspaces separating Consumer profiles from Producer inventory managers, featuring custom theme templates and tailored actions.
Technical Architecture
Coșul Local leverages Next.js 16 App Router along with Server Actions to manage server mutations securely. Database tables are hosted in a localized Supabase server (run via Docker locally) using auto-generated TypeScript schemas.
devicesFrontend Layer
- • App Router Layouts: Nested routes dynamically differentiating public `/piata` catalog from `(dashboard)/consumer` profiles.
- • Zustand store: Manages shopping cart updates and synchronizes with localStorage.
- • shadcn/ui & Tailwind: Modular design tokens ensuring quick style changes and mobile-first responsiveness.
boltServer Logic (Actions)
- • Secure Server Actions: Functions executing database writes (e.g. `consumer-orders.ts` or profile updates) with integrated validation.
- • Path Revalidations: Triggers Next.js `revalidatePath` on order submission/cancellation to ensure instant client sync.
- • Zod Validation: Strict schemas validating user settings and category updates.
cloud_queueSupabase Backend
- • Supabase SSR client: Manages cookie-based session verification for server-side fetches.
- • PostgreSQL Database: Hosts relational tables (profiles, products, orders, delivery_locations).
- • Supabase Storage: Buckets housing uploaded farm product images securely.
Project Screen Library
Click on any of the screenshots below to open them in the lightbox viewer.
