This tutorial will give you a high-level understanding of how to design applications in baahu. SoundCloud in particular is a good example because it has lots of state, often shared between components and tabs.
Audio "miniplayer" fixed to the bottom of the screen, persists state between page transitions and reloads
Fixed navbar at the top of the screen with search input
The playing state should be synchronized between the miniplayer and the song + search pages
Authorized and Unauthorized users use the same app, but only Authorized users can comment on songs
Design + Finding a Machine Hierarchy
For the purpose of simplicity, we will implement three pages: Search ("/"), Song("/:songid"), and Login ("/login").
It can help to visualize the application you want to build before deciding what your Machine Components will be.
Let's ignore the nav + player bars, which appear on every page, for now.
We see a play button on each search result, so we know that search results need to maintain internal state. Let's design the "search result" machine.
Each search result represents a song. The component will render the songs artwork, title, and playing state.
Users should be able to:
play and pause songs that are already the active song (the song played by the player bar)
change the selected song by pressing play on any song not currently selected
From these requirements, we can model the search result as a machine with five states:
playing: this song is the active song, and it is currently playing.
paused: this song is the active song, and it is currently paused.
inactive: this song is not the active song.
loading: this song is loading, and will start playing when it is ready
error: this song failed to load
SoundCloud (web) itself doesn't have a visual representation of loading states, which can be jarring for users on slow connections. Modeling state is easier to handle with explicit state machines.
There are two distinct features on this page
play and pause active song / loading inactive song
comment input machine
We will create two machines for this page: "big player" machine and "comment input" machine.
For the sake of the tutorial, the "big player" machine will be almost identical to the "search result" machine. In a true SoundCloud clone, you would implement a waveform timeline; its associated challenges are out of scope for a Baahu tutorial.
Let's model the comment input machine:
The comment machine contains state that cannot be modeled by a finite state machine; the timestamp. "Extended state," known as context in baahu,
Nav + Players bars