CF

Electron From Scratch: Build Desktop Apps With JavaScript

5h 48m 24s
English
Paid

Electron From Scratch: Build Desktop Apps With JavaScript is a 57-lesson 5 hours 48 minutes self-paced course by Brad Traversy, Udemy. Create 3 useful desktop applications with web technologies using Electron.

Course facts

Lessons
57
Duration
5 hours 48 minutes
Level
All levels
Language
English
Updated
Instructor
Brad Traversy, Udemy
Price
Premium
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.

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

Who teaches Electron From Scratch: Build Desktop Apps With JavaScript?

Brad Traversy

Brad Traversy thumbnail

Brad Traversy is a US developer behind Traversy Media — one of the largest independent web-development YouTube channels, with millions of subscribers and one of the most-viewed introductory tutorial libraries on the platform. He has been publishing daily-or-near-daily web development content continuously for nearly a decade and has anchored a generation of self-taught developers' first exposure to HTML, CSS, JavaScript, and the modern framework landscape.

The course catalog (sold via Udemy and the standalone Traversy platform) covers the full web-development stack: HTML and CSS fundamentals, JavaScript, React (including Next.js), Vue, Node.js, Express, MongoDB, full-stack MERN applications, Tailwind CSS, modern CSS layout, and the surrounding tooling. Brad's teaching style is calm, patient, and deliberately accessible to absolute beginners.

The CourseFlix listing under this source carries over 17 Brad Traversy courses spanning that range. Material is paid and aimed primarily at self-taught developers building real proficiency with web development from a clean start.

Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in Electron From Scratch: Build Desktop Apps With JavaScript?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 57 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome To The Course
All Course Lessons (57)
#Lesson TitleDurationAccess
1
Welcome To The Course Demo
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
Unlock unlimited learning

Get instant access to all 56 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to Electron From Scratch: Build Desktop Apps With JavaScript?

More courses by Brad Traversy

Frequently asked questions

What prerequisites should I have before taking this course?
Before enrolling in this course, you should have a basic understanding of JavaScript, HTML, and CSS. Familiarity with Node.js is also beneficial as the course involves using Node.js modules within Electron applications. Prior experience with web development will help you grasp the concepts more effectively.
What kind of projects will I build in this course?
In this course, you will create three practical desktop applications using Electron. These projects are designed to demonstrate how to build and package cross-platform desktop applications. You will learn to implement features like menu templates, IPC communication, and notifications. For instance, you will work on creating interfaces, utilizing system stats, and managing data with MongoDB.
Is this course suitable for beginners in programming?
This course is not ideal for absolute beginners in programming. It is more suitable for those who have some experience in web development and are comfortable with JavaScript. The course moves quickly through concepts that require a foundational understanding of programming and web technologies.
How does the course content compare in depth and scope to other Electron courses?
The course provides a hands-on, project-based approach to learning Electron, focusing on practical application development. While some courses may offer more theoretical background, this course emphasizes building real-world applications, covering essential aspects like IPC communication, creating and packaging apps, and using tools like Nodemon and Mongoose.
What specific tools and platforms will I use during this course?
Throughout the course, you will work with Electron, a framework for building desktop applications. Additionally, tools such as Nodemon for development, Imagemin for image processing, and MongoDB Atlas for database management are covered. You'll also use Mongoose to interact with the database and Moment.js for date formatting.
What topics or skills are not covered in this course?
The course does not delve into advanced JavaScript or Node.js concepts outside of what's necessary for Electron application development. It also does not cover mobile app development, server-side programming, or advanced database management beyond what is required for the projects.
What is the estimated time commitment required to complete the course?
Although the total runtime is not specified, the course consists of 57 lessons. Considering the hands-on nature and project-based structure, you should expect to spend additional time beyond the video lessons to work on the projects, practice the skills taught, and consolidate your learning. Therefore, be prepared to dedicate a substantial amount of time to complete the course effectively.