Teri Meri Baatein - Real-Time Chat Application

A beautiful chat application with a modern gradient UI, real-time messaging, and a responsive design. Built with pure HTML, CSS, and JavaScript, powered by Firebase.

🌟 Features

Core Features

• Instant real-time messaging

• Beautiful gradient background design

• Animated welcome screen

• Room-based chat system

• Participant tracking

• Mobile-optimized interface

Enhanced Experience

• Message reactions
• Reply to messages feature
• Font Awesome icons integration
• Smooth animations
• Welcome messages
• Participant counter
• Room status indicators
• Message menu options

Mobile-First Design

• Touch-friendly interface
• Responsive on all devices
• Custom header design
• Bottom message input
• Floating action buttons
• Smooth scrolling
• Native-like experience

🛠️ Technology Stack

Frontend

• HTML5 with semantic elements
• CSS3 with modern features:
  • Flexbox layout
  • CSS Grid
  • CSS Variables
  • Animations
  • Gradients
  • Glass-morphism effects
• Vanilla JavaScript
• Font Awesome icons
• Google Fonts (Inter)

Backend

• Firebase Realtime Database
• Firebase Authentication

📁 Project Structure

Teri Meri Baatein/
├── index.html          # Welcome page with gradient background
├── create.html         # Room creation page
├── join.html          # Room joining page
├── chat.html          # Main chat interface
├── chat.css           # Chat styles
├── firebase-config.js # Firebase configuration
└── chat.js            # Chat functionality

🚀 Setup Instructions

1. Firebase Configuration

// firebase-config.js
const firebaseConfig = {
    apiKey: "AIzaSyBiD_7so0tTQZpoQkwBsVD1RiSAfCHuHmY",
    authDomain: "namify-b963a.firebaseapp.com",
    databaseURL: "https://namify-b963a-default-rtdb.firebaseio.com",
    projectId: "namify-b963a",
    storageBucket: "namify-b963a.firebasestorage.app",
    messagingSenderId: "876098696052",
    appId: "1:876098696052:web:d394cbdbc52da3d7487221",
    measurementId: "G-Z02DSKN0BN"
};

2. Required Libraries

<!-- Add to your HTML files -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>

💻 Implementation Guide

1. Welcome Page Styling

body {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.container {
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    padding: 40px 30px;
    text-align: center;
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

2. Chat Interface

<div class="app">
    <main class="chat-container">
        <!-- Header -->
        <header class="chat-header">
            <button class="menu-btn" id="menu-toggle">
                <i class="fas fa-bars"></i>
                <span class="notification-badge" id="menu-request-count"></span>
            </button>
            <div class="header-info">
                <h2 class="room-name" id="room-name">Chat Room</h2>
                <div class="room-meta">
                    <span class="room-status">
                        <i class="fas fa-circle"></i> Active
                    </span>
                    <span class="participant-count" id="participant-count">
                        0 participants
                    </span>
                </div>
            </div>
        </header>

        <!-- Messages Area -->
        <div class="messages-area" id="messages">
            <div class="welcome-message">
                <div class="welcome-icon">
                    <i class="fas fa-comments"></i>
                </div>
                <h2>Welcome to the Chat Room!</h2>
                <p>Start sending messages to begin the conversation.</p>
            </div>
        </div>
    </main>
</div>

3. Message Functionality

function sendMessage(roomId, message) {
    const messagesRef = firebase.database()
        .ref(`rooms/${roomId}/messages`);
    
    return messagesRef.push({
        text: message,
        sender: currentUser,
        timestamp: firebase.database.ServerValue.TIMESTAMP
    });
}

function initializeChat() {
    const messagesRef = firebase.database()
        .ref(`rooms/${roomId}/messages`);
    
    messagesRef.on('child_added', (snapshot) => {
        const message = snapshot.val();
        displayMessage(message);
    });
}

🎨 UI Features

Color Scheme

:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --surface-color: rgba(255, 255, 255, 0.95);
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
    --accent-color: #667eea;
}

📱 Testing

1. Device Testing

   • Test on various screen sizes
   • Verify gradient background
   • Check animations
   • Test message interactions

2. Features Testing

   • Room creation
   • Message sending/receiving
   • Reply functionality
   • Participant updates

🔧 Maintenance

1. Regular Tasks

   • Monitor Firebase usage
   • Check error logs
   • Update dependencies

2. Performance

   • Message loading speed
   • Animation smoothness
   • Connection stability

📖 Documentation

For detailed documentation and API references, visit our Wiki.

🤝 Contributing

Please read CONTRIBUTING.md for contribution guidelines.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.