Building a VS Code clone with React (w/ Redux + Typescript)

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Defining the Code Editor App requirements

Lecture 3: BONUS: Join the community!

Lecture 4: Installing Node.js with NVM

Lecture 5: The repo for this course

Chapter 2: Code Editor App Authentication + Theming + Routing

Lecture 1: Creating the boilerplate code

Lecture 2: Configuring Auth0

Lecture 3: Creating the authentication provider component

Lecture 4: Installing MUI and creating a common loading component

Lecture 5: Creating a protected route component

Lecture 6: Creating a theme provider

Lecture 7: Setting up routes

Lecture 8: Creating the sign in and sign out buttons

Lecture 9: Creating the header component

Lecture 10: Creating a layout component

Lecture 11: Creating the homepage component

Lecture 12: Adding programming languages list

Lecture 13: Adding the code editor as a protected route

Chapter 3: Redux slices + reducers + actions + selectors

Lecture 1: Introduction to Redux

Lecture 2: Creating the dark mode slice

Lecture 3: Adding tests for the dark mode slice

Lecture 4: Configuring the store

Lecture 5: Creating typed hooks for Redux

Lecture 6: Actions vs Action Creators

Lecture 7: Implementing the dark mode switch

Lecture 8: Adding persistence with Redux persist

Lecture 9: Adding the files slice

Lecture 10: Creating the files reducer

Lecture 11: Testing the files reducer (Part 1)

Lecture 12: Testing the files reducer (Part 2)

Lecture 13: Creating a selector to select the active files information

Chapter 4: Redux thunks for handling files operations

Lecture 1: Creating a function to read files

Lecture 2: Adding a type for the file viewer hierarchy

Lecture 3: Creating a thunk to open files

Lecture 4: Tests for the open file thunk

Lecture 5: Creating the close file thunk

Lecture 6: Tests for the close file thunk

Lecture 7: Creating the read files thunk

Lecture 8: Tests for the read files thunk

Chapter 5: An algorithm to convert user files to a hierarchy data structure

Lecture 1: Tests for the selector

Lecture 2: Creating the selector

Chapter 6: Creating the custom code editor with Monaco

Lecture 1: Creating the open workspace button

Lecture 2: Creating an extension icon reusable component

Lecture 3: Creating the file viewer component

Lecture 4: Creating the custom Monaco editor

Lecture 5: Creating the custom tab panel

Lecture 6: Creating the custom tab label component

Lecture 7: Creating the code editor container

Lecture 8: Creating the Code Editor page

Chapter 7: Conclusion

Lecture 1: Conclusion