Single Page Applications (SPA) using vanilla Javascript (part 1) - no framework

In this video, I show you how to create Single Page Applications (SPA) using plain javascript. No framework such as React, Angular, Vue, etc. This video is part 1 of 2 videos. I use this technique in my portfolio website which you can check at https://www.akbarbakhshi.com

Join the Late Night Coders community to get access to online courses and more:
https://www.latenightcoders.club/

I am using my Webpack boilerplate code (with Favicons added plus some small pug and scss modifications) as the starting point. You can check the video below to learn more:
https://youtu.be/vBjSArmY6d8

Github repository for the starter code:
https://github.com/AkbarBakhshi/fetch-pages-without-route-redirect/tree/starter

Github repository for the finished project of this video:
https://github.com/AkbarBakhshi/fetch-pages-without-route-redirect/tree/part1

Check out part #2 of this video here:
https://youtu.be/SN-Px5ZcJLg

Video Contents:
00:00 - Intro
02:47 - Get the starter code
06:21 - Part 1: Page transition procedure
27:58 - Fixing the page URL for different routes
30:16 - Handling the back (and forward) browser button
37:20 - Outro

✅ ? Please make sure to subscribe to the channel and hit the notification bell to be the first to know whenever I upload new videos.⚠️

Check out my portfolio website at https://www.akbarbakhshi.com

Useful links:
https://developer.mozilla.org/en-US/docs/Web/API/Window/location
https://developer.mozilla.org/en-US/docs/Web/API/Location/origin
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
https://developer.mozilla.org/en-US/docs/Web/API/Window/history
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event

Finally, leave a comment below and let me know if you have any questions or you have any topics in mind that would like me to make videos for.

Happy coding ?