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

Create a React + TypeScript boilerplate, configure the Node version and Prettier rules, organize dependencies as devDependencies, and enable absolute imports via tsconfig baseUrl for cleaner component paths.

Configure auth0 for a react app by creating an account, selecting a single-page application, copying domain and client id, and centralizing them in a config file with callback and origins.

Install auth0/react and build a typed authentication provider component, placing it under an auth folder; use react-router's history to redirect users back to their intended route after login.

Install Material UI v5 and its styling shifts, then build a reusable loading component using linear progress within a common loading module for a React and TypeScript app.

Create a protected route component to guard app routes using a higher-order authentication wrapper, redirect unauthenticated users to the login page, and show a loading indicator during redirects.

Learn to build a themed React app with a custom theme provider using Material UI, defining common, light and dark color palettes, and dynamic theming with createTheme in TypeScript.

Set up routing for a two-page app (home and code editor) using react-router and browser history, with a theme provider and test routes.

Implement sign in and sign out buttons with Material UI v5 styling, using redirect for sign in and logout to return to the home page, within the header layout.

create the header component using material ui app bar and toolbar, with a home link title and a code editor button that uses history to navigate. render unauthenticated and authenticated button groups, including sign in, sign out, and the code editor button, with plans to add an open workspace button later.

Create a shared layout component in layout.tsx using material ui styled components, accepting children, composing a layout container with a header and a full-height page area for rendering children.

Create the homepage component within a home folder using a shared layout and theme-aware styles, and enable lazy loading with suspense for the code editor page.

Add a programming languages list component to the VS Code clone, use an assets folder of language logos, and render them in the home view with inline styles.

Protect the code editor page with auth0 by using a protected route and lazy loading, then verify sign-in with Google and proper redirects for smooth access.

Explore how Redux and Redux Toolkit simplify managing a global, immutable store with actions, payloads, and reducers, using TypeScript for scalable React apps.

Create a dark mode slice with Redux Toolkit, initialize false, implement toggle reducer to flip the state, and export the reducer and actions for the store and components.

Write and test the dark mode slice by importing the reducer and toggle action, validating that dispatching toggles the state between true and false as a pure function.

Configure a redux store with redux toolkit by combining reducers, including the dark mode reducer, and provide it via a store provider to enable dispatching actions for theming.

Create typed Redux hooks in a React with TypeScript app by wrapping useDispatch and useSelector with RootState and AppDispatch, enabling safe dispatch and state access across components.

Clarify the difference between actions and action creators in a redux setup. Demonstrate how action creators return action objects with type and payload, and how redux toolkit names actions.

Read the dark mode flag from Redux state and dispatch a toggle via a Material UI switch to update UI and theme provider. The lecture covers actions, reducers, and devtools.

Learn to add persistence to a Redux store using redux-persist with Redux Toolkit, configuring local storage, ignoring actions, and a persister and persistor gate for seamless rehydration.

Define a redux toolkit files slice that models user files, active files, and the current active file id, with initial state and a reducer.

Create and manage the files reducer in a React Redux Toolkit setup using TypeScript, handling actions for files, active file, removal, and code updates with immutable update logic.

Learn to test the Redux files reducer by building mock user files, dispatching actions like set files and remove active file, and verifying expected state updates and editor active file.

Continue testing the files reducer by adding update tests that modify a file payload and verify state, including a not-found case to prevent changes.

Create selectors to derive the active files information from state using Redux Toolkit, and apply test-driven development to ensure it returns only active files.

Create a new read file utility in an old utils folder to read files with a webkit file reader, returning id, name, code, extension, and relative path via a promise.

Build file viewer with Material UI tree view to display a hierarchical file system using a recursive render and a file viewer structure interface with id, name, extension, and children.

Create a Redux thunk to open files by dispatching actions that add a file to active files and set the editor active file, handling folders.

Test the open file thunk in a Redux setup using JavaScript mocks for dispatch and getState. Verify opening a note with children, and opening or skipping when already opened.

Create the close file thunk to manage closing a file in the editor, using getState and dispatch to update active files, handling edge cases for single, multiple, and adjacent files.

Create an asynchronous read files thunk with Redux Toolkit to read multiple input files, using Promise.all and dispatching a read files action once all promises resolve.

Write and test the read files thunk by mocking read file calls, dispatching pending and fulfilled actions, and validating two-file read flow and related dispatches.

Build a selector named select preview data that converts a user files array into a dynamic tree view structure, with tests validating the generated folder and file hierarchy.

Create a JavaScript selector that builds a tree view data structure from user files in state, assigning IDs, parsing relative paths, handling folders and files, and returning results for tests.

Create the open workspace button to upload a directory, read files via a directory input ref, and dispatch a Redux batch to populate the store for the code editor.

Create a reusable extension icon component for a VS Code clone using React, featuring a language icon switch, props for extension type, and inline styling.

Build a file viewer component using material ui's tree view and tree item to render folders and files in a recursive structure, with folder icons and extension icons.

Create a custom Monaco Editor component for a VS Code-like app, integrating Monaco Editor with React and TypeScript, enabling language highlighting, theming, and a debounced code update.

Create a custom top panel in the VS Code clone project to manage tab rendering, hide inactive files, and render the active file's editor.

Build a functional custom tab label with extension icon, file name, and a close icon, dispatching a close file action for the active file (id, name, extension) with theme-aware styling.

Wire the code editor container using TSX boilerplate, Material UI components, and Redux hooks to manage the active file and render a scrollable tab bar with custom labels.

Create the code editor page by styling and assembling the file viewer and editor container, integrating Redux-driven file actions and dark mode for a functional React clone.

Wrap up the course by showcasing a growth editor built with React and TypeScript, leveraging Redux Toolkit, UI testing, authentication with protected routes via React Router, and dark mode.