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

Building a VS Code clone with React (w/ Redux + Typescript), available at $44.99, has an average rating of 3.8, with 50 lectures, based on 58 reviews, and has 313 subscribers.

You will learn about 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 This course is ideal for individuals who are React Developers, JavaScript Developers, Frontend Developers It is particularly useful for React Developers, JavaScript Developers, Frontend Developers.

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

Summary

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

Price: $44.99

Average Rating: 3.8

Number of Lectures: 50

Number of Published Lectures: 50

Number of Curriculum Items: 50

Number of Published Curriculum Objects: 50

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

React Developers, JavaScript Developers, Frontend Developers

Target Audiences

React Developers, JavaScript Developers, Frontend Developers

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!

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

Instructors

David Armendáriz
Mathematician & Software Developer

Rating Distribution

1 stars: 3 votes

2 stars: 5 votes

3 stars: 19 votes

4 stars: 5 votes

5 stars: 26 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!