Bite and Swipe Serverless Match App

Serverless web and mobile app for swiping meal matches with onboarding, accessibility toggles, recipe filtering, and nea...

23 views

Viewed 23 times

Create a free account to remix this architecture

Bite and Swipe Serverless Match App

Serverless web and mobile app for swiping meal matches with onboarding, accessibility toggles, recipe filtering, and nearby takeout discovery. Matches and preferences are saved via Supabase.

AWS

Architecture Description

Build a clean, modern, professional serverless architecture diagram for "Bite and Swipe" — a fun Tinder-style web and mobile app where users swipe right on their next meal (Take Out or Cook Your Match modes) with a romantic, flirty aesthetic. Frontend: - Next.js 15/16 App Router deployed on Vercel - Tailwind CSS + shadcn/ui + Framer Motion for smooth swipe animations and match celebrations - Client-side accessibility: Color-blind friendly palette toggle (adds .cb-friendly class to <html> with deuteranopia-safe colors using blues/oranges/yellows and higher contrast, persisted in localStorage) - Reduce Motion toggle (disables animations and respects prefers-reduced-motion) - Re-take Goals Quiz link in Settings that routes to /onboarding with pre-filled data from Supabase/localStorage Backend & Data: - Supabase for Authentication, PostgreSQL database (users, dietary restrictions, health goals/GLP-1 preferences, saved matches) - Supabase Edge Functions to securely call and filter recipes from TheMealDB and Edamam APIs based on user preferences Data Flow: - Onboarding quiz saves goals and restrictions to Supabase - Swipe experience fetches small batches client-side for fast feel - Take Out mode uses browser geolocation + shows nearby options with deep links to Uber Eats / DoorDash, restaurant details, distance, and open/closed status - Cook Your Match uses Edge Function for recipe data - Right swipe triggers "It's a Match!" animation with unique flirty food message and saves match to Supabase - Matches page displays grid with filters (ingredients, calories, health benefits) Non-Negotiable Constraints (strictly follow these): - Hackathon scope only: simple, lightweight, fully buildable in 1-2 days using free tiers exclusively. - No paid services, no complex compute, no heavy ML or extra servers. - Everything must stay serverless. - Diagram must be clean, readable, with clear labels, standard cloud icons, and visible data flow arrows (onboarding → swipe → match saving → API calls → display). - Show how client-side toggles (color-blind and reduce-motion) integrate with localStorage. Make the diagram look modern, scalable, and judge-friendly for a hackathon demo. Use soft romantic styling in the labels if possible while keeping it professional.

Community Discussion(1)

Kevin Brown

Suggestion

23 days ago

The mobile and web version is good. Post hackathon extend it to be agentic, if not enough time to do during hackathon. Web then calls the bite swipe agent. https://www.canvascloud.ai/gallery/brooklyn-hackathon-2026-bite-swiped-ai Thanks, Kevin

AI Analysis(1)

AI Review

Tradeoff

24 days ago

I think the biggest issue is that the diagram mixes a “fully serverless, free-tier, 1–2 day hackathon” story with AWS network infrastructure that adds cost and complexity without clear value. The NAT Gateway alone breaks the free-tier constraint and likely drives much of the $32.

Katera McKay

@kaytra_kat

Hackathon

View portfolio

Try it in the Playground

Open an interactive version — fork it, generate AI variants, or share it with your team.

Open Playground