Live refactoring a subscriber's React code

A subscriber gave me permission to clone his repo and refactor his code. Join my while I try to understand his code and clean it up.

------------

[WebDevCody]

To anyone watching this, my approach to keeping track of the page in state and breaking the Hateoas url returned from the api is BAD. I also didn’t have time to find ways to cache these requests which would help with performance. My main focus was cleaning up the code in the video. I still think there were some interesting things discussed in this video, but maybe don’t ignore the urls returned from the api in the future. They are there for a reason. 🍻

[Anbaraen]

awesome to see this happening live. I don't think many folks are doing this style of video on YouTube, so a great niche to carve out, and your commentary is valuable in understanding decision-making. Keep it up!

[BenRangel]

This project seemed more suited for classic serverside rendering than react. The oldschool pagination especially. No clientside js was really needed. If this was serverside you could cache the entire html response for each page for a long time and get a lightning fast render, instead of every visitor having to call the api.

You'd also get simpler url based navigation and make the content crawlable of the box.

Using React seemed to complicate things by requiring page to be kept as state, and causing issues with duplicate requests on mount etc.

But of course it’s probably intended as a simple starter demo to learn React and could make use of React later for filtering etc.

[markshinkai]

thank you for this super insightful, thinking out loud, and showing the real struggle of programming and refactoring stuff, can you do more of this?

[FH]

This is just awesome! It's really great to show how to write/clean up code in a session like this than teaching some basics which can be found in 100 different places. Kudos.

[FantomDoesWork]

this was super interesting to watch, and observing your thought process through certain scenarios led me to learn some cool things. also, you are insanely quick with the keyboard shortcuts, i wish i was that fluid 😅

[christophebeaulieu]

I feel like something that would’ve improved the speed a lot would’ve been to create a species map and a homeworld map, so that you don’t need to request multiple times the same data

[ahmedelswerkey]

great video

and also, for those like me wondering name of extension that shows github record inline and error/warning description
they are : git lens + error lens

[Sky-yy]

Superb Livestream cody. You're sharing your thought process and then doing.
Valuable content. More streams needed sir

[zvvlnez]

Bro..That is just awesome .
I love it every minute of this video, as a junior developer here in brazil, i learned a lot. Thanks
U should make more of this.
Thanks again dude.

[masterv.]

As a begginer this is one of the best vidoes ever. thank you so much chief i hope you all the best < 3

[FreedomForKashmir]

This was really very educative and very very appreciated
We definitely need more stuff like this

[johncmm]

Really helpful to watch you work through this. Thank you.

[dnserror]

This was super helpful. I'm currently a FE Eng with about 1.5 YEO and it's really great to see your thought process and pick up some tips along the way. Would like to see more videos like this!

[yubin_jo]

Love these refactoring vids. So much more insightful then any tutorial

[Californa]

Would love to see more like this, different project types or other frameworks, adding linting or tests, maybe even some pure vanilla or converting a project from js to ts, etc. There's tons of videos starting things from scratch out there but not a lot for refactoring and or reworking existing projects.

[andyjohansson]

Great walkthrough how to think when setting up project with clean and easy readable code. I particularly enjoyed the thought process and your iteration of improvements in the code as you made new discoveries in the code base.

[OpenJavaScript]

Very cool idea to do this ❤

I think refactoring, especially for scalability, is greatly overlooked in YouTube tutorials. In reality, what is important is not only what works, but what will work as a project grows.

[alanbm]

I would like to see more of this. I think is very interesting to see you going through the code review and refactoring process. Also explaining the train of thought is very good.

[iqquwos]

i had a good quick dinner watching this.was quite entertaining. thanks