Electron for Desktop Apps

Take your web dev skills out of the browser. This course will teach you the topics you need to make a #1 best-selling desktop app.

What is Electron?

Electron is an elegant solution for writing desktop-based apps using existing web technologies you already know, like Electron is used for ultra-popular apps like Atom, Slack, and Discord.

Who builds desktop apps?.

In the last 10 years there has been a tremendous shift from desktop to mobile, true, but the result is that there is a huge opportunity to create desktop apps, as all other developers have shifted over to building mobile. You can easily get into the front page on the MacOS store with an app you spend a few days building - this would never happen on mobile. The last app you'll build in this course can be easily tweaked into a front-page app.

What Will You Build?

All of my courses are 'learn-by-doing': no boring endless lectures with Powerpoints, only live, interactive coding examples. In this course we'll build four separate apps with increasing complexity, each of which will profile different features of Electron. By putting each concept into a real app, you'll get a better idea of when to use each unique and powerful feature.

Both MacOS and Windows supported.

Apps you'll build:

Video File Analyzer. Learn how to manipulate the underlying OS with this first app, in which you'll build a tool to analyze video files, supported by the This app will get you familiar with Electron, along with an understanding of how to build a basic app.
Cross Window Todo List: Ok, yep, a todo app, I know, but you'll learn how to manipulate multiple windows with Electron, along with customizing the top menu bar. Additional emphasis is placed on cross platform experiences between MacOS and Windows
System Tray Timer. Build a classic system-tray based app - this is the type of app that exists as an icon by the clock on your desktop. You'll learn how to add a ton of polish to common Electron apps, which will make your users assume that they're using a fully native experience.
Video File Converter. Make an app that can convert video files to any other format. Existing apps with the exact same feature set sell for $10 on the MacOS store. This tool is amazingly useful, and is something that I use daily myself.

Here's what we'll learn:

Learn the theory and history behind Electron
Build complex desktop applications using repeatable processes
Assemble both classic desktop apps and 'tray-based' apps
Add polish to your Electron apps, making them feel more native
Sidestep the common pitfalls associated with Electron

I've built the course that I would have wanted to take when I was learning Electron. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.

What's inside

Learning objectives

Learn how to make native-feeling applications using web development technologies
Master the intricacies of development with electron js
Build applications that work well on both macos and windows from a single codebase

Develop both traditional single-window apps and status tray-based apps
Understand how to integrate existing technologies like react and redux into your electron js apps
Build a lucrative business with desktop apps, because there is so little competition in the marketplace

Learn how to make native-feeling applications using web development technologies
Master the intricacies of development with electron js
Build applications that work well on both macos and windows from a single codebase
Develop both traditional single-window apps and status tray-based apps
Understand how to integrate existing technologies like react and redux into your electron js apps
Build a lucrative business with desktop apps, because there is so little competition in the marketplace

Syllabus

Basics of Electron

How to Get Help

Course Resources

Join Our Community!

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Offers hands-on learning opportunties

You will learn about using React and Redux with Electron

Develops some of the essential skills for computer science professionals

Provides a clear overview of Electron, its features, and its origin

It is led by Stephen Grider, who is known for his expertise

Teaches skills that are relevant to the current job market

Reviews summary

Practical electron desktop app development

According to students, this course offers a largely positive and comprehensive guide to building desktop applications with Electron. Learners particularly praise the instructor's clear and engaging teaching style and the practical, hands-on projects that reinforce concepts, such as multi-window management and system tray apps. The course is noted for providing a solid foundation in Electron JS, including integrating React and Redux, which is highly beneficial for web developers. While some users note that Electron's rapid evolution can lead to minor dependency issues or outdated setup steps, the core content and practical application remain highly valuable. The instructor seems to provide updates for best security practices.

The instructor actively updates the course, addressing important aspects.

"The security practices section was a welcome addition. I felt more confident about the applications I was building after that."

"I appreciate that the course gets important updates, which keeps the material relevant even as Electron evolves."

"It's great to see the instructor continuously improving the content, addressing crucial aspects like BrowserWindow updates."

Provides a strong, comprehensive understanding of core Electron development.

"This course is a masterpiece. It's a comprehensive guide, truly for developers who want to dive deep."

"A very solid course for getting started with Electron. The instructor covers the basics well and the hands-on approach is great."

"As a web developer, this course opened my eyes to desktop app possibilities. The cross-platform aspects were well explained."

Practical, real-world projects effectively solidify understanding and application.

"The projects are practical and helped me understand how to build real-world Electron apps."

"The four projects progressively build up my knowledge. The 'System Tray Timer' and 'Video File Converter' projects were especially useful and practical."

"I loved building the apps and seeing how Electron brings web tech to the desktop."

The instructor is highly praised for clear, approachable explanations.

"Stephen Grider is an amazing instructor, explaining complex concepts like IPC and multi-window management clearly."

"Stephen Grider's teaching style is clear, concise, and engaging."

"The instructor is phenomenal, explaining complex topics in a very approachable way."

Some advanced topics like build processes or security could use more depth.

"I found some parts, especially around the build process and native module integration, a bit rushed or lacking in depth for production-ready apps."

"My main criticism is that some explanations could be more thorough, especially regarding security best practices beyond the basics."

"I wish there was more in-depth coverage on complex topics or optimization techniques for larger applications."

Rapid Electron updates can lead to some course material feeling outdated.

"The course is okay, but some parts feel a bit outdated. Electron moves fast, and some dependencies or setup steps have changed, requiring extra troubleshooting."

"While the core content is good, the course feels a bit dated. Electron evolves rapidly, and some modules or practices shown are no longer current."

"I struggled a lot with this course. The setup instructions were not clear for my specific OS... some code examples didn't work right away due to version mismatches."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Electron for Desktop Apps: The Complete Developer's Guide with these activities:

Review JavaScript fundamentals

Show steps

Strengthen your foundation in JavaScript, which is essential for building Electron JS applications, ensuring a smoother learning experience.

Browse courses on JavaScript

Show steps

Review core JavaScript concepts such as variables, data types, and control flow.
Practice writing simple JavaScript programs.
Complete online JavaScript exercises or quizzes.
Build a small JavaScript project to apply your refreshed skills.

Join an Electron JS study group

Show steps

Engage with other learners to discuss Electron JS concepts, share knowledge, and work on projects together, fostering a deeper understanding.

Browse courses on Collaborative Learning

Show steps

Find an existing Electron JS study group or create your own.
Attend regular study sessions.
Participate in discussions and ask questions.
Collaborate on projects with other group members.
Share resources and materials with the group.

Follow a tutorial on Electron JS best practices

Show steps

Enhance your understanding of effective Electron JS development practices, leading to cleaner, more efficient, and maintainable code.

Browse courses on Best Practices

Show steps

Find a tutorial that covers Electron JS best practices.
Set aside time to work through the tutorial.
Implement the recommended practices in your own Electron JS projects.
Evaluate the impact of the best practices on your code quality.

Two other activities

Expand to see all activities and additional details

Show all five activities

Write a blog post about Electron JS

Show steps

Explain the concepts and benefits of using Electron JS for desktop app development, showcasing your understanding of the technology.

Browse courses on Desktop App Development

Show steps

Choose a specific topic related to Electron JS.
Research and gather information on the topic.
Write a draft of your blog post.
Edit and revise your blog post.
Publish your blog post on a relevant platform.

Build a desktop app for a specific problem

Show steps

Apply your knowledge of Electron JS to create a practical solution to a real-world problem, showcasing your ability to design, develop, and deploy desktop applications.

Browse courses on Problem-Solving

Show steps

Identify a problem that can be solved with a desktop app.
Design the interface and functionality of your app.
Develop and implement your app using Electron JS.
Test and debug your app thoroughly.
Deploy your app to users and gather feedback.

Career center

Learners who complete Electron for Desktop Apps: The Complete Developer's Guide will develop knowledge and skills that may be useful to these careers: