Electron & React JS - A Practical Guide for Chat App

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

4.70 (281 reviews)
Udemy
platform
English
language
Web Development
category
2,567
students
18 hours
content
May 2023
last update
$54.99
regular price

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

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!

Content

Introduction

Introduction
How to solve issues

Electron Basics

Section Introduction
Initialize Electron
Create browser window
Features of electron
More about Electron & Notifications
Chrome vs Electron
Node integration
Code cleanup
Install React
Webpack
Source Map + Debugging
Electron reload
Main & Renderer communication
Preload
Context bridge

Working on Layout

Section Introduction
Initial layout
Separation to components
Router
Back button + More views
Chat view
Link to the chat
Firebase
Get data from Firestore
Dotenv
Initial store
Create actions
Chat reducer
Display chats in the list

Authentication

Section Introduction
Welcome view
Toggling between forms
Get value from the form
Register a user
Create user profile
Listen to auth changes
Auth reducer
Logout
Login
Loading view
User in the navbar
Auth reducer refactor
Displaying errors
Login & Register reducer creator
Reusable error reducer
Reusable fetching reducer
Provide user to action
App refactor and store provider
Auth route
UX Improvements
Fix after logout
Layout HOC

Middlewares & Notifications

Section Introduction
Check if application is connected
Action to check connection
Connection reducer
Middlewares
Notification util
Display notification

Chat Managment

Section Introduction
Chat create view
Chat create form
Create a chat
Join the chat after create
Sort chats
Display sorted chats
Restart the state after logout
Join chat
Join the chat reducer
Subscribe to the chat
Extract users from the chat
Set active chat to reducer
Display joined users
Subscribe to profile
Unsubscribe from user
Check user connection
Save user online status to FS
Fixing online status after logout
Displaying state changes
Load chat improvements

Messaging

Section Introduction
Messenger component
Message object with timestamp
Send message action
Subscribe to message
Display messages
Extract message with author
Register message subscription
UX messages improvements
Scroll on bottom
Cleanup after logout
Unsubscribe from chat
Settings view
Settings reducer
Store data in local storage
Load initial settings
Custom storage
Display styling changes
Settings wrap up
Connection fix

Electron Native Features

Section Introduction
App menu
Multiple windows
Dock icon
Tray menu
Splash screen
Splash screen improvements
Webpack production
Build the app
App testing & Course Ending

Screenshots

Electron & React JS - A Practical Guide for Chat App - Screenshot_01Electron & React JS - A Practical Guide for Chat App - Screenshot_02Electron & React JS - A Practical Guide for Chat App - Screenshot_03Electron & React JS - A Practical Guide for Chat App - Screenshot_04

Reviews

Marco
October 26, 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.
David
October 4, 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!
Guilherme
September 18, 2023
Nada a reclamar!, para o pessoal falando sobre não estar atualizado para a versão atual, o objetivo é aprender a utilizar e criar do começo ao fim, não importa a versão, depois você pode ir adaptando e migrando aos poucos para a versão nova se quiser
Marius
August 9, 2023
Teacher is not present, and don't answer to questions!!! Otherwise is detailed course.!!! Thanks to teacher for his hard work. I have tried for some time now to build a electron and react app, but until now don't find any good explication about the main process and renderer process, and most important of all, how to safely communicate between this two processes. Many thanks Mr. teacher!!! But the entire course is basically a React course!!! And most important thing, the course is not updated to the latest React, Electron and Firestore versions!!! Respectfully, Your student Marius Diaconu
Seiya
April 8, 2023
What I was surprised is that Filip Jerga still responds to many questions from students here. Not only this course but entire courses are worth taking, I think. Awesome!
Jason
January 9, 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!
Data
September 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!!!
Bo
August 6, 2022
A lot of instructions are outdated due to packages upgrade, should specify which version to install for the dependencies.
Pavan
March 13, 2022
Excellent! Contents. Setup steps are super easy and lots of boilerplates code has been provided that helps me to learn faster.
Nour
December 18, 2021
Filip is just a great programmer, I understood the concepts pretty well and learned new things, thank you Filip, really. Filip is also answering all of my questions every time, this course is just amazing!
Wegis
November 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.
Donny
October 29, 2021
Have a lot of points where i think it makes no sense to change or to restructure. Same goes for the outdated course. Faced a lot of issues where there was no solution other than figuring it out by yourself or the www. I can also understand when you make a course it won't be up to date after some time, but please update your videos or add minor videos where you can explain a certain issue or solution. Im totally not against facing issues or figuring out why something is broken, but if i need those things more than the course what is the benefit of taken a course ?
Wellington
July 5, 2021
Eu acredito que o curso ficou muito extenso, poderia ser mais sucinto, no entanto o assunto e o conteudo foram otimos!
Jess
September 29, 2020
Another Amazing course! Filip is a very knowledgeable instructor. He explains everything super thoroughly. Highly recommended!
Mila
September 28, 2020
This course is just awesome! I've always wanted to build a desktop chat app, and this course using Electron and React made it so much easier. The instructor is great, and I learned a ton. Highly recommended!

Coupons

DateDiscountStatus
11/19/202094% OFF
expired
12/10/202094% OFF
expired

Charts

Price

Electron & React JS - A Practical Guide for Chat App - Price chart

Rating

Electron & React JS - A Practical Guide for Chat App - Ratings chart

Enrollment distribution

Electron & React JS - A Practical Guide for Chat App - Distribution chart
3484696
udemy ID
9/8/2020
course created date
9/27/2020
course indexed date
Bot
course submited by