Electron & React JS: Build Native Chat App with Javascript
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.
--- Course Overview ---
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.
Basic/Mid understanding of JS(ES6) & React JS required!
Section introduction
FREE PREVIEWInitialize 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
Section introduction
FREE PREVIEWInitial 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
Section introduction
FREE PREVIEWWelcome 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
Section introduction
FREE PREVIEWCheck if application is connected
Action to check connection
Connection Reducer
Middlewares
Notification util
Display Notification
Section introduction
FREE PREVIEWChat 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
Section introduction
FREE PREVIEWMessenger 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
Section introduction
FREE PREVIEWApp Menu
Multiple Windows
Dock Icon
Tray Menu
Splash Screen
Splash Screen improvements
Webpack Production
Building the app
App testing
Filip Jerga
Every video contains discussion where you can create a post describing an issue. Instructor responds usually within 1 business day.
Within 30 days from the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.
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.
Single Course Access
$29.00
Access to this course only.
Get started nowMonthly Membership
$19.00 / month
Cancel Anytime!
Get started nowAnnual Membership
$190.00 / year
Cancel Anytime!
Get started now