Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Electron Framework

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

Learn how to build a chat app with Electron & React JS. Utilize React JS + Firebase(DB) to create a fully native app
Rating: 4.5 out of 54.5 (79 ratings)
784 students
Created by Eincode by Filip Jerga, Filip Jerga
Last updated 9/2020
English
English [Auto]
30-Day Money-Back Guarantee

What you'll 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

Course content

8 sections • 112 lectures • 15h 3m total length

  • Preview03:34
  • How to solve issues
    09:43

  • Preview01:59
  • Initialize Electron
    10:15
  • Create browser window
    12:09
  • Features of electron
    10:31
  • More about Electron & Notifications
    07:22
  • Chrome vs Electron
    10:06
  • Node integration
    09:51
  • Code cleanup
    05:54
  • Install React
    05:55
  • Webpack
    14:21
  • Source Map + Debugging
    10:54
  • Electron reload
    06:34
  • Main & Renderer communication
    08:26
  • Preload
    07:06
  • Context bridge
    10:17

  • Preview01:54
  • Initial layout
    07:45
  • Separation to components
    13:50
  • Router
    09:40
  • Back button + More views
    10:44
  • Chat view
    13:44
  • Link to the chat
    08:06
  • Firebase
    11:27
  • Get data from Firestore
    12:44
  • Dotenv
    10:25
  • Initial store
    11:44
  • Create actions
    10:00
  • Chat reducer
    12:13
  • Display chats in the list
    07:45

  • Preview02:11
  • Welcome view
    07:08
  • Toggling between forms
    04:54
  • Get value from the form
    06:13
  • Register a user
    10:46
  • Create user profile
    07:50
  • Listen to auth changes
    10:27
  • Auth reducer
    09:31
  • Logout
    06:48
  • Login
    07:09
  • Loading view
    11:44
  • User in the navbar
    11:06
  • Auth reducer refactor
    11:08
  • Displaying errors
    07:53
  • Login & Register reducer creator
    04:04
  • Reusable error reducer
    07:00
  • Reusable fetching reducer
    07:23
  • Provide user to action
    05:40
  • App refactor and store provider
    09:17
  • Auth route
    09:39
  • UX Improvements
    11:36
  • Fix after logout
    09:32
  • Layout HOC
    12:02

  • Preview01:29
  • Check if application is connected
    07:17
  • Action to check connection
    07:43
  • Connection reducer
    07:56
  • Middlewares
    07:10
  • Notification util
    05:52
  • Display notification
    04:03

  • Preview02:08
  • Chat create view
    05:46
  • Chat create form
    07:04
  • Create a chat
    13:53
  • Join the chat after create
    10:22
  • Sort chats
    18:05
  • Display sorted chats
    09:31
  • Restart the state after logout
    02:30
  • Join chat
    08:18
  • Join the chat reducer
    05:15
  • Subscribe to the chat
    08:59
  • Extract users from the chat
    07:00
  • Set active chat to reducer
    09:36
  • Display joined users
    05:14
  • Subscribe to profile
    09:22
  • Unsubscribe from user
    08:54
  • Check user connection
    07:17
  • Save user online status to FS
    11:19
  • Fixing online status after logout
    02:25
  • Displaying state changes
    13:20
  • Load chat improvements
    06:06

  • Preview01:29
  • Messenger component
    08:57
  • Message object with timestamp
    07:15
  • Send message action
    08:31
  • Subscribe to message
    09:05
  • Display messages
    09:26
  • Extract message with author
    12:11
  • Register message subscription
    09:16
  • UX messages improvements
    07:03
  • Scroll on bottom
    04:41
  • Cleanup after logout
    08:25
  • Unsubscribe from chat
    07:50
  • Settings view
    06:46
  • Settings reducer
    05:33
  • Store data in local storage
    08:19
  • Load initial settings
    04:14
  • Custom storage
    05:04
  • Display styling changes
    09:29
  • Settings wrap up
    08:45
  • Connection fix
    02:57

  • Preview03:16
  • App menu
    15:36
  • Multiple windows
    03:19
  • Dock icon
    03:24
  • Tray menu
    02:25
  • Splash screen
    06:12
  • Splash screen improvements
    07:36
  • Webpack production
    05:08
  • Build the app
    11:30
  • App testing & Course Ending
    07:58

Requirements

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

Description

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.


Who this course is for:

  • Developers looking for a very practical guide
  • People wanting to utilize web technologies(JS, Html, CSS) to create native apps
  • Developers looking for an easy way to create native applications

Featured review

Guillaume Grassiant
Guillaume Grassiant
75 courses
24 reviews
Rating: 5.0 out of 56 months ago
Amazing course, really easy to follow along and you can even skip to the GitHub branch for each video if you feel comfortable with the topic at hand and want to fast forward. Great app, learned a lot on the Firebase real-time capabilities. Thanks, Filip for this great course.

Instructors

Eincode by Filip Jerga
Online Education
Eincode by Filip Jerga
  • 4.6 Instructor Rating
  • 1,764 Reviews
  • 13,053 Students
  • 12 Courses

Eincode ensures to provide the best online learning experience for its audience.

High quality content and programming concepts explained in real-life projects are fields where Eincode shines!

Eincode is covering mainly courses focusing on programming guides for web and mobile development. If you are looking for complete and comprehensive guides then Eincode is the right choice for you.

Courses are also published by instructor Filip Jerga.

Cheers & Keep Coding!

Filip Jerga
Software Engineer
Filip Jerga
  • 4.6 Instructor Rating
  • 3,172 Reviews
  • 28,810 Students
  • 16 Courses

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.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.