Electron From Scratch Build Desktop Apps With JavaScript

Create 3 useful desktop applications with web technologies using Electron
Electron From Scratch Build Desktop Apps With JavaScript
File Size :
2.05 GB
Total length :
5h 48m



Brad Traversy


Last update




Electron From Scratch Build Desktop Apps With JavaScript

What you’ll learn

Learn how to build desktop apps with Electron
Create and package 3 complete cross-platform applications
Use IPC to communicate between Main & Renderer Processes
Use Vanilla JS & React with Electron
Create custom menu items, system tray apps and more
Work with local data as well as MongoDB Atlas database

Electron From Scratch Build Desktop Apps With JavaScript


JavaScript Fundamentals


This is a hands on, project based course on learning how to build and package cross-platform desktop applications using Electron. Many popular apps including VSCode, Slack and Skype are built on Electron.We will build 3 appsImageShrink – An app to optimize images for websitesSystTop – RealTime CPU monitor with notifications and system trayBugLogger – CRUD app to track logs which uses React and the MongoDB Atlas cloud databaseSome stuff you will learn:Create app windows with BrowserWindowCreate menus with custom items Menu rolesShell module to open files and foldersCreate system tray icons with context menusApp eventsMain process & Renderer processCommunication between processes with IPCMain & IPCRenderer Packaging Electron apps Creating log filesInteract with system hardwareCreate a data store file with settings dataIntegrate React with ElectronIntegrate a MongoDB database with MongooseSome JavaScript stuff that you may not have known


Section 1: Introduction

Lecture 1 Welcome To The Course

Lecture 2 Electron: What & Why?

Lecture 3 How Electron Works

Lecture 4 Environment & Code Repo

Lecture 5 Links

Section 2: Project 1 – Image Shrink App & Getting Started With Electron

Lecture 6 Project Intro

Lecture 7 Setup & BrowserWindow

Lecture 8 Loading a Window File & Adding an Icon

Lecture 9 Important! Absolute Icon Paths

Lecture 10 Environment & Platform Check

Lecture 11 Using Nodemon With Electron

Section 3: Working With The Menu

Lecture 12 Creating a Menu Template

Lecture 13 Menu & Global Shortcuts

Lecture 14 Menu Roles

Lecture 15 Open Window From Menu

Section 4: Interface, IPC, ImageMin & Packaging

Lecture 16 Creating The Interface

Lecture 17 Renderer Node Integration

Lecture 18 IPC Communication

Lecture 19 Implementing Imagemin & Plugins

Lecture 20 Send Events To Renderer

Lecture 21 Creating Log Files

Lecture 22 Package & Test Our App

Section 5: Project 2 – SysTop App

Lecture 23 Project Intro

Lecture 24 Boilerplate Setup

Lecture 25 Template Assets Setup

Lecture 26 Creating The Interface

Section 6: System Stats & Renderer Process

Lecture 27 Static System Stats

Lecture 28 Interval/Dynamic System Stats

Lecture 29 Progress Bar & CPU Overload

Lecture 30 Notifications API

Lecture 31 Notification Timing

Section 7: Storing Local Data

Lecture 32 Creating a Store

Lecture 33 Set Default Settings To Renderer

Lecture 34 Saving Data To Our Store/File

Lecture 35 Use Settings Data In Monitor

Section 8: Tray Icon & Wrap Up

Lecture 36 Creating a Tray Icon

Lecture 37 Tray Context Menu

Lecture 38 Nav Toggle Menu Item

Lecture 39 MainWindow Class

Lecture 40 AppTray Class

Lecture 41 Package & Test Our App

Section 9: Project 3 – BugLogger App & Creating The React UI

Lecture 42 Project Intro

Lecture 43 React-Electron Boilerplate Setup

Lecture 44 Log State & Table

Lecture 45 LogItem Component

Lecture 46 Formatting Dates With Moment

Lecture 47 AddLogItem Component

Lecture 48 Adding a Log (UI Only)

Lecture 49 Displaying Alerts

Lecture 50 Deleting a Log (UI Only)

Section 10: Main Process, IPC & MongoDB

Lecture 51 Setup MongoDB Atlas

Lecture 52 Connect To Database With Mongoose

Lecture 53 Create Log Model

Lecture 54 Get Logs From Database

Lecture 55 Add Log To Database

Lecture 56 Delete Logs From Database

Lecture 57 Clear Logs Menu Item

Lecture 58 Package & Test Our App

Lecture 59 Custom Icon

Developers that want to build desktop apps with web technologies

Course Information:

Udemy | English | 5h 48m | 2.05 GB
Created by: Brad Traversy

You Can See More Courses in the Developer >> Greetings from CourseDown.com

New Courses

Scroll to Top