Storyboard for Food Node
Categories: StoryboardStoryboard and ideas for Syntax Terror's Food Module
<!doctype html>
Food Module — Road-Trip Quest
A progressive, gamified learning segment using a coastal road-trip (San Diego → Los Angeles → San Francisco → Seattle) to teach relational database fundamentals through food-themed pitstop tasks.
🍽️ Regional Food Specialties
🌮 SD
- • Fish Tacos (Baja-style)
- • California Burrito
- • Carne Asada Fries
- • Acai Bowls
- • Baja Bowl 🥗
- • Baja Seafood
🌯 LA
- • Korean BBQ
- • Street Tacos (al pastor)
- • In-N-Out Burger
- • Avocado Toast
- • Ramen & Fusion Dishes
- • Food Trucks 🚚
🥖 SF
- • Clam Chowder in Sourdough Bread Bowl
- • Mission Burrito
- • Dungeness Crab
- • Ghirardelli Chocolate
- • Cioppino
- • Gourmet dishes 🍽️
🐟 SEA
- • Fresh Salmon
- • Pike Place Market Chowder
- • Dungeness Crab
- • Coffee Culture ☕
- • Oysters & Shellfish
- • Clam Chowder in a Sourdough Bread Bowl 🥖🐚
🎯 Learning Objectives
-
✅
Understand and implement basic CRUD operations against a relational database.
-
✅
Design a normalized schema for a food-related domain (dishes, ingredients, join tables).
-
✅
Write parameterized queries and avoid SQL injection.
-
✅
Use transactions to maintain consistency across multi-table updates.
-
✅
Build and consume RESTful endpoints for create/read/update/delete operations.
-
✅
Implement client-side UX for creating, editing, and archiving records with accessibility in mind.
-
✅
Demonstrate soft-delete vs hard-delete and archival strategies.
-
✅
Interpret aggregated results using GROUP BY, COUNT, SUM and simple analytics queries.
-
✅
Apply basic indexing and measure performance differences for common queries.
San Diego — Build the Baja Bowl — SD
CREATE: INSERT & Client Form
Introductory pitstop where learners create their first dish (Baja Bowl) by adding dishes, ingredients, and join records. Focus on form validation, required fields, and POST endpoints.
Key learning points
- Design dish creation form (name, category, ingredients list, calories, photo upload).
- Create dish, ingredient, and dish_ingredients records atomically.
- Client-side validation and server-side request validation.
- Seeded examples: Fish Tacos, California Burrito, Baja Bowl.
Tasks
- Create Dish form: name, category, ingredients (name, qty, unit), calories, photo
- POST /api/dishes to create dish + dish_ingredients
- Unit test: POST /api/dishes returns 201 and created resource
- UI: show toast 'Baja Bowl added — +50 XP'
- Seed at least three dishes for SD
Los Angeles — Food Truck Tasting — LA
READ: SELECT, Filtering & Index Basics
Search and filter pitstop. Learners implement list and detail views, paginated queries, and basic full-text search. Demonstrates the value of indices and query examples in a Dev Console.
Key learning points
- Implement GET /api/dishes with filters: city, ingredient, min_cal, pagination.
- Show example SQL and safe parameterization.
- Add index on ingredient.name (demo indexed field).
- Seeded examples: Korean BBQ, Street Tacos, Food Truck specials.
Tasks
- List & detail views with pagination and filters
- Dev Console: show safe sample SQL queries
- Measure (simulated) index performance for ingredient searches
- Student writes a query to find dishes containing 'halibut'
- Seed at least three dishes for LA
San Francisco — Gourmet Pop-Up — SF
UPDATE: Transactions, Concurrency & Rollback
Advanced pitstop focused on multi-table updates wrapped in transactions. Learners preview diffs, simulate concurrent edits, and implement optimistic locking and rollback behavior.
Key learning points
- Wrap multi-table updates (dish + dish_ingredients) in transactions.
- Implement optimistic locking (versioning) and conflict resolution UI.
- Provide a 'Preview Changes' modal showing diffs before commit.
- Simulate concurrent edits and demonstrate rollback.
Tasks
- Edit dish UI: change ingredient quantities, swap ingredients, rename dish
- PUT /api/dishes/:id with transaction semantics
- PATCH /api/dishes/:id for partial updates
- Simulate conflicting updates and show conflict modal
- Unit/integration test for transaction rollback
Seattle — Sustainable Cleanup & Analytics — SEA
DELETE: Soft Delete, Hard Delete, Joins & Aggregation
Final pitstop where learners archive or delete dishes (clam chowder centerpiece). Focus on soft-delete patterns, cascading hard deletes, archival strategies, and analytics queries for reporting.
Key learning points
- Implement deleted_at soft-delete column and archive toggle in UI.
- Hard delete with cascading rules to remove dish_ingredients links.
- Analytics: top ingredients, average calories by city, dishes per category.
- Seed includes 'Clam Chowder in a Sourdough Bread Bowl' for SEA.
Tasks
- Add 'Archive dish' UI toggle (sets deleted_at)
- Hard delete flow with confirmation and cascade cleanup
- Analytics dashboard with GROUP BY queries
- Seed at least three dishes for SEA including clam chowder
- Acceptance tests for archival visibility and hard-delete cascade
🎬 Storyboard: Scenes & UX Flow
Opening — Road-Trip Map
Orient the player visually: show route with SD → LA → SF → SEA markers and a progress/gas XP gauge. 'Start trip' unlocks San Diego.
UX elements
- Map SVG with four markers and tooltips
- Progress bar / gas gauge representing XP
- 'Start trip' button to fetch the SD manifest
Tech notes
Client route state machine; server returns pitstop config at /api/module/food/manifest; seed data returned on initial load.
San Diego — Build the Baja Bowl
Learner creates a dish using a form; dish and ingredient records are created with join entries. Reward XP and update pitstop pantry.
UX elements
- Create Dish form with accessible fields and photo upload
- Toast notification on success (+50 XP)
- Pantry list showing created dishes for SD
Tech notes
POST /api/dishes creates dish, ingredients, and dish_ingredients in a transaction; server-side validation and file storage (S3/local).
Los Angeles — Food Truck Tasting
Learner filters and searches dishes, uses Dev Console to see safe sample SQL, and observes index impact.
UX elements
- Filter panel (ingredient, min_cal, category) with keyboard support
- Dev Console panel showing parameterized SQL examples
- Paginated list with quick detail drawer
Tech notes
GET /api/dishes supports pagination and filter params; database index demo (ingredient.name) and simulated metrics.
San Francisco — Gourmet Pop-Up
Learner edits a menu with transactional updates, previews diffs, and resolves concurrent edit conflicts.
UX elements
- Edit modal with 'Preview Changes' diff
- Conflict resolution modal when version mismatch occurs
- Clear success/failure feedback for transactions
Tech notes
PUT/PATCH endpoints wrap multi-table updates in transactions; optimistic locking via version column; rollback simulation endpoints for testing.
Seattle — Sustainable Cleanup with Clam Chowder
Learner archives or hard-deletes the clam chowder, observes cascading effects, and views analytics reports.
UX elements
- Archive toggle and archived list in admin view
- Hard delete confirmation modal with cascade warning
- Analytics dashboard with charts and exportable CSV
Tech notes
Soft delete implemented with deleted_at; hard deletes cascade to dish_ingredients; analytics endpoints aggregate data with GROUP BY.
📊 Analytics & Acceptance Criteria
Analytics dashboard (needs)
- Top ingredients used across all cities (ingredient name, usage_count).
- Average calories by city.
- Number of dishes per category (bowl/taco/salad/etc.).
- Total archived vs active dishes (by city).
- Most common pairings (joined ingredient pairs) for advanced analytic example.
Acceptance Criteria
- San Diego: Created dish is visible in SD pitstop pantry (GET /api/dishes?city=sd).
- Los Angeles: Filter by ingredient and city returns correct results and uses at least one indexed field in the demo.
- San Francisco: Transaction rollback behavior is verified with integration tests (failed nested operation leaves DB consistent).
- Seattle: Soft archive hides items from normal lists but they appear in archived admin list; hard delete cascades remove related records.
- Secure queries: endpoints use parameterized queries (no SQL injection).
- Accessibility: Forms and controls meet ARIA and keyboard navigation standards; color contrast >= 4.5:1.
- Seed data: At least three seeded dishes per city (including clam chowder in Seattle).
- Story/UX copy exists for each pitstop.