138
Lectures
18
Hours
Watch Intro Video

Electron:

If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.

React JS:

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Firebase:

Firebase gives you functionality like analytics, databases, messaging, and crash reporting so you can move quickly and focus on your users.


Course Overview
The first section of the course covers the basics of Electron JS, including its features and concepts like the main and renderer process. The React Library will handle the application's UI portion, and Webpack will be responsible for bundling the source files.


In the second section, multiple views such as Home, Chat, and Settings will be created and a routing system will be integrated to allow navigation between views. Students will learn how to use Firestore queries and manipulate data. The redux architecture will handle state management, storing data in the Firestore database.


The third section will focus on authentication, with the creation of login and register forms, and handling of errors from Firestore. Only logged-in users will have full access to the application.


The fourth section will cover redux middleware and the Notification feature, which will be able to detect changes in a user's online/offline status.


The fifth section will focus on chat management, including chat creation and joining functionality. The online status of a user will be displayed, indicating whether they are online or offline.


In the sixth section, messaging features will be added, allowing users to write and send messages that will be synchronized across all active clients.


The seventh section will involve small adjustments to the Electron environment, including creating an application menu, adding a tray icon, and changing the application icon and splash screen. The final lectures will cover the build configuration, allowing the application to be built into executable files for Windows, Linux, and macOS.


The course now includes an additional app, which teaches students how to initialize an application using Electron Forge. The app is built using React and Typescript, and students will also gain knowledge on integrating ChatGPT into the application.


There is much more covered in the lectures, and students will have the opportunity to work on an application they will hopefully enjoy. The instructor hopes to see students in the course.


Requirements

  • Basic/Mid understanding of JS(ES6) & React JS required!

Course curriculum

  • 2

    Electron Basics

    • Section introduction

      FREE PREVIEW
    • Initialize Electron

    • Create Browser Window

    • More Small Features

    • More about electron, Notifications

    • Chrome vs Electron

    • Node Integration

    • Code Cleanup + Security options

    • Install React

    • Webpack

    • Source Map + Debugging

    • Electron Reload

    • Main & Renderer communication

    • Preload

    • Context Bridge

  • 3

    Building up in React

    • Section introduction

      FREE PREVIEW
    • Initial Layout

    • Separation to components

    • Router

    • Back button & More Views

    • Chat View

    • Link to the chat

    • Firebase

    • Get data from Firestore

    • Dotenv

    • Initial Store

    • Creates Action

    • Chat Reducer

    • Display Chats in lists

  • 4

    Authentication

    • Section introduction

      FREE PREVIEW
    • Welcome View

    • Toggling between forms

    • Get values from form

    • Register User

    • Create user profile

    • Listen to auth changes

    • Auth reducer

    • Logout

    • Login

    • Loading View

    • User In Navbar

    • Auth reducer refactor

    • Displaying Error

    • Login & Register reducer creator

    • Reusable Error Reducer

    • Fetching reusable reducer

    • Provide user to action on login and register

    • Application Refactor & Store provider

    • Auth Route

    • UX Improvements

    • Logout fix

    • withLayout HOC

  • 5

    Middlewares & Notifications

  • 6

    Chat Management

    • Section introduction

      FREE PREVIEW
    • Chat Create View

    • Chat create form

    • Create chat

    • Join chat after create

    • Sort Chats

    • Display Sorted Chats

    • Restart state after logout

    • Join chat

    • Join the chat reducer

    • Subscribe to chat

    • Extract users from 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 change

    • Load chat improvement

  • 7

    Messaging

    • Section introduction

      FREE PREVIEW
    • Messenger component

    • Message object with timestamp

    • Send message action

    • Subscribe to messages action

    • Display chat messages

    • Extract message with author

    • Register message subscription

    • UX messages improvements

    • Scroll on bottom

    • Cleanup after logout

    • Unsubscribe from chats

    • Settings View

    • Settings Reducer

    • Store data in local storage

    • Load Initial Settings

    • Custom Storage

    • Display styling changes

    • Settings Wrap Up

    • Connection fix

  • 8

    Building the App

  • 9

    Bonus: ChatGPT App

    • Init App

    • Security Concerns

    • Integrate React

    • React App Updates

    • Basic Layout + Model Explanation

    • Get Prompt Value

    • Handle Submit

    • Messages

    • Message Type

    • Simulate response

    • Message item component

    • Typewriter effect

    • Typewriter only for AI

    • Context Bridge

    • Describe electron type

    • Get value to main process

    • Get response back

    • Check empty message

    • Setup Open AI Account

    • ChatGPT Explanations

    • Get response from AI

    • Handle Errors

    • Display Error Message

    • Create better prompt

    • Publish the app

Instructor(s)

Software Engineer

Filip Jerga

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains discussion where you can create a post describing an issue. Instructor responds usually within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days from the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.

  • Do I need to watch every lecture of really extensive course?

    Of course not! Every lecture is committed (explained in the introduction section). You can start watching at any lecture, just download the correct version of the project attached to the lecture resources.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "Electron & React JS: Build Desktop Chat App with Javascript"

    $29.00

    Access to this course only.

    Get started now
  • Monthly Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $19.00 / month

    Cancel Anytime!

    Get started now
  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $190.00 / year

    Cancel Anytime!

    Get started now