Skip to content
#3 in ElectronUdemyElectronPaid courseAll LevelsCertificate

Electron From Scratch: Build Desktop Apps With JavaScript (Udemy.com)

Create 3 useful desktop applications with web technologies using Electron

Created by: Brad Traversy

Last updated May 2020

Our take

Based on the ratings of 1,341 students, a sample of their written reviews and the syllabus, as the course stood in May 2020. No course pays to be reviewed.

A short, project-first Electron course from Brad Traversy: about six hours and 59 lectures spread over three small apps, an image optimizer, a live CPU monitor with a tray icon, and a bug logger that pairs React with a MongoDB Atlas database. The syllabus shows the core Electron ideas covered along the way: BrowserWindow, custom menus, IPC between the main and renderer processes, local settings files, and packaging. It suits developers who already know JavaScript and some Node and want to see a working desktop app fast, not a reference on every Electron API.

Reviewers like Traversy's teaching: clear speech, a calm pace, and projects that feel like real utilities rather than demos. Two say it helped them start apps of their own. The big complaint is age. The last update was May 2020, and a steady run of two and three star reviews say package versions have drifted, so following along word for word still means trips to the Electron docs and Google to get each project running, and one reviewer never got the final project to package at all. Some also say the Q&A gets little attention from the instructor, and one reviewer felt it leaned on projects more than on Electron itself.

With 1,340 reviews and a 4.8 average, most students still come away happy, and 348 minutes of content is a lighter commitment than the longer Electron guides it sits beside. Our take: worth it if you are comfortable fixing dependency errors on your own and want a quick, practical tour of what Electron can do. If you need code that runs cleanly on a current Electron release, look at a more recently updated course.

Best forJavaScript developers who want a working desktop app this weekend and can tolerate fixing a few outdated npm packages along the way.
Skip it ifYou want code that runs unmodified on current Electron, or a course that documents every API rather than building apps.

Pros

  • Three finished apps, an image shrinker, a CPU monitor with tray icon, and a React plus MongoDB bug logger
  • Reviewers praise the clear, unhurried explanations and say the projects are fun to follow
  • Covers IPC, menus, tray icons, local data stores and packaging in a compact 348 minutes
  • Shows Electron with both vanilla JS and React, plus a real cloud database

Cons

  • Last updated May 2020, so npm packages and Electron APIs have drifted and projects need fixes to run
  • Low-star reviews say the Q&A goes largely unanswered by the instructor
  • Packaging the final project fails for some students, and one Linux user hit tray and notification issues
Great job explaining and demonstrating. Was very easy to watch and follow. Only issue was that it is some what outdated.
John Lusk, a student

Listed as all levels, but it assumes JavaScript and some Node; one reviewer says anyone without HTML, CSS and a little JavaScript would be lost.

icon
What you will 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

Course content

10 sections · 59 lectures · 5.8 hours of video 2 articles

  1. 1Introduction 3 free previews5 lectures · 17 min
  2. 2Project 1 - Image Shrink App & Getting Started With Electron 2 free previews6 lectures · 28 min
  3. 3Working With The Menu4 lectures · 22 min
  4. 4Interface, IPC, ImageMin & Packaging7 lectures · 53 min
  5. 5Project 2 - SysTop App 1 free preview4 lectures · 23 min
  6. 6System Stats & Renderer Process5 lectures · 40 min
  7. 7Storing Local Data4 lectures · 30 min
  8. 8Tray Icon & Wrap Up6 lectures · 30 min
  9. 9Project 3 - BugLogger App & Creating The React UI 1 free preview9 lectures · 1 hour
  10. 10Main Process, IPC & MongoDB9 lectures · 46 min

Who it is for

The instructor says it suits

  • Developers that want to build desktop apps with web technologies

What you need before you start

  • JavaScript Fundamentals

icon
Course Description

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

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Brad Traversy

Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media which is a successful web development YouTube channel and specializes in everything from HTML5 to front end frameworks like Angular as well as server side technologies like Node.js, PHP and Python. Brad has mastered explaining very complex topics in a simple manner that is very understandable. Invest in your knowledge by watching Brad's courses.

icon
More courses by Brad Traversy

$16.99

$129.99

$84.99

$99.99

$119.99

$11.99

icon
More Electron courses

$84.99

$69.99

$54.99

$54.99

$39.99

$39.99

icon
Reviews

4.6

1,341 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By Lars Spangenberg on 3/1/2023

Very nice course to quickly get started with electron. Very hands-on style of instruction and very clear and easy to follow. One big plus for me with this course is that the projects were some pretty cool little utility apps, which made following along a lot more enjoyable. Overall a great course.

By Matej Lednár on 3/11/2022

Some parts need to update, nice projects, good explanation, the last project recommend to build from scratch, not from the template, it doesn't work for me. I had to watch only. I am using Linux and had to solve some issues, e.g. Tray doesn't work, Notification doesn't work, I used native Notification. Electron doesn't load in the renderer process the same content as in the main process (e.g. Notification issue)

By Steven Aschoff on 1/3/2021

Brad just has an excellent teaching style. Have taken several of his courses and this one does not disappoint. It is a perfect size course for those that already have intermediate web development skills and basic understanding of React and are wanting to understand how to bring electron into the mix. Highly recommend!

By Tiago Manuel Rendeiro Nunes de Pinho on 10/24/2020

Good practical course. Just a couple of remarks: it should highlight to use the authors electron version. I got an error in one of the classes due to be using a higher electron version. This error also highlighted one code practice that apparently should be avoided, which is to extend (subclass) electron classes.

By Guillermo Pineda on 10/22/2020

As always Traversy delivers an amazing experience. This course taught me what I needed to create desktop applications with Electron, and gave me the necessary tools to integrate other technologies and learn even more about it.

By Mitch Klein on 7/15/2020

Excellent course. The project-based approach really worked for me. I feel the course gave me what I need to build electron applications, enough knowledge of the concepts, with pointers to find out more detail as I build applications. Thanks, Brad!

By Muntasir Biojid on 6/21/2020

Another great course from Brad! This was a really great introduction to the world of cross platform desktop app development using well established web dev tools (HTML, CSS, JavaScript...). I have really enjoyed following along and building the projects with Brad. In particular, I am glad that we covered React and MongoDB integration for the third project. The knowledge acquired will help us build substantial and meaningful apps in the future. Thanks Brad! Can't wait to take your next course!

By Jordi Hermoso on 6/17/2020

Very good, love the practical style of learning and Brad's whole vibe. Another great course! Good work. If Brad wanted to enhance learning outcomes, maybe he could get someone else to make a few quizzes, or slides, just to check that we know some key concepts i.e. ipcMain/ipcRenderer Cheers.

By Red Ed on 6/13/2020

Good all around videos. There was one spot in Section 8 or 9 where he said "i will use '_id' instead of 'id' so there wont be any confusion" for a function parameter. I personally thing, that "id" makes it less confusing. because then you can see the difference between the argument vs the object member. Little things like this, i think, would make it more clear on who's data you are using when and where.

By Kaan Yılmaz on 6/2/2020

Yeah that was a good course for starting Electron and gives you ideas. I was interested in Electron, i just wanted to start with Brad, and I've learned a lot. Also these projects are not so in depth or so advanced but as i mentioned really nice to start and useful. Thanks.

Showing all 10 reviews on CourseDuck

Read all 1,341 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 92 / 100