ChatterUp is an interactive real-time chat application designed to facilitate seamless communication and interaction between users. Built using Node.js, Express.js, Socket.io, and MongoDB, it offers a robust and engaging chat experience.
ChatterUp utilizes WebSockets via the Socket.io library, enabling real-time, bidirectional communication between users.
The project follows modern development practices by employing ES6 Modules for code organization, ensuring maintainability and collaboration.
The chat user interface is thoughtfully designed to enhance the user experience. It features components for seamless chatting and a notification panel displaying online users.
New users are prompted to provide their name upon joining ChatterUp for the first time. A warm welcome message is displayed in the header with their name.
Newly joined users have access to chat history and receive real-time information about the number of users currently online.
Messages sent by users are broadcasted to all connected users in real-time and securely stored in the database for future reference.
A 'typing...' indicator is displayed to all connected users as users type messages, indicating which user is currently typing.
When a new user joins, their name is added to the notification panel with an online symbol (green dot), and all connected users are notified.
When a user leaves the application, the notification panel is updated to reflect the remaining connected users.
Each user has an associated profile picture displayed throughout the conversation, ensuring consistent visual identity.
Chat messages display the user's name, profile picture, message content, and timestamp for a comprehensive chat experience.
Follow these steps to build the ChatterUp project:
- Set up an Express.js application and configure necessary settings.
- Initialize a MongoDB database (using MongoDB Atlas or similar service) to store chat messages and user data.
- Install required project dependencies, including Node.js, Express.js, Socket.io, and Mongoose.
- Develop a user-friendly chat UI using HTML, CSS, and JavaScript or a modern front-end framework (e.g., React, Angular).
- Design and integrate components for chatting and a notification panel displaying online users.
- Ensure the UI is responsive and visually appealing.
- Implement a user onboarding process where new users provide their name and display a welcome message.
- Use front-end forms to collect user input and provide a smooth onboarding experience.
- Enable new users to access chat history, allowing them to catch up on previous conversations.
- Implement real-time updates for the count of users who have joined the chat.
- Utilize Socket.io to broadcast 'typing...' events to connected users.
- Implement front-end logic to display and remove typing indicators as users start and finish typing.
- Implement real-time message broadcasting to all connected users.
- Ensure that messages are securely stored in the database for future retrieval.
- Design the notification panel to update in real-time when a new user joins the chat.
- Use Socket.io to broadcast notifications of new user joins in real-time.
- Use Socket.io to broadcast user disconnection events in real-time.
- Store default profile pictures and consistently display them for each user.
- Create templates for chat message display, including the user's name, profile picture, message content, and timestamp.
- Use front-end components to render messages for all connected users.
The API structure for ChatterUp includes routes for rendering the UI, managing user authentication, handling chat messages, and more.
##Screenshots
- Home
- Message
