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

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!

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!