I'll post my findings here. You see, in the knowledge industry, it's not textbook details people crave. It's workflow solutions, passed down from someone who has gone through the pain for you, and come up with their own idiosyncratic method. Don't teach me, teacher -show me!
First step: nobody marches on an empty stomach. This is an important and often overlooked extension of your own DX.
Yeah I burned the sausages a little🤷🏻
Now time for forty winks power nap. Dreaming of my new redux store, of course. A chance, in all seriousness, to trigger the power of the subconscious mind. That's my story anyway and I'm sticking to it. The science:
https://www.nhs.uk/every-mind-matters/mental-wellbeing-tips/how-to-fall-asleep-faster-and-sleep-better/
And some frozen mango chunks to take into the office should cover the snacks kind of things.
When at my desktop and doing important original work, the first app I reach for is a simple pomodoro timer. I work in intense bouts of only 20 minutes, devices OFF.
I have two apps as starting points. "/choros..." is a copy of a production app using React and React state only (lifting state up pattern) to manage state across the app, whereas "/my-redux..." is a template scaffolded using the following command:
npx create-react-app my-redux-template-app --template redux
We are going to add Redux to the choros app, which additionally is built using the Vite bundler, taking a ready-made Redux-plumbed-in boilerplate, the my-redux app, as our guide. my-redux is built using the create-react-app bundler. And here we encounter the first gotcha of modern Redux. All but deprecated now in the official React docs, create-react-app is an interesting choice for the go-to Redux Toolkit, or RTK for short. It is my opinion and that of my colleague's that create-react-app, or CRA, has superior error reporting to Vite, and a more reliable dev server, albeit a bit slower to build. But how many times do you build out a new JavaScript Web App with Node modules, compared to unit test using its' built-in dev server?
From the above screenshots of each project's page on the npm repository, https://www.npmjs.com/, you can clearly see which horse to back on popularity alone. But it is my opinion that in software development, particularly frontend, new frameworks and tools are adopted in frenzied trends, like new haircuts or boy bands in other contexts.
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.
Actually, correction, >>>...In the development environment ONLY, /db2-ALL.json is served by json-server<<<
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.
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:
UI user story steps 13-14:
Live production version can be found at https://choros.ie
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.