موقع تواصل ChatApp
تفاصيل العمل
SmackChat – Real-Time Vue.js Chat App
SmackChat is a sleek and responsive real-time chat application built with Vue.js and Firebase. It provides a smooth messaging experience between registered users, with support for light/dark mode, live status updates, and a dynamic user interface.
Technologies Used
Vue.js (Composition API)
Firebase Authentication
Firebase Realtime Database
HTML5 & CSS3
Font Awesome Icons
---
Features
Authentication
Firebase-powered user sign-up and sign-in.
Persistent login sessions with auto-redirect.
Friendly error handling for incorrect credentials.
Real-Time Chat
Instant message sending and receiving using Firebase Realtime Database.
Automatically scrolls to the newest messages.
Typing indicators (if implemented).
Display timestamps on each message.
??? Contacts & Conversations
Dynamic contacts list fetched from Firebase.
New conversations are added automatically when users start chatting.
Unread message indicator: Users see when a conversation has new messages they haven’t opened yet.
Light/Dark Mode Toggle
Beautiful dark mode/light mode switch with animated icons (sun/moon).
Theme preference is remembered across sessions.
Responsive Design
Fully responsive and mobile-friendly UI.
Clean layout optimized for both desktop and smartphone users.
? Navigation Control
Certain pages (like the chat screen) are protected from direct URL access unless the user is authenticated or has a valid access code.
️ Additional Features
Animated user dropdown menu (profile, settings, logout).
Custom status messages (e.g., "user is typing...") (optional).
Firebase data is optimized using onDisconnect and smart listeners.
---
Folder Structure Highlights
components/ – Reusable Vue components (chat box, user list, toggles, etc.)
views/ – Main route views like Login, Register, Chat, Contacts
firebase/ – Firebase setup and configuration
store/ – Vuex or custom reactive state handling for user/session data (if used)
---
Hosting
Hosted on Netlify using GitHub deployment.
Codebase is private due to sensitive Firebase API keys, but front-end is publicly accessible.
Demo: