Project Overview
The Shipwreck Study Deck is a custom-built digital training tool designed to bridge the gap between menu complexity and server performance. In a high-volume environment, server confidence is tied to ingredient knowledge; this app provides a mobile-first, searchable platform for instant technical lookup.
01 // The Problem: Knowledge Latency
New hires in professional restaurants often face a steep learning curve regarding ingredients, allergens, and flavor profiles. Standard paper menus are difficult to search and study efficiently on the fly.
02 // The Solution: Interactive Data Architecture
I developed a decoupled web application using Vanilla JavaScript (ES6+) to provide a lightweight, high-speed study experience.
Technical Implementation:
- Single Source of Truth: Orchestrated a centralized
menu.jsonschema. This allows for rapid updates to prices or ingredients without needing to modify the underlying code. - Interactive Flip-Cards: Implemented a CSS/JS "flip" logic. The front displays the dish name and price; the back reveals the "Technical Specs"—ingredients, allergen warnings, and flavor profiles.
- Real-time Search Engine: A custom filtering algorithm that parses the JSON data to allow instant searches by name, ingredient (e.g., "shrimp"), or dietary tag.
03 // Result: Operational Efficiency
By digitizing the training process, the app provides several key benefits:
- Reduced Training Time: Staff can study the menu on their own devices using an interface designed for rapid memorization.
- Instant Reference: Servers can use the app as a "Technical Guide" during shifts to answer complex customer questions about allergens or ingredients instantly.
- Scalable Content: The JSON-driven architecture makes it trivial to add "Study Notes" or "Chef's Recommendations" as the menu evolves.
[Technical Stack]
- Language: Vanilla JavaScript (ES6+)
- Data Layer: Centralized JSON
- Styling: Custom CSS3 (Flexbox/Grid)
- Deployment: Localized mobile-web utility