Electron From Scratch: Build Desktop Apps With JavaScript

5h 48m 24s
English
Paid

Course description

Create 3 useful desktop applications with web technologies using Electron. 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.
Read more about the course

We will build 3 apps

ImageShrink - An app to optimize images for websites

SystTop - RealTime CPU monitor with notifications and system tray

BugLogger - CRUD app to track logs which uses React and the MongoDB Atlas cloud database

Some stuff you will learn:

  • Create app windows with BrowserWindow

  • Create menus with custom items

  • Menu roles

  • Shell module to open files and folders

  • Create system tray icons with context menus

  • App events

  • Main process & Renderer process

  • Communication between processes with IPCMain & IPCRenderer

  • Packaging Electron apps

  • Creating log files

  • Interact with system hardware

  • Create a data store file with settings data

  • Integrate React with Electron

  • Integrate a MongoDB database with Mongoose

  • Some JavaScript stuff that you may not have known

Requirements:
  • JavaScript Fundamentals
Who this course is for:
  • Developers that want to build desktop apps with web technologies

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

Watch Online

Join premium to watch
Go to premium
# Title Duration
1 Welcome To The Course 04:19
2 Electron: What & Why? 04:35
3 How Electron Works 03:12
4 Environment & Code Repo 05:16
5 Project Intro 03:19
6 Setup & BrowserWindow 06:19
7 Loading a Window File & Adding an Icon 07:09
8 Environment & Platform Check 07:22
9 Using Nodemon With Electron 03:15
10 Creating a Menu Template 07:22
11 Menu & Global Shortcuts 05:01
12 Menu Roles 04:53
13 Open Window From Menu 05:08
14 Creating The Interface 11:10
15 Renderer Node Integration 05:12
16 IPC Communication 07:01
17 Implementing Imagemin & Plugins 13:25
18 Send Events To Renderer 03:30
19 Creating Log Files 05:10
20 Package & Test Our App 07:38
21 Project Intro 03:16
22 Boilerplate Setup 03:52
23 Template Assets Setup 04:42
24 Creating The Interface 10:49
25 Static System Stats 11:08
26 Interval/Dynamic System Stats 09:12
27 Progress Bar & CPU Overload 04:39
28 Notifications API 05:42
29 Notification Timing 09:49
30 Creating a Store 10:02
31 Set Default Settings To Renderer 04:32
32 Saving Data To Our Store/File 09:26
33 Use Settings Data In Monitor 05:34
34 Creating a Tray Icon 06:14
35 Tray Context Menu 05:27
36 Nav Toggle Menu Item 04:29
37 MainWindow Class 04:49
38 AppTray Class 05:44
39 Package & Test Our App 03:10
40 Project Intro 02:33
41 React-Electron Boilerplate Setup 10:19
42 Log State & Table 08:15
43 LogItem Component 09:00
44 Formatting Dates With Moment 03:29
45 AddLogItem Component 08:47
46 Adding a Log (UI Only) 06:14
47 Displaying Alerts 07:13
48 Deleting a Log (UI Only) 03:58
49 Setup MongoDB Atlas 04:19
50 Connect To Database With Mongoose 04:41
51 Create Log Model 04:08
52 Get Logs From Database 08:40
53 Add Log To Database 04:56
54 Delete Logs From Database 04:45
55 Clear Logs Menu Item 08:06
56 Package & Test Our App 04:42
57 Custom Icon 01:27

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Build a Multi-Tenant E-Commerce with Next.js, Tailwind v4, Stripe Connect

Build a Multi-Tenant E-Commerce with Next.js, Tailwind v4, Stripe Connect

Sources: Code With Antonio
In this 20-hour course, you will create your own platform from scratch in the style of Gumroad - a full-fledged multi-vendor e-commerce application, where...
19 hours 52 minutes 3 seconds
MERN 2024 Edition - MongoDB, Express, React and NodeJS

MERN 2024 Edition - MongoDB, Express, React and NodeJS

Sources: udemy
Welcome to the immersion in the MERN Stack! This course will help you master all aspects of building a fully functional "Jobify" application using MongoDB.
19 hours 7 minutes
Full-Stack Web Developer Bootcamp with Real Projects

Full-Stack Web Developer Bootcamp with Real Projects

Sources: udemy
This Course covers full process of web development from scratch till deployment with domain name. We will use Node, Express, MongoDB to build Server side which
22 hours 11 minutes 13 seconds
React Node FullStack - Ecommerce from Scratch to Deployment

React Node FullStack - Ecommerce from Scratch to Deployment

Sources: udemy
Learn to Deploy your fully functioning Ecommerce app to production by using Digital Ocean cloud servers. Learn to add your own custom Domain name. Learn to use Cloudflare's CDN ...
16 hours 15 minutes 14 seconds
Master Electron Framework And Build 5 Advanced Desktop Apps

Master Electron Framework And Build 5 Advanced Desktop Apps

Sources: udemy
Build stunning and advanced desktop applications that matters - with web technologies you already know or heard of (HTML, CSS and Javascript). Desktop applications is a billion ...
8 hours 13 minutes 6 seconds