Since I've found myself looking for a new job recently, I thought it would be a good idea to level up my React skills. I knew Wes Bos had a new "Full Stack Advanced React and GraphQL" course. Since I've taken several of his courses before, I knew this would be a great way to get better at React and pick up a hot new skill (GraphQL) along the way.

Learn Full Stack App Development with React and GraphQL

The course walks you through developing both the frontend and backend of an e-commerce website called "Sick Fits". The site allows an authorized user to add items for sale. Regular users can browser the site, add items to a cart, and checkout. The course covers the following:

  • Next.JS front end (React based)
  • JWT based authentication with cookies
  • User permission management
  • Password reset via email
  • Image upload and transformations to Cloudinary
  • Adding and editing products: image, title, price, description
  • Cart management
  • Checkout with credit card processing by Stripe
  • Using Prisma to manage your GraphQL database, schema, and models
  • A Yoga based backend to process GraphQL queries and mutations
  • Using the Apollo Client in the front-end
  • Front end testing

The course has approximately 16 hours of video content. Completing the course took me about 60 hours of near non-stop coding, troubleshooting, configuring, etc. as I watched the videos.

The Good

Quite simply, this is the most comprehensive development course I've ever taken - online or in-person. I've attended many in-person development courses (AngularJS, ExtJS, etc) and spent thousands of dollars on the courses and travel. I've also taken several more expensive online courses that cover subjects artificially but not in enough depth to really be able to use right away. For the (currently on sale) price of just $97 for the "Master Package", you simply can't go wrong.

This course is the whole shebang! If you currently have an average level of React knowledge and some previous backend development experience (Node, PHP, Go, MySQL, MongoDB, C#, MS SQL, etc), you will finish this course with the knowledge to create your own GraphQL powered React app!

Previous backend experience isn't really necessary, but it would probably be pretty daunting to understand what's going on behind the scenes in the backend without it.

Wes is an excellent teacher and keeps a great pace that makes the learning fun and prevents boredom.

Some Suggestions/Issues

  • The course has some "starter" code. I understand why this was done, but I'd really have preferred to start from scratch to understand every single step of the process
  • It would have been nice to have some ESLint or Prettier configuration built into the starter project or at least have a video about setting it up to match Wes' configuration. During the videos, as you're coding alongside, Wes will save the changes and his own Prettier configuration changes the code. This makes it harder to compare your code to what's on the screen when running into troubles.
  • The course covers deploying the frontend (Next.js) and backend (Express/Yoga) to Zeit's Now service (as well as to Heroku). Unfortunately, Now has a new API v2 which requires a completey new build process. It would be great if:
    • Wes updated the video to explain you need to set the version 1 flag in a now.json file or
    • Covered how to deploy to Now using the new version 2 api.
  • Unfortunately, the course does not cover any backend testing.
  • Sometimes, the video transitions too quickly. For example, Wes might type something and then quickly move to another screen or file before you have a chance to finish your own typing. You'll need to be adept at switching between your editor and the browser very quickly to pause the video. Also, the ⬅️ key (on your keyboard) is your friend! It will step back through the video 1 second at a time so you can see the last thing Wes typed.
  • Type what Wes SAYS, not what he TYPES. He's got dyslexic fingers that frequenly turn "response" into "reponse" or even "result". 😆
  • Wes pronounces "A-sync" as "uh-sync". Get used to it. 😭