Reacting to the Taste of Music
MusicTaste was my first React web application that I made completely by myself from beginning to end, and it was such a fun journey going from nothing to something. I’ve used Rails as an API and backend to support the front end, which I’ve done before with vanilla JavaScript, so that wasn’t challenging and was as simple as before. I started in somewhat of a backwards way, which I would highly not recommend, but I didn’t know exactly where I was going to end up. I only had the concept of what I wanted, which was a website for users to share their music taste and have other users review it. I originally started with songs but then I realized that I would need a playlist to put the songs, so other users would review the playlist and not each song. I used components for each of the models from the backend to display them within the react app, using containers and presentational components, along with details about each of them.
While React can handle fetch request similar to vanilla JavaScript to work with a backend, I used redux in my app to share state and props between different components. When using react redux, you need a middleware, such as thunk, to use fetch request and other async functions. Before getting into thunk, you first have to understand that redux makes use of reducers and actions. Reducers are functions that change the state of an application, which uses actions to determine/set the state. For example, I used several actions throughout the app, such as addSong, createUser, and postReview, which are connected to the reducer(s) to change the state and place said models into the state. I also had multiple reducers that are related to different models and aspects of their state, such as reviews, songs, playlists, and users. I had to import combineReducers and use it inside of createStore to connect all the different reducers, in a rootReducer, with the different actions.
Redux works by making excellent use of simple JS objects but fetch request are not simple javascript objects; they’re functions. Now… back to the thunk middleware, you can make use it and similar middleware to dispatch actions that return a javascript object and connect it to the reducer. With the middleware enabled and actions connected to reducers, you can use fetch in essentially the same way as vanilla JavaScript.
My React web application was also a single page application, but I used “react-router-dom” to give my application restful routes. I imported router to enable the ability and made use of the imported “switch” and “route” to give it specific routes. I have routes for logging in/out, playlists, about, etc. I also created an error page path to show up when users try to visit a route that does not exist. I used the same method within the playlist container to create restful and nested routes for creating songs and reviews on a playlist in addition to creating a new playlist.
Once everything was in place, I was able to give MusicTaste all the functionally that I wanted it to have but it was still just a basic looking React app. I installed and imported Material UI into my app, which is a framework for react that comes with built in components for displays that don’t change state or props of components. I put my models and other important information inside Material UI’s box components to display the information more clearly over the background. I also used Material UI’s AppBar component to change my navbar from a line of links into a modern menubar, similar to mobile apps. Material UI was also used on the forms to fit the forms with the design throughout the rest of the app.
I hope to post the web application on the world wide web but that part comes later. When it does it get posted, I host to see your reaction to other user’s music taste, read as review other user’s playlists. Try not to be harsh but do share songs that you think would fit in with their playlist if you know any. We all love music so be honest but not hateful. Some say music is the answer!
