Architecture: Vibe Pages
Architecture: Vibe Pages
The frontend component of myvibes.world — standalone web pages served by a Rails 8 app.
Diagram
Components
| Component | Technology | Role |
|---|---|---|
| Framework | Rails 8 | Routing, views, asset pipeline |
| Frontend | Hotwire (Turbo + Stimulus) | Page transitions + JS controllers |
| JS Delivery | Importmap Rails | ESM imports, no bundler |
| Assets | Propshaft | Asset pipeline |
| Audio | Tone.js | Web Audio synthesis via importmap |
| Music | Spotify Embed API | Track playback via iframe |
| Server | Puma | Application server |
Key Decisions
- Rails over static site — matches landscaping-assistant stack, enables future dynamic features (auth, user accounts, API)
- Importmap over bundler — no build step for JS, Tone.js loaded as ESM
- Each vibe page is a standalone route/view — no SPA, no shared state between pages
- Stimulus controllers handle Tone.js lifecycle per page
Related
project-my-vibes-world— project page