Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Building a VS Code clone with React (w/ Redux + Typescript)
Rating: 3.9 out of 5(58 ratings)
322 students

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

Learn how to build a VS Code clone with Redux, Typescript, Auth0, Material UI and Jest
Last updated 10/2021
English

What you'll learn

  • React
  • Typescript
  • Redux
  • Redux Toolkit
  • Redux Thunks (createAsyncThunk, synchronous thunks)
  • Material UI
  • Implementing Dark Mode with Material UI
  • Authentication with Auth0
  • React Router DOM
  • Testing business logic with Jest
  • Redux Persist
  • Selectors with Reselect

Course content

7 sections50 lectures6h 21m total length
  • Introduction1:49
  • Defining the Code Editor App requirements3:03
  • BONUS: Join the community!0:07
  • Installing Node.js with NVM4:14
  • The repo for this course0:10

Requirements

  • Basic knowledge of React and JavaScript

Description

UPDATE: This course has been updated to provide the best audio/video quality and better explanations.

________________________________________________________________________________________________________________________________________________

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!

Who this course is for:

  • React Developers, JavaScript Developers, Frontend Developers