ALAN LAVENDER @lavenderlens@qoto.org

Rest time.

UI user story steps 13-14:

Live production version can be found at https://choros.ie

UI user story steps 9-12:

UI user story steps 5-8:

You've done well to make it this far without a glimpse of the UI. Here it is, Search Track and add it to Home. For now, we don't need to worry about Add Track, a feature which is definitely only ever going to be available in dev mode. In this UI demo I search for and choose two tracks, then expand them in the Home screen to present the view the choir would sing from. 1-4:

I'm used to adding songs for production updates to a JS object, hardcoded_songs.js. When given this functionality of choosing their own songs, users decided instead they prefer a hardcoded list of songs each week, so they DON'T have to look up their own songs from the JSON of everything. For production I use an older version of the app that doesn't lift state up and has a half-functioning search component that highlights a song BUT DOES NOT ADD IT to the home screen. So in this version, the roll-your-own one, /db2-ALL.json is our endpoint for json-server, which will hopefully then become our Redux Store state.

Actually, correction, >>>...In the development environment ONLY, /db2-ALL.json is served by json-server<<<

You will notice a /db.json file. This is our current application state, a JSON object of songs and their lyrics and some other parameters. Internally, it looks like this, empty or populated (in /db2-ALL.json). In the development environment ONLY, /db.json is served by json-server. Songs are then added by the user to appear on the home screen. This is an environment which could only be mocked IRL by. a proper database backend. This is problem No. 1 that I hope to improve via the addition of Redux, where /db2-ALL.json will become our Redux Store, with /db.json as a dynamic slice of the store state. That came to me during my preliminary Power Nap. Redux Store effectively becomes our database in the frontend.

The app structure of the choros app looks like this. With Vite, /index.html is up front and centre. I decided to put my components in a /src directory.