Electron & React JS: Build Desktop Chat App with Javascript
Create React.js chat app with Electron. Use Firebase as the database. Second app, ChatGPT + Electron with Typescript
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.
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
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
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