Full VSCode Clone With Electron JS, React JS, Monaco Editor Library & CSS Grid - Part 1

In this tutorial we are going to be cloning VSCode using Electron JS, React JS, React hooks, TypeScript and Monaco editor library

Please don’t forget to subscribe, it motivates me to do more tutorials like this

What you'll gain from this tutorial
- Using React JS in Electron JS
- CSS Grid
- Interprocess communication with IPC
- Creating context menu and top menu
- Creating files in electron js
- Editing files in electron js
- Loading and displaying the content of a directory in electron js
- Integrating monaco text-editor library

00:00:00 - 00:14:20 - introduction and demo
00:14:20 - 00:39:21 - Project setup and configuration
00:39:21 - 00:53:19 - Initialisation, brief introduction and routing setup
00:53:19 - 01:07:32 - UI Layout setup with CSS grid
01:07:32 - 01:56:43 - UI development
01:56:43 - 04:27:16 - Interprocess connection using IPC, preload file setup, selecting and loading directory content into the project, and additional UI development
04:27:16 - 05:54:00 - Setting up Monaco editor library, displaying file contents in Monaco editor and editing files
05:54:00 - 06:33:38 - Footer content UI development and implementing line and column number with Monaco editor event
06:33:38 - 07:39:01 - Designing the file tab
07:39:01 - 08:01:56 - Saving Files
08:01:56 - 09:01:52 - App Menu and context menu for folder and files implementation
09:01:52 - 09:31:33 - header design
09:31:33 - End - Creating files, Selecting New Folder and other things

Links

Link to the lesson files on my github repository - Please star and fork the repository
OR clone it on the CLI with

Electron JS documentation
Electron Menu
Electron Forge
Electron Forge React
Monaco Editor GitHub repo
Short Doc
Monaco editor webpack plugin
Electron Store
SVGR
React Perfect Scrollbar
Redux toolkit
React Navigation
React router Hash router
URL loader
VSCode Figma
Seti UI icon
Codicon repo
Codicon on iconify
VSCode Icon themes

Additionally you can also take professional job mock interviews and get instant reviews including resume reviews

#vscode #monaco #texteditor #electronjs

[aaditya_ai]

You are the among best in the ecosystem ! 👍🏻

Keep it up !

[ReconVirus]

This is awesome, and thank you so much for taking the time to do this and sharing it. I honestly am learning alot as im following your videos, im applying that my project.

just the shire knowledge and reasoning behind everything and why its done this way or that way is just the cream of the crop

[salkohajric]

Awesome project. Keep up the great work!

[philipmwangi]

This is awesome. I'm here to learn.

[codewithmarios]

it does not bring me the full folder structure and when i press the folder to open more files it has nothing! Please help me

[seanshaf]

How do i run this project on my mac after npm install? Npm start doesnt work :(

[PettyRita-og]

Harris Sharon Rodriguez Kevin Martinez Matthew