Syed Ahsan Hasan Khan
$18/hr
Experienced full-stack developer specializing in building scalable web applications and platforms.
- Reply rate:
- -
- Availability:
- Hourly ($/hour)
- Location:
- London, England, United Kingdom
- Experience:
- 6 years
A chat webapp for 1:1 communication.
Web Application Documentation: Portfolio Chat Application
1. Overview
The Portfolio Chat Application is a real-time, one-on-one chat platform integrated into a personal
portfolio project. It highlights interactive communication features, showcasing development
expertise in building modern web applications.
Key Technologies:
●
●
●
●
●
Frontend: Angular 16 for a dynamic and responsive user interface.
Backend: Node.js to handle server-side logic and APIs.
Database: MongoDB for data storage, structured around collections for users,
messages, chatrooms, etc.
Real-Time Updates: Pusher.js for instant messaging and online status updates.
Media Storage: Firebase to efficiently manage media uploads such as images, videos,
and audio.
2. Features
2.1 Chat Functionalities:
●
●
●
●
One-on-One Messaging:
○ Allows users to send and receive messages in real time.
○ Adds new chat participants to the contact list or chatrooms panel upon
interaction.
Media Support:
○ Users can share images, videos, documents, audio files, and audio notes within
the chat.
Message Management:
○ Infinite scroll with pagination to load messages seamlessly.
○ Messages can be searched using keywords for better accessibility.
Chat Actions:
○ Mark favorite chats for quick access.
○ Delete entire chat threads if needed.
2.2 User Authentication:
●
●
Email-Based Authentication:
○ Users can log in via their email without requiring passwords.
Google Authentication:
○ Simplifies login using Google OAuth.
2.3 Stories:
●
●
Users can upload media content as temporary stories.
Stories have expiration functionality and track viewers.
2.4 Search:
●
Comprehensive search capabilities:
○ Locate users by name or email.
○ Search for specific messages within a chat using keywords.
2.5 Responsiveness:
●
The application is fully responsive and optimized for a seamless experience across
desktops, tablets, and smartphones.
2.6 Future Enhancements:
●
Features planned for implementation include:
○ Blocking users to prevent unwanted communication.
○ Editing messages to correct or update content.
○ Replying to specific messages for contextual clarity.
3. Database Schema
The MongoDB database uses collections structured to facilitate efficient data handling:
3.1 Collections:
1. users:
○ Manages user details, including email, profile picture, and online status.
○ Key Fields:
■ _id (primary key), email (unique), isActive, onlineStatus, name,
profilePicture, lastLogin.
2. chatrooms:
○ Handles chatroom participants and references to the last message.
○ Key Fields:
■ _id, participants (array of user IDs), lastMessage (reference to
messages).
3. messages:
○ Stores all messages exchanged between users.
○ Key Fields:
■ _id, chatroomId, sender (user ID), content, type (text, image,
video, etc.), isRead.
4. status:
○ Manages user stories with details on expiration and viewers.
○ Key Fields:
■ _id, userId, type (media type), url, isExpired, viewedBy (array of
user IDs).
5. favoritechatrooms:
○ Links users to their favorited chatrooms.
○ Key Fields:
■ _id, userId, chatRoomId.
4. Backend and APIs
4.1 Prominent APIs:
1. Authentication APIs:
○ User registration and login using email or Google OAuth.
○ JWT-based session handling for secure communication.
2. Messaging APIs:
○ Send and receive messages with real-time Pusher.js integration.
○ Support for infinite scrolling and pagination to retrieve message history.
3. Search APIs:
○ Locate users by name or email.
○ Search messages within chatrooms using keywords.
4. Media Handling APIs:
○ Upload and retrieve media files via Firebase storage.
4.2 Additional Services:
●
Firebase is used for storing media files like profile pictures, chat attachments, and story
content.
5. Deployment
The application is currently not deployed and does not include CI/CD pipelines. Deployment
strategies and setup are planned for future iterations.
6. Local Setup
To set up the application locally:
1. Prerequisites:
○ Node.js, MongoDB, and Firebase credentials.
○ Angular CLI for frontend development.
2. Steps:
○ Clone the repository.
○ Install dependencies using npm install.
○ Configure environment files for Firebase and MongoDB.
○ Run the backend server with npm start.
○
Serve the frontend with ng serve.
7. Future Scope
●
●
●
Expansion of features to enhance user experience.
Deployment to a hosting platform with a CI/CD pipeline for automated updates and
testing.
Scalability improvements, including indexing and optimized queries in MongoDB.
8. Screen Shots
