Technical Documentation

Under the Hood

A deep dive into the architecture, tools, and design decisions behind MunchCoach.

Architecture Overview

MunchCoach follows a modern three-tier architecture with clear separation of concerns.

Client

Nuxt 4 / Vue 3 SPA with server-side rendering, TailwindCSS, Pinia stores, and i18n

Server

Nitro server engine with API routes, Cerebras AI integration, and SSE streaming

Database

Supabase with PostgreSQL, Row Level Security, RPC functions, and Discord OAuth

Cerebras AI

LLM inference API for the AI recipe chat with tool-calling capabilities

Technology Stack

Every technology was chosen for a specific reason — here is why.

TypeScript / JavaScript

Core language for the entire stack

Nuxt 4 / Vue 3

Full-stack Vue framework

TailwindCSS 4

Utility-first CSS framework

Supabase

Open-source backend-as-a-service

Pinia

State management for Vue

Cerebras Cloud SDK

AI inference for the recipe chat

VueUse

Composition API utility collection

NuxtWind

Pre-built Tailwind components

Vercel

Serverless deployment platform

Cloudflare

DNS and edge network

AI Chat Workflow

How MunchCoach turns a user message into a personalised recipe response.

  1. 1User sends a message from the chat interface
  2. 2Nitro API endpoint receives the request and authenticates the user
  3. 3Cerebras LLM (gpt-oss-120b) processes the message with system context
  4. 4LLM decides which tools to call (e.g. search pantry, find recipes)
  5. 5Server executes Supabase RPC functions for each tool call
  6. 6Tool results are fed back to the LLM for the next iteration
  7. 7LLM generates the final response
  8. 8Response is streamed to the client via Server-Sent Events (SSE)

Available AI Tools

Retrieve the user's pantry inventory
Search the ingredient database
Fetch the user's shopping lists
Search recipes with optional ingredient filters
Search product catalogue by ingredient
Add a new item to the user's pantry
Remove one or more items from the user's pantry
Retrieve available measurement units
Create a new shopping list
Add an item to a shopping list
Remove one or more items from a shopping list
Find recipes cookable with current pantry items

Data Security & RPC Architecture

How user data is protected at every layer.

Row Level Security (RLS)

Every table in the Supabase database is protected by Row Level Security policies. These policies ensure that each user can only read and modify their own data — enforced directly at the PostgreSQL level. Even if front-end or API code were compromised, the database itself would prevent unauthorised access to other users' data.

RPC-Only AI Tools

All 12 AI chat tools execute Supabase RPC functions rather than performing data logic in the Node.js backend. This means complex queries — such as matching pantry items against recipe requirements — run inside PostgreSQL, directly next to the data. The result is significantly lower latency and reduced data transfer compared to fetching raw data into the server. Additionally, RPC functions enforce their own access rules within the database, adding another layer of security.

Deployment & Hosting

How MunchCoach gets from code to production.

Developer pushes code to the GitHub repository

Vercel automatically triggers a build from the main branch

The Nuxt application is deployed as a serverless function on Vercel's edge network

Cloudflare manages DNS routing and provides CDN caching, SSL, and DDoS protection

Users access the application through the custom domain