About | Features | Technologies | License
Summary of the Contents (Click here to Expand it!)
- About
- Features
- Login and Register
- Available Chats and Joined Chats List
- Notification System
- Toggleable Dark Theme
- Channel Creation
- Dynamic Chat Lobby with Messaging
- Technologies
- Installing and Contributing
- What have i learned?
- License
- Contributors
- Author
Talk Talk ChatApp is an Desktop Chat Application that enables people to talk with each other via text. It is built using advanced JavaScript tools, including React.js, Zustand, Electron, Webpack and Firebase.
Talk with your Friends, join or create new communities and socialize with other members.
- Easily create your Email and Password Account while defining your Profile Picture and Username. Or Login in your already existing one..
Demonstration Gif (Click here to Expand it!)
- On the Home Page you can easily Join available channel's and Enter subscribed channels to Chat.
- Channels have a short description and an image.
Demonstration Gif (Click here to Expand it!)
- On the Settings page you can Toggle Notifications On and Off for the App.
- Notifications include a System Alert of your connection Status when going Offline or Online.
Demonstration Gif (Click here to Expand it!)
- On the Settings page you can Toggle Dark Theme On and Off for the App.
Demonstration Gif (Click here to Expand it!)
- On the Home Page there is a New Channel Button that enable's you to Create a Channel.
- to create a new Channel, define its Description, Name, and Image.
Demonstration Gif (Click here to Expand it!)
- Joining any subscribed Channel allows you to Message its others Participants in real-time.
- See which member is Online or Offline by its Status Icon above its Profile Image.
Demonstration Gif (Click here to Expand it!)
In this project it was utilized: Javascript, React, Zustand, Electron, Firebase && Firestore, Webpack, Babel
- JavaScript - The core programming language that powers the project.
- React - The framework for building dynamic user interfaces and managing application state.
- Zustand - A minimalist state management library that simplifies data management and state updates.
- Electron - The platform for building cross-platform desktop applications using web technologies.
- Firebase && Firestore - Firebase provides the backend infrastructure, while Firestore is the real-time NoSQL database for seamless data storage and synchronization.
- Webpack - The build tool that bundles and optimizes your project's assets and dependencies.
- Babel - The JavaScript compiler that allows you to use the latest ECMAScript features and ensures compatibility with older browsers..
To get started, fork the repository and then run the following commands:
- Install NPM packages
npm install- Configure your .ENV Setup your firebase enviroment project for free at - FireBase Console. Creating a RealTime Database, Firestore Database and Authentication
FIRESTORE_API_KEY=<put your key here>
FIRESTORE_AUTH_DOMAIN=<put your key here>
FIRESTORE_PROJECT_ID=<put your key here>
FIRESTORE_STORAGE_BUCKET=<put your key here>
FIRESTORE_MESSAGING_SENDER_ID=<put your key here>
FIRESTORE_APP_ID=<put your key here>
FIRESTORE_MEASUREMENT_ID=<put your key here>
FIRESTORE_DB_URL=<put your key here>- Compile its Files with Webpack
npm run watch (local)
or
npm run build (prod)- Build the Application .Exe and Installer for your operating system
npm run make:linux
or
npm run make:macos
or
npm run make:win- On the generated 'dist' folder, execute the App.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
✏️ To contribute, do the following:
- Fork the Project
- Create your Feature Branch. (
git checkout -b feature/AmazingFeature) - Commit your Changes. (
git commit -m 'Adding some AmazingFeature') - Push to the Branch. (
git push origin feature/AmazingFeature) - Open a Pull Request
With this project i was able to further advance my Technical Skills and Knowledge with Electron and understand how to communicate between its Render(FrontEnd) and Main(BackEnd) to make Api's calls and receive its response on the Render.
I also learned how to easily customize and setup a Electron Enviroment capable of using any Framework by reading JS Source Maps generated by Webpack and its Configs.
Practiced how to Create Custom Menu for the Application, and a Custom Loading View before the App is fully loaded.
Used it's Notification api to create a custom option settings that communicates user's connection status by emiting events between its Render and Main server.
Practiced Good Electron Patterns and Structuring from the beginning, until the end of the project.
Got to understand how to Integrate Webpack and Babel with Electron.
I learned how to setup and configure Electron Builder, to Generate and Publish Electron Apps.
Got to understand how to utilize Firebase's Realtime Database to subscribe to events on the database, and utilize this as a leverage to build the Dynamic Messaging System on the Chats.
Inspired me to abandon Redux and Learn Zustand from sratch and Integrate it on the Project, Adapting it to every Redux situation. And learning to love this minimalistic library
Also did a Secondary Electron App that integrates ChatGPT and uses Typescript too, along with Electron-Forge instead of Electron-Builder, to Build and Publish the new App
Distributed under the MIT License.
Thanks to the following people who contributed to this project in some way:
Nobody yet, see something that you want to improve on this project? Share it with me!.
Made with 💜 and dedication by me Guilherme G Cadilhe Aka: Bobnini.
Used resources: