Almost There

I've been working on Stephen Grider's Modern React with Redux course on Udemy for about 2 weeks now, and I'm finally down to the last few sections. This course has a final project of sorts that spans about 9 and a half hours and is based on the idea of recreating Twitch, a popular video streaming app primarily used by gamers. Within this project, we have used a wide array of tools and technologies, including but not limited to, React-Router, Redux, Redux Forms, JSON-Server, and OAuth. There have been a lot of moving parts for this app, and I'm within an hour of completing it. The setup and infrastructure of the site took the majority of the time, and it was a while before we had anything tangible to show for the hard work we were putting in. We set up the routing first, then the authentication, and then all of the boilerplate for Redux. I believe yesterday or the day before, I finished up all of the actions and reducers for Redux, which handled creating, editing, deleting, and showing streams. We then moved on to the biggest section in the entire course, which was building out the functionality of these REST-based actions.

This section on creating a React app that was REST-based was about 3 and a half hours long, and took me a couple of days to finish up, but I was able to complete it earlier today. Within it, we used JSON-server to set up a rudimentary backend with a database to hold all of the streams the users create. JSON-server is a pretty awesome tool to use, in that there is very little the developer has to do to get it up and running, and once you have it running, it's very powerful. With this in place, we were able to hook up the ability for the user to create streams first, and with a little help from React-Router and Redux, we were able to get this to work fairly easily. Unlike other tutorials with Redux I've done in the past, we created all of the actions for Redux in one fell swoop, instead of doing one at a time when we got to the point where we needed it. After doing that, we did the same thing with the reducers, knocking all of them out in a matter of a couple videos. While I would normally say this wouldn't be the best way to fully grasp the concepts behind it, Stephen did it in a way that totally made sense, and took his time to explain why each action and reducer was written in the way it was. It was also helpful to do it in this manner to compare the differences from one action or reducer to the next. With the continuity of doing them all at the same time, it was obvious how they each differed.

We then spent an inordinate amount of time on creating a modal and finishing up the REST functionality of the app with the delete page. When a user clicks on the delete button next to their own stream, it pops open a modal and they are given the option of either deleting the stream or cancelling out of the modal. Now, I've created modals in the past with Semantic-UI, which is what we are using in this app, and it was simple. I use a version of Semantic-UI that is built specifically for React, so I believe a lot of the functionality of this component is handled behind the scenes, without the developer even realizing what's going on. Stephen has taught this entire course using the version that is meant for just basic HTML and CSS. There may be advantages to using this way that I don't understand, or more likely it's a better way of teaching concepts like modals. Regardless, the functionality behind creating a modal was much more complicated than I had previously realized. The idea is to basically create a completely separate component that is linked to a separate div in the index.html, and ends up sitting on top of the root div, with just a higher z-index. When I've created modals in the past, all you had to do was add the modal component to the code with render props of what was within the modal, I believe. I will have to go back and look at exactly what I did, but as far as I remember, it was really straightforward. I finished this section up moments ago, and am now on to the final section of the project. After that, we have a few more sections on context and hooks, and that's a wrap.

Until tomorrow!