The Beach Mystery is a browser-based interactive fiction app built with React and Vite. It puts you on a sunlit shoreline where your foot bumps against a buried pirate’s chest — and every decision you make from that moment shapes a completely different story. With seven distinct storylines, four unique endings, five personalization questions, and one riddle to solve, no two playthroughs are alike. The entire experience runs client-side and requires no account, no backend, and no install.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/the-beach-mystery/llms.txt
Use this file to discover all available pages before exploring further.
What Is The Beach Mystery?
The story begins the same way for every player: a walk along the beach, a chest half-buried in the sand, and a choice. Do you open it? Do you follow the map inside? Do you enter the dark cave farther down the shore? Each decision branches the narrative, and the answers you provided in the personalization questions appear naturally throughout — your name in the opening greeting, your favorite jewel inside the chest, your favorite cartoon character on the watch you check beside it. The app is a modern reimagining of a classic text-based adventure, rebuilt as a polished web experience with:- Animated scene artwork — every story beat is illustrated with a custom inline SVG scene
- Branching node graph — the story is data-driven; each node carries its type, lines, scene key, and a pointer to the next node
- Inventory system — collecting the jewel and the treasure map unlocks different story paths and narration lines
- Achievement tracking — every ending you discover is saved across sessions
Key Numbers at a Glance
| Feature | Value |
|---|---|
| Storylines | 7 |
| Unique endings | 4 |
| Personalization questions | 5 |
| Riddle | 1 (answer: “echo”) |
| Story node types | narration, choice, riddle |
| Inventory items | Jewel + Treasure Map |
How It’s Built
The Beach Mystery is a single-page React application bundled with Vite and deployed to GitHub Pages via aHashRouter. Because GitHub Pages serves static files without server-side routing, hash-based URLs (/#/play, /#/endings) prevent 404s on direct navigation or refresh. There is no backend — all game state, achievements, and settings are persisted entirely in localStorage.
| Route | Page |
|---|---|
/ | Title / landing screen |
/play | Full interactive story |
/endings | Endings gallery & achievement tracker |
/gallery | Scene artwork lightbox |
/about | Project overview |
/case-study | Engineering case study |
/blog | Development journal |
What Makes It Unique
Personalization woven into text. Before the story starts you answer five questions. Those answers — your name, favorite color, animal, cartoon character, and jewel — are substituted into story text with a simple{placeholder} system. The jewel you name appears inside the chest. Your cartoon character appears on the watch face. Your favorite animal shows up as the island’s guardian. The story speaks directly to you.
Inventory that matters. The jewel and the treasure map are not cosmetic. Opening the chest sets hasJewel and hasMap flags that change which narration lines appear, whether the jewel glows to guide you through the cave, and which paths are available at the cave fork.
Achievement tracking without an account. Every time you reach an ending for the first time it is appended to a beach-mystery-achievements array in localStorage. The Endings page reads this array to show a progress ring and reveal ending descriptions you have earned.
Save and resume. A full game state snapshot — current node, personalization variables, inventory flags, choice history — can be written to localStorage at any time and reloaded on the title screen.
Explore the Documentation
How to Play
Step-by-step walkthrough from the title screen to your first ending.
Personalization
How your five answers are stored and substituted into the narrative.
Storylines
All seven branching paths and the endings they lead to.
Project Structure
Source layout, build config, and deployment setup for developers.
Accessibility. The Beach Mystery uses semantic HTML throughout — proper headings, labeled inputs, and
<button> elements for all interactive choices. The prefers-reduced-motion media query is respected: all CSS animations (transitions, fades, scaling) are suppressed to near-instant duration for users who have requested reduced motion in their OS settings.