• Home
  • Technology

By David Armendariz, Software Engineer

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

Language: English
All Levels

Course description

In this course, you will learn how to build a simple yet complex app (a code editor in the browser). You will learn a lot of things from such a simple project.

What you will learn

  • React with Typescript
  • React best practices
  • Redux
  • Redux Toolkit
  • Material UI v5
  • Testing with Jest
  • Authentication with Auth0
  • Protecting routes with React Router Dom and Auth0
  • Implementing dark mode

Requirements

For this course you only need to have a basic knowledge of React and Redux. If you don't, don't worry, we will review it here.

What to expect after you finish this course

At the end of this course, you will be able to transfer all the knowledge you will get to a real world application. You can also take this project as a portfolio project. It contains lots of things that you would use in a big React application.

Related Skills

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

Learners who have already enrolled in this course

Meet your instructor

David Armendariz
David ArmendarizSoftware Engineer
Hi! My name is David Armendáriz. I am ecuadorian. I studied mathematics at USFQ (Universidad San Francisco de Quito). However, I love coding and that's why I transitioned to the software industry. Right now I am a senior software engineer working in the healthcare industry. I hope you enjoy my courses as much as I enjoy doing them and remember: never stop learning!