Chatly

A simple chat app powered by Electron JS.

Overview

Chatly is a desktop chat application built using Electron JS, providing a seamless real-time messaging experience in a lightweight and user-friendly environment. Designed to run cross-platform (Windows, macOS, Linux), Chatly demonstrates how to combine web technologies (JavaScript, HTML, CSS) with native desktop features.

Features

• Real-Time Messaging: Instantly send and receive messages.
• Multi-User Support: Chat with multiple users in a common room.
• Desktop Notifications: Get notified of new messages even when the app is unfocused.
• Modern UI: Responsive interface built with CSS and HTML.
• Cross-Platform: Runs on Windows, macOS, and Linux.
• User Presence: See who is online.
• Customizable Settings: Theme and notification preferences.
• Persistent Chat History: Save and load messages across sessions.

Technologies Used

• Electron JS: Desktop app framework
• JavaScript (63.1%): Core logic and messaging
• CSS (21.7%): Styling and layout
• HTML (15.2%): Structure and templates

Getting Started

Prerequisites

• Node.js (v14 or newer)
• npm (comes with Node.js)
• Git (optional, for cloning)

Installation

1. Clone the repository

   git clone https://github.com/Ali-Amir-code/Chatly.git
   cd Chatly

2. Install dependencies

   npm install

3. Run the application

   npm start

   The app window should open on your desktop.

Build for Production

To package the app for your OS:

npm run build

You may need additional configuration for platform-specific builds. See Electron Builder documentation for advanced options.

Usage

• Start the app: Double-click the executable or run npm start.
• Sign in: Enter a username to join the chat.
• Send messages: Type and hit Enter or click Send.
• Change settings: Use the gear/settings icon for theme and notification options.

Project Structure

Chatly/
├── src/                # Main Electron source files
│   ├── main.js         # Electron main process
│   ├── renderer.js     # Renderer process (UI logic)
│   ├── chat/           # Chat logic and components
├── assets/             # Icons, images
├── styles/             # CSS files
├── index.html          # Main HTML template
├── package.json        # Project metadata and scripts
├── README.md           # Documentation

Contributing

Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a feature branch.
3. Commit and push your changes.
4. Open a pull request describing your changes.

Please follow code style, add comments, and test your changes.

License

This project is licensed under the MIT License.

Acknowledgements

• Electron JS
• Node.js
• All contributors!

Contact

For questions, suggestions, or support, contact Ali-Amir-code.