Electron & React JS: Build a Native Chat App with Javascript

Electron & React JS: Build a Native Chat App with Javascript

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 15 Hours | 7.09 GB

Learn how to build a chat app with Electron & React. Utilize JS, Html, CSS + Firebase(DB) to create a fully native app

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.

In the first section, you are going to learn what Electron JS is and what features it offers. We will learn basic concepts like the main and renderer process among many others. The UI part of the application will be handled by React Library, we will install React and we will prepare Webpack which will be responsible for bundling of our source files.

In the second section, we will create multiple views like Home, Chat, Settings views, and many others. We will integrate the routing system so we can navigate between the views. State management of the application will be handled by redux architecture and the data will be stored in the Firestore database. I will show you how to use Firestore queries, how to fetch and manipulate data.

The third section will be dedicated to authentication. We will create a login and register form and I will teach you how to handle errors coming from Firestore. Only logged in users will have full access to our application.

In the fourth section, we will explain redux middleware and we will work on the Notification feature. The application will be able to detect whether the user is offline or online. Connection changes will be displayed by the Notification system.

In the fifth section, we will be working on chat management features. The first one will be chat create functionality. After the chat will be created it will be displayed in the list of available chats. Upon clicking on the join button chat will be joined and added into the list of joined ones. The online status of a user will be displayed when the user will be joined in the chat. A green dot will indicate that the user is online, the gray dot will be reserved for offline status.

In the sixth section, we will be working on the messaging feature. Users will be able to write a message and send it out to our Firestore database. Our Application will be able to detect new messages and display them in the current active chat. Messages will be synchronized amongst many active clients.

Next, we will work on the settings view. Users will be able to change the global settings of our application. Settings will affect mostly the theme of our application and the way how Notifications work. We will store settings in local storage so we are able to retrieve them in the next load of our application.

In the seventh section, we will work on small adjustments in the Electron environment. We will create an application menu with multiple settings. We will add a tray icon to the top or bottom menu of our operating system. We will change the icon of our application and we will start working on the splash screen. The splash screen will be displayed before our main application will be fully loaded. In the last lectures, we will prepare the build configuration and will build up our application into executable files that can run on Windows, Linux, and macOS.

That’s it from the preview. There is much more covered in the lectures. I hope you like the application we are going to work on and I hope to see you in the course.

What you’ll learn

  • Understand how Electron JS works
  • Create a “real-life” chat application
  • Create native apps with Javascript, Html + CSS
  • Lean how to use React JS in combination with Electron
Table of Contents

Introduction
1 Introduction
2 How to solve issues

Electron Basics
3 Section Introduction
4 Initialize Electron
5 Create browser window
6 Features of electron
7 More about Electron & Notifications
8 Chrome vs Electron
9 Node integration
10 Code cleanup
11 Install React
12 Webpack
13 Source Map + Debugging
14 Electron reload
15 Main & Renderer communication
16 Preload
17 Context bridge

Working on Layout
18 Section Introduction
19 Initial layout
20 Separation to components
21 Router
22 Back button + More views
23 Chat view
24 Link to the chat
25 Firebase
26 Get data from Firestore
27 Dotenv
28 Initial store
29 Create actions
30 Chat reducer
31 Display chats in the list

Authentication
32 Section Introduction
33 Welcome view
34 Toggling between forms
35 Get value from the form
36 Register a user
37 Create user profile
38 Listen to auth changes
39 Auth reducer
40 Logout
41 Login
42 Loading view
43 User in the navbar
44 Auth reducer refactor
45 Displaying errors
46 Login & Register reducer creator
47 Reusable error reducer
48 Reusable fetching reducer
49 Provide user to action
50 App refactor and store provider
51 Auth route
52 UX Improvements
53 Fix after logout
54 Layout HOC

Middlewares & Notifications
55 Section Introduction
56 Check if application is connected
57 Action to check connection
58 Connection reducer
59 Middlewares
60 Notification util
61 Display notification

Chat Management
62 Section Introduction
63 Chat create view
64 Chat create form
65 Create a chat
66 Join the chat after create
67 Sort chats
68 Display sorted chats
69 Restart the state after logout
70 Join chat
71 Join the chat reducer
72 Subscribe to the chat
73 Extract users from the chat
74 Set active chat to reducer
75 Display joined users
76 Subscribe to profile
77 Unsubscribe from user
78 Check user connection
79 Save user online status to FS
80 Fixing online status after logout
81 Displaying state changes
82 Load chat improvements

Messaging
83 Section Introduction
84 Messenger component
85 Message object with timestamp
86 Send message action
87 Subscribe to message
88 Display messages
89 Extract message with author
90 Register message subscription
91 UX messages improvements
92 Scroll on bottom
93 Cleanup after logout
94 Unsubscribe from chat
95 Settings view
96 Settings reducer
97 Store data in local storage
98 Load initial settings
99 Custom storage
100 Display styling changes
101 Settings wrap up
102 Connection fix

Electron Native Features
103 Section Introduction
104 App menu
105 Multiple windows
106 Dock icon
107 Tray menu
108 Splash screen
109 Splash screen improvements
110 Webpack production
111 Build the app
112 App testing & Course Ending