Meniola.ro

In today’s fast-paced dining and local commerce ecosystem, businesses need a direct, friction-free channel to showcase products and communicate with customers. Meniola provides a zero-friction storefront where guests scan a QR code or visit a direct link to browse a visually rich digital menu/catalog, customize their choices (allergens, variants, diet preferences), and submit their orders directly to the owner’s WhatsApp.

Designed for scalability, the platform serves:
– Restaurants, Cafes, and Bars: Interactive menus with dynamic opening hours, variations, and active delivery/pickup flows.
– Local Food Producers & Handmade Creators: Product catalogs that enable local builders, artisans, and makers to showcase their craft directly to clients.

For owners, Meniola provides a comprehensive control panel to manage products, categories, visual identity, delivery settings, and billing subscriptions.

Meniola is built with a cutting-edge, type-safe, and highly performant architecture:
– Frontend Framework: Next.js 16 (React 19, App Router) using Server Components for SEO and Client Components for dynamic interactivity.
– Database & Backend: Supabase (PostgreSQL, Storage, and GoTrue Auth) accessed via @supabase/ssr to guarantee server-side session persistence.
– Styling & UI: Tailwind CSS v4 paired with Shadcn/ui and Framer Motion for responsive layouts and premium micro-interactions.
– Offline Support: Offline capability and caching powered by Serwist PWA integration.
– State Management: Zustand (handling shopping cart state and local product synchronization).
– Data Validation: Zod schemas shared between client forms (React Hook Form) and Supabase Server Actions.
– Deployment Infrastructure: The dynamic Next.js application is hosted on a custom VPS for maximum control, low latency, and high performance. The marketing site and static pages run on Hostinger, separating CMS resources from core app hosting.
– Code Quality & Tooling: TypeScript (strict mode) with database types generated directly from migrations, and Biome for lightning-fast formatting and linting.

To deliver maximum flexibility, Meniola separates the application logic from the marketing site using a hybrid architecture:
– Next.js Rewrites: Static marketing pages (/), about us (/despre-noi), contact (/contact), and legal pages (privacy, cookies, terms) are proxied directly from the Next.js app on the VPS to the WordPress instance hosted on Hostinger (home.meniola.ro).
– Asset Proxying: All WordPress resources (/wp-content/*, /wp-includes/*) and sitemaps are seamlessly proxied through Next.js rewrites, keeping the visitor on the primary meniola.ro domain. This approach leverages WordPress for content creation and SEO, while Next.js handles the complex ordering and admin logic.

1. Unified Tracking & Shared Cookie Consent Across Proxy boundaries
– The Challenge: Since marketing pages are served from WordPress and app pages from Next.js, traditional client-side cookies led to disconnected visitor sessions and analytics mismatch.
– The Solution: Implemented a unified router proxy (src/proxy.ts) in Next.js middleware that intercepts all traffic (including proxied WordPress paths). The proxy checks for visitor consent, automatically provisions a UUID (VISITOR_ID_KEY) if consent is granted, and passes it downstream via the X-Visitor-Id header. The cookie consent banner state is kept in sync on both environments via client-side scripts.

2. Complex Subscription Lifecycles (Stripe Billing)
– The Challenge: Subscriptions require flexible handling: upgrading plans should charge immediately with prorated invoices, whereas downgrading or cancelling should only take effect at the end of the billing period while letting the customer cancel the pending downgrade at any time.
– The Solution: Integrated a dual-state billing mechanism: Prorated Upgrades: Modifies the Stripe subscription item with proration_behavior: 'always_invoice' to bill differences instantly.
Deferred Downgrades: Schedules price changes on Stripe to take effect at current_period_end. Stores pending_plan and cancel_at_period_end in the database, allowing users to revert pending changes via a “Anulează modificarea” action. The app transitions the actual database role only after the webhook receives the period rollover.

3. Bulletproof Opening Hours Engine (Client-Server Time Sync)
– The Challenge: Client-side system clocks are notoriously unreliable due to user timezone settings or system drift. Relying on them to determine if a restaurant is open can lead to invalid order attempts.
– The Solution: Hydrated the application shell with a highly accurate server-side timestamp (Date.now()) passed down through the React Context layout. An active clock offset calculates the current Romanian timezone time (ro-RO), matching the restaurant’s opening hour config in real time without client-side clock dependencies.

4. High-Fidelity QR Flyer Generator
– The Challenge: Business owners need to print physical flyers featuring their QR codes. The flyers need custom styling matching their brand colors.
– The Solution: Built a canvas-based design generator using jspdf and qrcode supporting multiple layout presets (Light, Dark, and Deluxe Brand). Deluxe templates dynamically overlay grid patterns, render custom branding banners, and display business hours parsed directly from the database schema.

– Zero Commission Ordering: Businesses retain 100% of their order revenue by bypassing delivery portal aggregators.
– Zero-Friction Checkout: No download is required; customers scan a QR code, build their order in a native-feeling PWA, and hit send.
– Consolidated Dashboard: Manage branding, menus, variants, order configurations, opening schedules, and Stripe subscriptions from a unified panel.
– Optimized Image Delivery: Automatic client-side image compression (browser-image-compression) before uploading to Supabase Storage, and CDNs cached with timestamped prefixes to prevent stale asset display.