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

Course overview - 49

• Introduction

• Defining the requirements of the app

• Installing Node.js with NVM

• The repo for this course

• Creating the boilerplate code

• Configuring Auth0

• Creating the authentication provider component

• Installing MUI and creating a common loading component

• Creating a protected route component

• Creating a theme provider

• Setting up routes

• Creating the sign in and sign out buttons

• Creating the header component

• Creating a layout component

• Creating the home page

• Adding programming languages list

• Adding the code editor as a protected route

• Introduction to Redux

• Creating the dark mode slice

• Adding tests for the dark mode slice

• Configuring the store

• Creating typed hooks for Redux

• Actions vs Action Creators

• Implementing the dark mode switch

• Adding persistence with Redux persist

• Adding the files slice

• Creating the files reducers

• Tests for the files slice (part 1)

• Tests for the files slice (part 2)

• Creating a selector to select the active files information

• Creating a function to read files

• Adding a type for the file viewer hierarchy

• Creating a thunk to open files

• Adding tests for the thunk to open files

• Creating a thunk to close files

• Adding tests for the close file thunk

• Creating a thunk to read files

• Adding tests for the read files thunk

• Adding tests for the selector to convert user files to a tree view data structure

• Creating the selector that converts user files to the tree view data structure

• Creating the open workspace button

• Creating an extension icon reusable component

• Creating the file viewer component

• Creating the custom Monaco editor

• Creating the custom tab panel

• Creating the custom tab label component

• Creating the code editor container

• Creating the code editor page

• Conclusion