By David Armendariz, Software Engineer
Building a VS Code clone with React (w/ Redux + Typescript)
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