A full-stack MERN (MongoDB, Express.js, React.js, Node.js, Socket.IO) online chatting application π¬ with friends additionally with a Personal Chatbot. π€
-
π Authentication:
β¨ SignUp,
π Login,
π² Login with OTP,
πΈ Profile Photo Uploading. -
π¨ Styling/Theming:
π A fully responsive app,
π Dark and βοΈ Light mode. -
π€ Personalized AI Chatbot:
π§ Remembers the context for personalized interactions. -
π Web Sockets:
π¬ Real-time chatting,
π Message Notifications,
ποΈ Real-Time Typing Animation,
β Message Deletion,
π’ Active Now / β Last Seen status tracking,
β Message Seen status,
πΌοΈ Sending Image messages with captions.
Built with the tools and technologies:
Guest User login accounts:
username : [email protected], [email protected]
password: 1234guest
- π Overview
- πΈ Screenshots
- πΎ Features
- π Project Structure
- π Getting Started
- π Project Roadmap
- π° Contributing
- π License
- π About the Author
- π Acknowledgments
The MERN-Chat-App is a cutting-edge solution designed to streamline real-time communication. It leverages the MERN stack (MongoDB, Express.js, React, and Node.js) to offer a robust, scalable chat application. Key features include real-time communication with features like other trending social media applications and seamless integration with cloud services like AWS S3, Google Cloud's AI.
Feature | Summary | |
---|---|---|
βοΈ | Architecture |
|
π© | Code Quality |
|
π | Documentation |
|
π | Integrations |
|
𧩠| Modularity |
|
π§ͺ | Testing |
|
β‘οΈ | Performance |
|
π‘οΈ | Security |
|
π¦ | Dependencies |
|
βββ mern-chat-app/
βββ LICENSE
βββ README.md
βββ backend
β βββ Controllers
β β βββ auth_controller.js
β β βββ conversation_controller.js
β β βββ message_controller.js
β β βββ userController.js
β βββ Models
β β βββ Conversation.js
β β βββ Message.js
β β βββ User.js
β βββ README.md
β βββ Routes
β β βββ auth_routes.js
β β βββ conversation_routes.js
β β βββ message_routes.js
β β βββ userRoutes.js
β βββ config
β β βββ imageupload.js
β βββ db.js
β βββ index.js
β βββ middleware
β β βββ fetchUser.js
β βββ package-lock.json
β βββ package.json
β βββ secrets.js
β βββ socket
β β βββ handlers.js
β β βββ index.js
β βββ uploads
β βββ a
βββ frontend
β βββ README.md
β βββ netlify.toml
β βββ package-lock.json
β βββ package.json
β βββ public
β β βββ android-chrome-192x192.png
β β βββ android-chrome-512x512.png
β β βββ apple-touch-icon.png
β β βββ favicon-16x16.png
β β βββ favicon-32x32.png
β β βββ favicon.ico
β β βββ index.html
β β βββ manifest.json
β β βββ robots.txt
β βββ src
β βββ App.css
β βββ App.js
β βββ App.test.js
β βββ assets
β β βββ newmessage.wav
β βββ components
β β βββ Authentication
β β βββ Dashboard
β β βββ Home.js
β β βββ Navbar
β β βββ miscellaneous
β βββ context
β β βββ appState.js
β β βββ chatContext.js
β βββ index.css
β βββ index.js
β βββ reportWebVitals.js
β βββ setupTests.js
β βββ typingAnimation.json
βββ screenshots
βββ 10_login_otp.png
βββ 1_home.png
βββ 2_login_signup.png
βββ 3_dashboard.png
βββ 4_newchat.png
βββ 5_searching.png
βββ 6_chatting_area.png
βββ 7_send_photo.png
βββ 8_delete_message.png
βββ 9_login_otp.png
βββ banner.png
βββ new_message.png
βββ personal_chatbot.png
βββ typing_animation.png
MERN-CHAT-APP/
__root__
backend
package-lock.json - The file `backend/package-lock.json` serves a critical role in the management and consistency of dependencies within the backend component of the project
- This JSON file locks down the exact versions of the npm packages that the project depends on, ensuring that all environments, from development to production, use the same versions of each package, thereby avoiding discrepancies and potential bugs caused by version mismatches.The dependencies listed within this file suggest that the backend is designed to interact with various cloud services, notably AWS S3 for storage solutions and Google Cloud's Vertex AI and Generative AI for advanced computational and AI-driven tasks
- This setup indicates a robust, scalable backend architecture that leverages leading cloud technologies for data handling and AI functionalities.In the broader context of the project, this file ensures that the backend's dependency management is stable and predictable, which is crucial for maintaining the reliability and efficiency of the system as it interacts with cloud services and handles complex operations
- This is especially important in a microservices architecture or in a scenario where continuous integration and deployment are practiced, as it helps in reducing conflicts during deployments and across team environments.secrets.js - Manages the configuration of environment variables crucial for the application's interaction with external services
- It securely loads settings such as database connections, API keys, and cloud storage credentials from a .env file, ensuring sensitive data is not hard-coded but instead dynamically referenced throughout the application's backend architecture.index.js - Backend/index.js serves as the main entry point for the server, initializing the Express application, configuring middleware, and defining routes for authentication, user management, messaging, and conversations
- It also sets up the HTTP server and integrates socket.io for real-time communication, before launching the server and connecting to the database.package.json - Serves as the configuration backbone for the backend module, defining dependencies essential for the project's operation such as Express for server management, Mongoose for database interactions, and various AWS and Google Cloud services for enhanced cloud functionality
- It also specifies scripts for project operations, notably lacking in test scripts.db.js - ConnectDB establishes a connection to the MongoDB database using environment variables for configuration
- It is designed to facilitate data storage and retrieval for the Conversa Chatapp, ensuring that the application's backend can interact efficiently with the database
- Errors during connection attempts are handled gracefully, with appropriate logging and system exit strategies.Controllers
conversation_controller.js - Manages conversation-related functionalities within the backend of the application, specifically handling the creation, retrieval, and listing of user conversations
- It ensures conversations are populated without sensitive user information and maintains the integrity and privacy of user interactions
- Additionally, it handles error scenarios gracefully, providing appropriate feedback for various failure states.message_controller.js - Manages messaging functionalities within a backend architecture, handling operations such as sending, retrieving, and deleting messages
- Integrates AI for generating responses in conversations and supports image uploads through AWS S3, ensuring interactions are dynamic and responsive in a chat application environment.userController.js - UserController.js facilitates user-related functionalities within the backend architecture
- It includes generating AWS S3 presigned URLs for secure image uploads and retrieving user online status
- This controller ensures efficient file handling and real-time user status updates, enhancing user interaction and data security.auth_controller.js - Manages user authentication and profile operations within the backend architecture, including user registration, login, authentication token generation, profile updates, and OTP handling for secure logins
- It integrates external services for email communication and image storage to enhance user interaction and security.Models
Message.js - Defines a MongoDB model for messages within a chat application, using Mongoose
- Each message links to conversation and user IDs, supports text and image content, tracks reactions, and records which users have seen the message
- It also allows messages to be marked as deleted from users' views and supports replies to other messages.Conversation.js - Defines the data structure for conversations in a messaging application, using MongoDB through Mongoose
- It includes fields for members, latest message, group status, conversation name, and unread message counts per user, enhancing functionality for both individual and group chats
- The schema also supports automatic timestamping for creation and updates.User.js - Defines the User model within the backend architecture, utilizing Mongoose to structure MongoDB documents
- It specifies fields such as name, email, and password with validation rules, and includes additional attributes like profile picture and online status
- This model is essential for managing user data and interactions throughout the application.config
imageupload.js - Imageupload.js configures Cloudinary for image storage and provides a function to upload images
- It sets up environment variables for Cloudinary access and offers an asynchronous upload function that handles both preset and auto resource type uploads, returning the image's secure URL or an empty string on failure.uploads
a - Manages the uploading of files within the backend architecture, specifically handling the storage and preliminary processing of user-uploaded data
- Positioned within the 'uploads' directory, it plays a critical role in data intake and initial validation, ensuring that incoming files meet the system's requirements before further processing or storage operations are conducted.Routes
message_routes.js - Message_routes.js establishes the routing logic for message-related operations within the backend of the application
- It integrates middleware for user authentication and utilizes controllers for handling message functionalities such as sending messages, retrieving all messages, deleting messages, and generating presigned URLs for secure file access.userRoutes.js - UserRoutes.js serves as a routing layer in the backend, directing user-related requests to appropriate controllers
- It handles fetching online status, retrieving non-friend user lists, updating user profiles, and generating presigned URLs for secure file access, ensuring each route is accessed by authenticated users through middleware integration.conversation_routes.js - Manages routing for conversation-related operations within the backend of the application
- It integrates middleware for user authentication and connects to the conversation controller to handle requests for creating, retrieving a specific conversation, and listing all conversations
- This setup ensures secure and efficient interaction management between users.auth_routes.js - Backend/Routes/auth_routes.js establishes the authentication routes for the application, interfacing with the auth_controller to handle user registration, login, and authentication
- It sets up endpoints for registering users, logging in, verifying user identity, and sending OTPs, integrating these functionalities into the server's routing mechanism.socket
index.js - Initializes a Socket.IO server integrated with an existing web server to handle real-time bi-directional communication between clients and the server
- It sets up CORS policy and logs connections, delegating event handling to a separate module for organizing socket interactions
- This setup is crucial for enabling dynamic client-server interactions within the application.handlers.js - Manages real-time communication in a chat application, handling user connections, message sending, and presence updates
- It supports both personal and AI-assisted conversations, ensuring messages are delivered and read statuses are updated, while also managing user online status and emitting appropriate notifications for typing and message deletion events.middleware
fetchUser.js - FetchUser.js serves as middleware within the backend architecture, ensuring secure access to the system by validating JWT tokens
- It checks for the presence of an authentication token in the request headers, verifies it, and on success, attaches the user's data to the request object, allowing subsequent processes to proceed with an authenticated user context.
frontend
package-lock.json - The file frontend/package-lock.json
is a crucial component within the frontend module of the project's architecture
- Its primary function is to maintain a precise record of the exact versions of each dependency used in the frontend application, ensuring consistent environments and behavior across different installations and deployments
- This file supports the frontend's stability by locking down the versions of libraries such as Chakra UI for UI components, Cloudinary for media management, and Emotion for styled components, which are integral for the application's user interface and experience design.In the broader context of the entire codebase, this file ensures that the frontend remains reliable and consistent with the specified versions of dependencies, thereby minimizing potential discrepancies that could arise from version mismatches during development or deployment phases
- This is particularly important in maintaining the overall health and predictability of the software development lifecycle within the project.netlify.toml - Configures global redirects and headers for the frontend service, ensuring all requests are rerouted to the root path and enhancing cross-origin resource sharing by setting universal access permissions
- This setup is crucial for maintaining a seamless user experience and facilitating external integrations across the entire web application.package.json - Serves as the configuration backbone for the frontend module, specifying dependencies essential for the user interface's design and interactivity
- It includes libraries for UI components, animations, and testing, ensuring a robust, visually appealing, and well-tested application
- Additionally, it defines scripts for project operations like starting, building, and testing the application.src
index.css - Establishes the foundational styling for the web application's user interface, setting global font properties and smoothing settings to ensure text appears consistently and clearly across various operating systems and browsers
- It also specifies a monospace font for code elements, enhancing readability and maintaining a uniform appearance for code snippets.App.css - Defines the styling for the main user interface components of the frontend application, focusing on layout, animations, and color schemes
- It ensures the application's visual consistency, enhancing user experience by providing a visually appealing and responsive interface across various devices and motion preferences.App.test.js - App.test.js serves as a unit test for the App component within the frontend architecture, ensuring the main user interface renders correctly
- It specifically verifies the presence of a "learn react" link, contributing to the overall reliability and maintainability of the user interface by catching regressions or errors early in the development cycle.setupTests.js - Enhances testing capabilities within the frontend module by integrating custom Jest matchers from jest-dom
- This setup facilitates more expressive assertions on DOM nodes, improving the clarity and efficiency of tests
- It supports developers in writing more maintainable and robust tests for the React components, ensuring better quality assurance across the user interface.App.js - App.js serves as the primary container component in the frontend architecture, integrating the application's styling, state management, and main user interface components
- It utilizes the Chakra UI for theme toggling and context for managing chat functionalities, encapsulating these features within the Navbar component to streamline user interactions.reportWebVitals.js - ReportWebVitals.js enhances the application's performance monitoring by dynamically importing and utilizing web vitals metrics such as CLS, FID, FCP, LCP, and TTFB
- It provides a mechanism to capture and analyze key performance indicators, crucial for optimizing user experience across the frontend architecture of the project.index.js - Serves as the entry point for a React application, initializing the root component with global styles, routing, and context providers
- It configures routes for the home page and dashboard, wraps the application in a Chakra UI provider for consistent styling, and manages user authentication state
- Additionally, it sets up performance monitoring.typingAnimation.json - The file frontend/src/typingAnimation.json
serves as a configuration for a visual typing indicator animation within the broader architecture of the project
- This JSON file defines the properties and behavior of an animation sequence intended to visually represent typing activity, commonly used in user interfaces to indicate that a process is ongoing, typically in messaging applications or loading sequences.The animation is characterized by a simple, loopable sequence involving dots that appear to move or blink, simulating the familiar "someone is typing" indicator in chat applications
- The file specifies parameters such as frame rate, duration, dimensions, and detailed keyframe information for the animation of individual elements (dots)
- This configuration ensures that the animation is both visually appealing and performs efficiently across different devices, enhancing the user experience by providing a dynamic and responsive interface element.This file is a crucial component of the frontend's visual feedback system, contributing to the intuitive and interactive nature of the user interface by informing users of ongoing processes in a non-intrusive manner
- Its integration into the frontend codebase underlines the project's commitment to polished and user-centric design.components
Home.js - Home.js serves as the entry component for the Conversa online chatting application, managing user authentication and navigation
- It dynamically redirects authenticated users to the dashboard and provides modal-based interfaces for login and signup processes, enhancing user interaction and accessibility within the application's frontend architecture.Authentication
Login.js - Login.js serves as the user authentication interface within the frontend component of the project, enabling users to log in using either a password or an OTP
- It integrates user context for authentication status and interacts with the backend to verify user credentials, handling both standard and OTP-based logins while providing feedback through toasts.Auth.js - Auth.js serves as the authentication component within the frontend architecture, managing user access through login and signup functionalities
- It utilizes tabs to switch between the Login and Signup components, maintaining user interaction state to enhance usability and experience, all styled with a consistent visual theme.Signup.js - Signup.js serves as the user registration component within the frontend of a chat application, handling user inputs for name, email, and password
- It validates these inputs, communicates with the backend to register users, and provides feedback through toasts
- Additionally, it facilitates navigation between login and signup views.Navbar
ProfileMenu.js - ProfileMenu.js serves as a user interface component within the frontend architecture, managing user interactions related to profile settings in a chat application
- It facilitates user authentication status updates, navigation, and theme toggling, while also providing access to a detailed profile modal for viewing and editing user information.Navbar.js - Navbar.js serves as the navigation component in the frontend of a chat application, managing user authentication states and theme toggling between light and dark modes
- It dynamically adjusts visibility and functionality based on the user's navigation path and authentication status, enhancing user interaction and accessibility across different device displays.Dashboard
ChatAreaTop.js - ChatAreaTop serves as the interactive header component within the chat interface, managing user interactions such as viewing profiles and navigating back from active chats
- It dynamically displays user availability and last seen information, enhancing user experience by integrating real-time status updates and profile management in the chat application.SingleMessage.js - SingleMessage.js manages the display and interaction functionalities for individual messages within the dashboard component of the frontend
- It handles user actions such as copying and deleting messages, and visually represents message status, sender information, and reactions, enhancing user experience in real-time communication scenarios.NewChats.js - NewChats serves as a component within the frontend architecture, enabling users to search for and initiate new chat conversations with non-friend users
- It fetches potential contacts, supports search functionality to filter these contacts, and handles the creation of new chat sessions, updating the chat context and user interface accordingly.Dashboard.js - Dashboard.js serves as the central user interface component in the frontend architecture, managing user authentication and chat interactions
- It dynamically displays loading placeholders or the chat interface based on the user's authentication status and data loading state, enhancing user experience by providing immediate visual feedback and seamless navigation between chats.ChatArea.js - ChatArea.js serves as the interactive component of the frontend, managing real-time chat functionalities within the application
- It handles message sending, receiving, live typing indicators, and file uploads, enhancing user communication by integrating socket connections for dynamic data updates and immediate feedback in chat sessions.Chats.js - Chats.js serves as a component within the frontend architecture, managing user interactions in the dashboard's chat section
- It utilizes tabs to switch between viewing existing chats and initiating new conversations, enhancing user engagement and communication efficiency
- This component leverages the Chakra UI for responsive and accessible design.MyChatList.js - MyChatList manages user interactions within the chat interface of the application, handling real-time updates, notifications, and the display of chat lists
- It facilitates user search, chat selection, and the dynamic updating of chat statuses and unread message counts, enhancing user engagement and communication efficiency.miscellaneous
DeleteMessageModal.js - DeleteMessageModal serves as a user interface component within the frontend architecture, enabling users to confirm message deletions
- It offers options to either remove a message for all users or just from the user's view, enhancing interactive decision-making in message management tasks.ChatLoadingSpinner.js - ChatLoadingSpinner serves as a visual indicator within the frontend component architecture, specifically enhancing user experience by displaying a large spinner during data loading processes in chat functionalities
- Positioned centrally, it provides feedback in scenarios where chat content is asynchronously fetched, maintaining engagement and managing user expectations effectively.ProfileModal.js - ProfileModal.js provides a user interface component for displaying and editing user profiles within a chat application
- It utilizes modal dialogs to show user details and allows authenticated users to update their information, including profile pictures and passwords, ensuring updates are synchronized with the server.NewMessage.js - NewMessage.js serves as a user interface component within the frontend architecture, specifically designed for displaying notifications of new messages
- It visually presents sender information, a message preview, and offers an interactive button to open the full conversation, enhancing user engagement and communication efficiency in the application.FileUploadModal.js - FileUploadModal serves as a user interface component within the frontend architecture, enabling users to upload image files
- It features modal functionality for selecting and validating image files, and includes an option to attach a message with the image before sending
- This component enhances user interaction by facilitating multimedia communication.context
appState.js - ChatState in frontend/src/context/appState.js
serves as the central state management component for the chat application, managing user authentication, chat sessions, and real-time interactions via WebSockets
- It handles user data retrieval, chat list updates, and maintains the connection status of chat participants, enhancing the app's interactive capabilities.chatContext.js - Creates and exports a React context specifically for managing chat functionalities across the frontend application
- By establishing a centralized chatContext, it facilitates the sharing and updating of chat data seamlessly among various components within the application, enhancing the efficiency and maintainability of the chat feature.public
index.html - Serves as the entry point for the "Conversa" web application, initializing the user interface
- It sets up essential metadata, links to resources like icons and the web app manifest, and prepares the environment for the React application by defining the root element where the UI components will be rendered.manifest.json - Defines the web application's metadata for browser interfaces and mobile device home screens, including names, icons, and theme colors
- It configures the app to run in a standalone mode, enhancing the user experience by mimicking a native application
- This setup is crucial for improving accessibility and engagement through familiar visual elements and direct access from devices.robots.txt - Manages web crawler access to the frontend of the application, ensuring all areas of the website are accessible to search engines
- By specifying no disallow directives, it invites all robots to index the entire site, which can enhance the site's visibility and searchability online.
Before getting started with mern-chat-app, ensure your runtime environment meets the following requirements:
- Version Controller Git
- Programming Language: JavaScript/Node.js
- Package Manager: Npm
Install mern-chat-app using one of the following methods:
Build from source:
-
Clone the mern-chat-app repository:
git clone https://github.com/pankil-soni/mern-chat-app
-
Navigate to the project directory:
cd mern-chat-app
-
Setup Backend
- Install Dependencies
cd backend npm install
- Setup Environment: Create a .env file in the backend folder and add necessary environment variables.
PORT=5000 GENERATIVE_API_KEY = "" MONGO_URI = "" EMAIL = "" PASSWORD= "" CLOUDINARY_ClOUD_NAME = "" CLOUDINARY_API_KEY = "" CLOUDINARY_API_SECRET = "" JWT_SECRET = "" AWS_ACCESS_KEY = "" AWS_SECRET = "" AWS_BUCKET_NAME = ""
- Install Dependencies
-
Setup Frontend
- Install Dependencies
cd frontend npm install
- Install Dependencies
Run mern-chat-app using the following command:
Using npm
Β
- Start the backend server:
cd backend nodemon ./index.js
- Start the frontend development server:
cd frontend npm run start
-
Delete
:Add Delete Message Feature -
Reply
: Add reply to features. -
Reaction
: Add message reactions.
- π¬ Join the Discussions: Share your insights, provide feedback, or ask questions.
- π Report Issues: Submit bugs found or log feature requests for the
mern-chat-app
project. - π‘ Submit Pull Requests: Review open PRs, and submit your own PRs.
Contributing Guidelines
- Fork the Repository: Start by forking the project repository to your github account.
- Clone Locally: Clone the forked repository to your local machine using a git client.
git clone https://github.com/pankil-soni/mern-chat-app
- Create a New Branch: Always work on a new branch, giving it a descriptive name.
git checkout -b new-feature-x
- Make Your Changes: Develop and test your changes locally.
- Commit Your Changes: Commit with a clear message describing your updates.
git commit -m 'Implemented new feature x.'
- Push to github: Push the changes to your forked repository.
git push origin new-feature-x
- Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
- Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!
This project is licensed under the MIT License and Free to use.
This project was developed by me (Pankil Soni). Feel free to reach out with any questions or suggestions.
- gmail - [email protected]
- kaggle - https://www.kaggle.com/pankilsoni
- LinkedIn - https://www.linkedin.com/in/pankil-soni-5a0541170/
- List any resources, contributors, inspiration, etc. here.