Reading Time: 8 minutes | January 3, 2019

We believe in constant learning and we are always on the path in hunting down the best courses out there to enhance what we already know, or what we don’t know yet.

Along the way, we hope you feel inspired to learn too.

What's the Course?

At the end of November 2018, I picked up “MODERN REACT WITH REDUX [2019 UPDATE]” by Stephen Grider on Udemy course for $12.99 CAD (Original: $184.99 CAD // Discount: 93% off). It was on sale for Black Friday.

Content of the Course

  • 47.5 hours on-demand video

  • 14 articles

  • 1 downloadable resource

  • 6 coding exercises

  • Full lifetime access

  • Access on mobile and TV

  • Certificate of Completion


Actually, it was around 39 hours of on-demand video, with the rest labelled as legacy

Projects in the Course

  1. Approval Card

  2. Pictures

  3. Seasons

  4. Songs

  5. Blog

  6. Streams

  7. Youtube

  8. Translate



Would I recommend this online course?

Most definitely. More than the $12.99 CAD that I spent, every minute of the 150+ hours I put into this was worth it. If you’re ready to commit, I’d highly recommend this course with Stephen Grider. Remember, that’s only if you’re ready to commit the hours.

Length of the Course: 4/5 Good ⭐️⭐️⭐️⭐️

Expectation: With 39 hours of updated video content (i.e. not including the legacy videos), I was aiming to finish it in two weeks, keeping in mind that I was working full-time.

Actual: I spent roughly x3 the number of hours to finish this course. I had 1.5 weeks off during the winter holidays and so I spent every single day coding with Instructor Stephen. It took me longer than I anticipated.

Disclaimer: it took me awhile also because I was committing changes and replaying videos.

Recommendation: Depending on what your goals/objectives are in learning, ask yourself what level of depth and length you want to invest before you make the commitment to choose this course.


Depth of the Course: 5/5 Excellent ⭐️⭐️⭐️⭐️⭐️

The course was extremely in-depth and showed alternatives to solutions. We focused on React and Redux, so Instructor Stephen tried to use third party libraries to take care of the rest (e.g. css grid, semantic-ui)

For me, it went a little too in-depth for what I really needed to know as a Product Manager. However, it was great to learn new terminology.


Teaching Style: 5/5 Excellent ⭐️⭐️⭐️⭐️⭐️

Ha, no way! I’d say I understood maybe around 47% of all the content. However, I walked away with 47% more than I knew before about React and Redux. In addition, I also took away pieces about programming I didn’t expect to from this course.

I found immense appreciation in:

  • Open source libraries created by fantastic users around the world such as faker.js, jsonplaceholder, and semantic-ui.

  • Tools like: codepen.io, reduxDevTools, unsplash, and Javascript Diffchecker.

  • Inspect Element’s console, network, location settings, and debugger.

  • API requests and RESTFUL API conventions.

  • Javascript syntax.

  • my MacOS terminal, Git, and Github.

  • npm install of all the third party libraries and templates.

  • The work developers do on a regular basis.


The online course is very well structured with 26 sections. Each section varied between 2 videos to 24 videos. Each video lasted on average 6 minutes.

Instructor Stephen made mockups of apps we were going to build and for each complex topic, he would have diagrams to illustrate the code/logic flow.

There was also a Github repository I forked so that I could double check where I went wrong if my code showed errors.

Only downside was that there were a lot of refactoring which confused me. I was using Javascript Diffchecker constantly to ensure I was writing the same code as Stephen was.

Note:

Some concepts may have flew over my head could have been due to the lack understanding newest updates to JavaScript. I know I have to spend more time looking at various parts of the content again!


Objectives for picking this course

  • To get the prerequisite to learn React Native.

  • To better understand the developers I work with on a daily basis, as a Product Manager.

  • To eventually be able to build the mobile app product on my mind.

  • To prove to myself that I don’t need to spend $3K on a coding bootcamp to learn how to code.


Did I understand everything?

Do I have what I need to start React-Native?

I would think so. I was actually extremely naive in thinking I could have started React-Native course without doing React.

I asked a question about components on the Q&A portion of the site and was automatically redirected to learn React first. Yes, they found out I was a fake with just 1 question!

Can I build my own web-browser app now?

Depending on how complex it is, I’m sure I can whip up a basic web-browser app to do very basic things like take an input. I mean, I can always use the help from fellow developers around the world and Google search!

What did I build?

On my Github: I made 115 total commits as of January 1, 2019 for this course.

Start date: November 29, 2018

End date: January 1, 2019


Project 1: Approval Card

Title: Approval Card

Description: A simple app that shows Approve and Reject on a card. No functionalities.

Learning: Made use of Semantic-ui.com for pre-made css and faker.js for the fake data. Understood the basics of setting up a react app through terminal.

Project 2: Pictures

Title: Pictures

Description: Enter any word into the search bar and top 10 images will be pulled in from an external API source.

Learning: Made use of axios, rendered lists, and css grids. Public use images came from the unsplash.com API.


Project 3: Seasons

Title: Seasons

Description: Prompts user for their location and then determines whether to show snowflakes or sunshine depending on whether user is in southern hemisphere or northern hemisphere in a specific month.

Learning: Made use of Mozilla Developer’s Network (MDN) Geolocation API, semantic-ui premade css, and default text icons.

Project 4: Songs

Project title: Songs

Description: As user clicks on the buttons, title and description details about the pre-chosen 3 songs will show on the right side.

Learning: Understanding the basics of how redux and reducers work.

Note: This was also part of Project 9

Project 5: Blog

Title: Blog

Description: Generated a large list of post comments with each having its own avatar, description, and the author.

Learning: Made use of faker.js, redux-thunk, and async actions.

Project 6: Streams (Capstone)

Title: Streamsters

Description: A live streaming app which allows user(s) to stream to different channels. User is able to view streams, create new stream, single sign-on using Google OAuth, Edit/Delete streams they created, and see a list of all the streams available.

Learning: Implemented our own rtmpserver, utilized OBS streaming tool, and constructed navigation between several pages. We even built our own local database. It used every React and Redux concept taught in video so far.


Project 7: Youtube Videos

Title: Youtube Videos (yt)

Description: Upon landing on the screen, user will see a default search of ‘stories’. Afterwards, user can type in any search term and the app will pull in the top 10 Youtube videos related to the search term from the Youtube API.

Learning: Made use of the Youtube data list API, rendering video players, and css to position main player as well as thumbnails on the right-hand side.


Project 8: Translate

Title: Translate

Description: Clicking on the little flags will generate the name and submit button bars to either ‘English’ or ‘Dutch’ language. Note: the input doesn’t do anything.

Learning: Utilized hooks to refactor class based components into functional components.