https://github.com/7yasin/ion-chat
Simple 1:1 real-time chat app built with Ionic Angular and Firebase Realtime Database. Includes email/password auth, chat list, and instant messaging.
https://github.com/7yasin/ion-chat
angular angularfire capacitor chat-app firebase ionic ionic-angular mobile pwa realtime-database typescript
Last synced: 3 months ago
JSON representation
Simple 1:1 real-time chat app built with Ionic Angular and Firebase Realtime Database. Includes email/password auth, chat list, and instant messaging.
- Host: GitHub
- URL: https://github.com/7yasin/ion-chat
- Owner: 7yasin
- License: mit
- Created: 2025-10-23T12:24:55.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-10-23T14:32:29.000Z (3 months ago)
- Last Synced: 2025-10-23T16:30:06.242Z (3 months ago)
- Topics: angular, angularfire, capacitor, chat-app, firebase, ionic, ionic-angular, mobile, pwa, realtime-database, typescript
- Language: TypeScript
- Homepage:
- Size: 2.36 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# IonChat
IonChat is a simple real-time chat application built with **Ionic Angular** and **Firebase**. It allows users to register, log in, start one-on-one conversations, and send messages instantly using Firebase Realtime Database.
This project is intended as a lightweight example for developers who want to learn how chat apps work using Ionic and Firebase.
---
## Screenshots
Dark Theme
Light Theme
Login Page
Register Page
User Chats
---
## Features
- User registration and login (Firebase Authentication)
- Real-time messaging (Firebase Realtime Database)
- Chat list with last message preview
- Start a new chat with any registered user
- Mobile-friendly UI using Ionic components
- Message send sound effect
---
## Tech Stack
- **Framework:** Angular 18, Ionic 8
- **Backend:** Firebase (Auth + Realtime Database)
- **Mobile Runtime:** Capacitor 6
- **Language:** TypeScript
---
## Installation
### 1. Clone the project
```bash
git clone
cd IonChat
````
### 2. Install dependencies
```bash
npm install
```
### 3. Configure Firebase
Edit the file:
```
src/environments/environment.ts
```
Example:
```ts
export const environment = {
production: false,
firebaseConfig: {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
}
};
```
### 4. Run the app
```bash
npm start
```
---
## Usage
1. Register an account
2. Log in
3. Select a user to start chatting
4. Send and receive messages in real time
---
## Project Structure
```
src/
app/
login/ # Login page
register/ # Register page
home/ # Chat interface
services/ # Firebase service
assets/ # Images, sounds
environments/ # Firebase config
```
---
## Database Architecture (Firebase Realtime DB)
| Node | Purpose | Structure (Key Fields) |
|------------|------------------------------|-----------------------------------------------------------------------------------------|
| users | Stores registered users | `userId → { username, email, password }` |
| chats | Chat sessions between users | `chatId (userA_userB) → { createdAt, messageKey: { message, sender, timestamp } }` |
| messages | Global message log (optional)| `messageKey → { message, sender, receiver, timestamp }` |
---
## Future Ideas (Optional)
* Group chats
* Profile images
* Message read indicators
---
## License
This project is open source and available under the MIT License.