US $19.97

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

——   Created by David Armendariz

Learn how to build a VS Code clone with Redux, Typescript, Auth0, Material UI and Jest

Share this course:

6h 17m
Lesson time
Skill level

More about this course

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

  1. React with Typescript (we are going to use React Hooks and use it with TS)
  2. React best practices (configuring Prettier for formatting your projects, centralizing environment variables, centralizing your theme config, etc)
  3. Redux (dispatching actions, using selectors, etc.)
  4. Redux Toolkit (creating async and synchronous thunks, slices, etc.)
  5. Material UI (we will be using lots of components from this UI library and learn how to use the ThemeProvider)
  6. Testing (with Jest!)
  7. Authentication with Auth0 (we'll learn how to configure an SPA with Auth0 and use its hooks)
  8. Protecting routes with React Router Dom and Auth0
  9. Implementing dark mode (with the help of MUI v5)

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.

Lots of courses concentrate on the basics of React. In this course we will be building a simple yet complex app. You will see that we will cover lots of things in such a short amount of time!

The course project

In the course project, you will build two new features: the ability to remove the current files and the ability to add another directory without removing current code. The first feature should be fairly easy. We already learned how to reset the state where the files are stored. You only need to reset that state. However, the interesting part comes when we mix the first feature with the second feature. The second feature implies that the state shape should be different. Maybe it can be a map where we map a newly generated id of the new directory to an array containing the files. Now, if we want to delete a single directory, we would just need to delete the key from this map. Other reducers should also be modified! The second feature is basically going to change the whole state shape and that's why this is an interesting project!

You will learn (unconsciously) about data normalization by doing this, so make sure to read about this topic after you finish the project!

47 Lessons

2 mins
free preview
4 mins
App Requirements
free preview
Code Editor App Authentication + Theming
6 mins
Boilerplate Code
free preview
10 mins
Configuring the Auth0 account
8 mins
Creating AuthProvider Component for authentication
6 mins
Adding Material UI And A Loading Component
5 mins
Adding the ProtectedRoute Component for authentication
10 mins
Creating CustomThemeProvider Component for Theming
9 mins
Setting Up Routes
9 mins
Creating SignIn And SignOut Buttons
13 mins
Building A Header Component
4 mins
Building A Layout Component
11 mins
Building The Home Page
View more lessons +

About the instructor

David Armendariz

Hi! My name is David Armendáriz. I am from the beautiful country of Ecuador.

I studied mathematics at USFQ (Universidad San Francisco de Quito). However, …

Read more
This course is included in Arbington Premium
$15/month gets you access to every course. Start your 14 day trial today. ☝️

Class benefits

  • Certificate of Completion
  • 30 day satisfaction guarantee
  • 24/7 streaming access
  • Project included
  • Direct teacher access
  • 6h 17m of on-demand video
  • Have a coupon?
  • Checkout