Stanza 03
Stanza (Client work)
An admin tool for the Stanza mobile app (currently in development).
Client required a web app admin tool for multiple admin/moderators that allowed them to create and add, edit, or delete content to their database that is used for their mobile app. Features a login, dashboard, and tools.
Developed alongside the backend dev and UX designer as the sole frontend developer.
React / React-Router / Redux / Material UI / bcrypt / Spotify API / Genius API
*Site and repo are private (view
demo video below)
*Images blurred per client's request
-2.png)
Dashboard Analytics
The dashboard allows admins to view and keep track of their users and content data that is stored in their database. Additional cards/tables can be easily added as the app scales.
.png)
Create and Add Content
Admin/mods can search either a track, album, or playlist provided by the Spotify API.
-
Results are displayed in cards. Selecting an item leads to another page where content is fetched using the Genius API and displayed in a data table.
-
Cycle through songs in an album or playlist.
-
Admin/mods can then select the data they want using checkboxes, assign their tags, and then add it to their database.
-
Three sections were requested for the page. One to select content, another to preview the selected content, and lastly a section to view content already stored in their database.
Challenges
The biggest challenge was handling asynchronous data.
Upon refresh, state in a useState hook was being updated in more places than one (at the same time), causing a bug in the code when sending data to the database. Knew it must be an async issue due to previous experience. Identified and rectified the bug by refactoring the code to make sure state was only updated in one place.
Learning Material-UI
Priority for the client was functionality so no UI design was provided for the app. I was given free reign on styling and the design direction to take. Learned Material UI to save time, so I could worry less on how it looks and focus more on the javascript. However I did end up adding some custom css for a cleaner look.
I learned it in three hours with NetNinja's tutorial series. Anytime I got stuck I read the documentation and figured it out as I went along.
Next Project