Skip to content
#4 in ElectronUdemyElectronPaid courseAll LevelsCertificate

Electron & React JS - A Practical Guide for Chat App (Udemy.com)

Create React.js chat app with Electron. Use Firebase as the database. Second app, ChatGPT + Electron with Typescript

Created by: Eincode by Filip Jerga

Last updated November 2023

Our take

Based on the ratings of 321 students and a sample of their written reviews, the syllabus, the course as of November 2023. No course pays to be reviewed.

This is a project course, not a reference. Nearly 18 hours and 138 lectures, Filip Jerga builds a working desktop chat app with React, Firebase and Redux inside Electron, then adds a second, smaller ChatGPT app with Electron Forge and TypeScript in a 25-lecture bonus section. It's aimed at people who already write React and want to see how a real app fits into Electron's main and renderer processes. The requirements list says basic ES6 and React, and reviewers agree that is the honest minimum. One says it is no place to learn React from scratch.

Students like the teaching. Reviewers call it clear and easy to follow, and several single out the explanation of secure communication between the main and renderer processes as the thing they couldn't find anywhere else. Several also mention that he answers questions in the Q&A, though one two-star review says the opposite. The big complaint is age. Udemy lists a November 2023 update, but review after review says the Firebase, react-router-dom and package setup no longer match current versions, and that things break past the second section. Some students enjoyed fixing that themselves. Others say they leaned on outside searches more than on the course.

Value depends on tolerance for debugging. The rating breakdown is healthy, 172 five-star and 104 four-star against 18 at one or two stars, and the 4.3 average across 321 reviews reflects people who learned a lot while fighting package versions. For developers who want this specific project, Firebase auth and real-time messaging in a desktop shell, and who can pin dependencies, it holds up. Anyone wanting a current, broader tour of Electron's own features should compare Master Electron and Electron From Scratch, its neighbours in our Electron list, first.

Best forReact developers who want one full desktop chat app built end to end, and don't mind pinning package versions.
Skip it ifYou're new to React, or you need a course that works with current Firebase and react-router-dom out of the box.

Pros

  • Clear walkthrough of secure main-to-renderer communication, which reviewers say is hard to find elsewhere
  • Redux, Redux Toolkit, Firestore auth and real-time messaging all built into one working app
  • Reviewers repeatedly note the instructor answers Q&A questions, even about the outdated bits
  • Bonus 25-lecture ChatGPT app adds Electron Forge and TypeScript to the mix

Cons

  • Firebase, react-router-dom and package setup are outdated; several reviewers say things break past section two
  • Assumes React already; one reviewer calls it basically a React course, another says it is not for beginners
  • No quizzes or exercises, and few Electron-only features beyond menu, tray icon and build config
Learned a lot, so I hate rating it average, but it is very outdated past Section 2.
Chad Thweatt, a student

Listed as all levels, but the requirements ask for ES6 and React, and one reviewer says true beginners will struggle.

icon
What you will learn

  • Understand how Electron JS works
  • Create a "real-life" chat application
  • Create native apps with Javascript, Html + CSS
  • Learn how to use React JS in combination with Electron

Course content

9 sections · 138 lectures · 18 hours of video

  1. 1Introduction 2 free previews3 lectures · 14 min
  2. 2Electron Basics 1 free preview15 lectures · 2.2 hours
  3. 3Working on Layout 1 free preview14 lectures · 2.4 hours
  4. 4Authentication 1 free preview23 lectures · 3.2 hours
  5. 5Middlewares & Notifications 1 free preview7 lectures · 42 min
  6. 6Chat Management 1 free preview21 lectures · 2.9 hours
  7. 7Messaging 1 free preview20 lectures · 2.4 hours
  8. 8Electron Native Features 1 free preview10 lectures · 1.1 hours
  9. 9Bonus: ChatGPT App25 lectures · 2.7 hours

Who it is for

The instructor says it suits

  • Developers looking for a very practical guide
  • People wanting to utilize web technologies(JS, Html, CSS) to create native apps
  • Developers looking for an easy way to create native applications

What you need before you start

  • Basic understanding of JS(ES6) & React JS required

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 : 86 / 100

icon
Course Description

Electron: Transform your web development skills into desktop app creation with Electron. This powerful framework streamlines the process of building native applications, utilizing familiar web technologies such as JavaScript, HTML, and CSS. By letting Electron handle the intricacies, you can focus on the core elements of your application.


React JS: Explore React, the library that makes interactive UI creation seamless. Design simple views for each state in your application, and watch as React efficiently updates and renders the appropriate components when your data changes.


Firebase: Unlock the potential of Firebase, a platform that provides analytics, databases, messaging, and crash reporting. Accelerate your development process and keep your focus on delivering a user-centric experience while Firebase manages the backend complexities.


Course Overview:


  1. Electron Basics:

    • Gain a solid understanding of Electron concepts.

    • Explore the main and renderer processes.

    • Utilize React for UI design and Webpack for efficient source file bundling.

  2. View Creation and Firestore Integration:

    • Develop multiple views (Home, Chat, Settings) with integrated routing.

    • Utilize Firestore queries for data manipulation.

    • Implement state management using the Redux architecture.

  3. Authentication:

    • Create secure login and register forms.

    • Handle errors from Firestore.

    • Restrict application access to logged-in users.

  4. Redux Middleware and Notifications:

    • Explore advanced Redux middleware concepts.

    • Implement a Notification feature for tracking user online/offline status changes

  5. Chat Management:

    • Focus on creating and joining chats.

    • Display user online status in real-time.

    • Enhance the chat interface for a seamless user experience.

  6. Messaging Features:

    • Add real-time messaging capabilities.

    • Enable users to write and send synchronized messages across all active clients.

  7. Electron Environment Adjustments:

    • Fine-tune the Electron environment.

    • Customize the application menu, tray icon, and appearance.

    • Configure build options for Windows, Linux, and macOS.

Bonus Content:


  • Electron Forge App:

    • Initialize an app using Electron Forge, integrating React and Typescript.

  • ChatGPT Integration:

    • Gain insights into integrating ChatGPT into your application.

Embark on a comprehensive learning journey with hands-on projects, and elevate your development skills. Join us to build exciting applications and unlock the full potential of Electron, React, and Firebase. See you in the course!

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

Eincode by Filip Jerga

At Eincode, our mission is to deliver the best online learning experience for our audience.

We specialize in creating high-quality content, with programming concepts brought to life through real-world projects. Whether you're exploring web development or mobile app creation, Eincode is your trusted resource for comprehensive and practical programming guides.

If you're seeking complete, in-depth courses to enhance your skills, Eincode has you covered.

Our instructor, Filip Jerga, is dedicated to sharing his expertise and regularly publishes courses designed to help you achieve your coding goals.

icon
More courses by Eincode by Filip Jerga

$84.99

$89.99

$69.99

$69.99

$84.99

$59.99

icon
More Electron courses

Free

$64.99

$84.99

$69.99

Free

$54.99

icon
Reviews

4.3

321 ratings on Udemy

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

By Orxan Şirinov on 3/21/2024

22.03.2024 (async() => { console.log(`a year ago I wanted to buy this course but because of the comments I didn’t buy it. Now I trusted my Java script to experience and bought the course despite the comments that said that the course was old and nothing worked. I've been programming for 7 years now. make all npm packages like the teacher and everything will work fine for you. Let’s not forget that it was in these old packages that such applications as VSCODE, Discord and GitHub were created. I’ll say that I know very little English, despite this, this course is better than all the ones I came to just for the sake of a hobby. Don't believe bad comments. both the teacher and the lessons are very good. I wish everyone good luck. and thank you to the teacher from the bottom of my heart.`) })();

By Marco B on 10/25/2023

Not entirely bad but definitely outdated. So outdated for react-router-dom, and even the setup for firebase. I literally had to use chatGPT in order to continue with the course. If the instructor re-records all these outdated sections I will change my review. If you're a beginner this is definitely not a good place to start.

By David Martin on 10/3/2023

This was an outstanding class. I didn't know anything about Electron prior to starting the class and now I am able to create the program that I need to write. Filip is an outstanding teacher. He is the most responsive teacher I have experienced on Udemy. I would highly recommend taking this course. Thanks Filip!

By Jason Tjahjono on 1/8/2023

The course was great! I really learned a lot. However, take note that this course is fairly outdated, so I had to do a lot more research to update everything to the current version. It's not Filip's fault, and it was interesting to do some research myself. I would love for Filip to cover more Electron-specific features like Global Shortcuts, etc. But overall, amazing course, Thank You So Much!

By Data Sage on 9/19/2022

Filip is great, This is one of the few courses on Electron that will correctly walk you through how to interface with Electron correctly. I really wanted to give this course 5 stars and I will change this review if. 1. Material is updated and brought into 2022 era. I must admit that even with some of the things being outdated Filip answered and helped me with every problem I ran into. Thanks so much Filip, if you update the course please send me a message and I will move this to 5 stars!!!

By Wegis Silveira on 11/15/2021

I'm enjoying the course, it's great material and I am really getting a good idea about Electron. The only negative point for me is that I believe the teacher could be a little more straightforward when explaining things, what would make the classes shorter and easier to keep focused on them. I'm not saying that he should cut parts out of the course, but from my perspective there are somethings that are not so relevant at this point, and other things that do not need to be repeated. But that's what I think, maybe for others the way it is is the way it should be.

By Sascha Lippert on 1/3/2021

in general good - some things that could be improved: -some parts were very repetitive -it was not explained what the benefit of redux vs a straightforward state implementation was. i am puzzled if redux makes sense for a small app or not. -i am missing how to communicate from main.js to render.js -no information on permissions in firebase - how to make sure user cannot modify data owned by another user? does this work out of the box or not? -how can i package images, fonts, etc with webpack? what is the best strategy to package assets? (webpack, build script, etc) -node child processes

By Philip Spelman on 12/31/2020

I appreciated how responsive Filip was when I ran into issues. He seemed to be very knowledgable about the frameworks. Something I appreciated about the course is the fact that he keeps the occasional little mistake in the video and we get to see how he goes about debugging. This course has a lot of content. While I was hoping to get more information on the inner workings of React + Electron, I have found that combining this course with a course on Electron and a separate course on React was REALLY helpful. If you want a reasonably solid jumping off point for messing around with a react app in an electron framework, I think this is a nice starting point.

By Siegfred Balona on 11/8/2020

This is the complete package to learn Electron.js. It has all the awesome goodies that a developer wants. Integration with React, Redux, Firebase, etc. Many thanks to Filip for making this course. Hope to see more content and courses from you in the future. Cheers!

By Guillaume Grassiant on 10/15/2020

Amazing course, really easy to follow along and you can even skip to the GitHub branch for each video if you feel comfortable with the topic at hand and want to fast forward. Great app, learned a lot on the Firebase real-time capabilities. Thanks, Filip for this great course.

Showing all 10 reviews on CourseDuck

Read all 321 reviews on Udemy