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

Buy me a coffee: buymeacoffee.com/paulosab

The tutorial is divided into 2 parts: this video is the part 1, the link to the second part is    • Full VSCode Clone With Electron JS, React ...  

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
https://github.com/paulosabayomi/vsco...
OR clone it on the CLI with
git clone https://github.com/paulosabayomi/vsco...

Electron JS documentation
https://www.electronjs.org/docs/latest/
Electron Menu
https://www.electronjs.org/docs/lates...
Electron Forge
https://www.electronforge.io/guides/f...
Electron Forge React
https://www.electronforge.io/guides/f...
Monaco Editor GitHub repo
https://github.com/microsoft/monaco-e...
Short Doc
https://github.com/microsoft/monaco-e...
Monaco editor webpack plugin
https://github.com/microsoft/monaco-e...
Electron Store
https://www.npmjs.com/package/electro...
SVGR
https://www.npmjs.com/package/@svgr/w...
React Perfect Scrollbar
https://www.npmjs.com/package/react-p...
Redux toolkit
https://redux-toolkit.js.org/tutorial...
React Navigation
https://reactrouter.com/en/main/start...
React router Hash router
https://reactrouter.com/en/main/route...
URL loader
https://github.com/webpack-contrib/ur...
VSCode Figma
https://www.figma.com/design/k8Z1DvF0...
Seti UI icon
https://github.com/jesseweed/seti-ui
Codicon repo
https://microsoft.github.io/vscode-co...
Codicon on iconify
https://icon-sets.iconify.design/codi...
VSCode Icon themes
https://code.visualstudio.com/blogs/2...

Create free resumes and cover letters on careerdolphin.com
Additionally you can also take professional job mock interviews and get instant reviews including resume reviews
https://careerdolphin.com

#vscode #monaco #texteditor #electronjs