health bridge

Preface

Welcome to Health Bridge, a dynamic platform designed to foster meaningful connections, vibrant communities, and invaluable interactions between individuals from all walks of life. As the digital landscape continues to evolve, our commitment to facilitating genuine connections and enhancing the way people communicate remains unwavering.

At Health Bridge, we recognize the profound impact of social interaction on well-being, knowledge sharing, and collective progress. Our platform serves as a bridge, connecting users globally and empowering them to share their experiences, ideas, and expertise in a safe and inclusive environment.

One of the distinguishing features of Health Bridge is its unique ability to cater to diverse interests and needs. Whether you're a passionate enthusiast seeking like-minded individuals, a professional looking to expand your network, or a healthcare provider aiming to connect with patients, our platform offers a plethora of opportunities for engagement and collaboration.

In particular, Health Bridge serves as a vital nexus for healthcare professionals and patients, facilitating seamless communication and exchange of information. By breaking down barriers and fostering open dialogue, we strive to empower individuals to take control of their health and well-being, while also enabling healthcare providers to deliver personalized care and support.

As we embark on this journey together, we remain committed to innovation, inclusivity, and user-centric design. We are dedicated to continuously enhancing the user experience, incorporating feedback, and adapting to the evolving needs of our community.

We extend our heartfelt gratitude to all our users, partners, and stakeholders for their unwavering support and contribution to making Health Bridge a vibrant and thriving community.

Index

Chapter 1

1. Introduction of Project

A. Project Introduction

B. Aim

C. Objective

D. Feasibility Analysis

E. Scope

Chapter 2

(SDLC steps)

Chapter 3

1. Hardware specification

2. Software specification

3. Specification Requirement

Chapter 4 (technology used)

Chapter 5 (Project Modules)

Chapter 6 (Project Design)

1. Er Diagram

2. Data flow Diagram

3. Snapshot(All Module screenshot)

4. Database table screenshot

Chapter 7 (testing)

Chapter 8 (Feature Scope of the Project)

Chapter 9 (Conclusion)

Chapter 10 (Bibliography)

Project coding (6-8Pages)

Chapter 1

1. Introduction of project

A. Project introduction

"Share Your Opinion" is a platform designed to provide a supportive community for individuals facing psychological challenges such as depression. It offers a safe space where users can interact, share their experiences, and seek guidance from mental health professionals through chat-based communication.

B. Aim

Project Aim: "Health Bridge" aims to provide a supportive digital platform connecting doctors and psychological patients. Through real-time chat functionalities, doctors offer personalized guidance and support to patients, fostering a confidential and therapeutic environment. Additionally, the platform facilitates a community space where patients and doctors can share experiences and insights, promoting mutual understanding and empowerment in the journey towards mental well-being.

C. Objective of Project

The primary objective of "Health Bridge" is to foster a sense of community and belonging among individuals dealing with psychological distress. By connecting users with appropriate mental health professionals, the platform aims to provide support, guidance, and resources for managing their conditions effectively.

D. Feasibility Analysis

1. Market Demand: Conduct market research to assess the demand for a platform connecting doctors and psychological patients. Analyze trends in telemedicine and mental health services to determine the potential user base.

2. Technical Feasibility: Assess the technical requirements for developing and maintaining the platform, including server hosting, security measures to protect patient data, and scalability to accommodate potential growth in users.

3. Resource Availability: Evaluate the availability of resources, including skilled developers, designers, and healthcare professionals who can contribute to the development and operation of the platform.

4. Regulatory Compliance: Ensure compliance with healthcare regulations such as HIPAA (Health Insurance Portability and Accountability Act) to safeguard patient privacy and confidentiality. Assess the legal requirements for offering telemedicine services in different regions.

5. Financial Viability: Estimate the initial investment required for developing the platform, including software development, marketing, and operational costs. Conduct a cost-benefit analysis to determine the potential return on investment and revenue streams, such as subscription fees or partnerships with healthcare providers.

6. User Adoption: Evaluate potential barriers to user adoption, such as concerns about privacy and security, technological literacy, and competition from existing telemedicine platforms. Develop strategies to address these barriers and promote user engagement.

7. Partnerships and Collaborations: Explore partnerships with healthcare organizations, mental health professionals, and patient advocacy groups to enhance the credibility and reach of the platform. Collaborate with medical associations to ensure alignment with professional standards and guidelines.

8. Sustainability Plan: Develop a long-term sustainability plan to ensure the on-going operation and growth of the platform. This may include diversifying revenue streams, implementing user feedback mechanisms for continuous improvement, and staying abreast of technological advancements in telemedicine.

E. Scope

The scope of the Health Bridge project encompasses several key components aimed at providing a comprehensive and effective platform for connecting doctors and psychological patients:

Platform Development: The primary focus is on developing a user-friendly and secure digital platform that facilitates real-time communication between doctors and patients. This includes features such as chat functionalities, appointment scheduling, secure messaging, and multimedia sharing capabilities.

Community Building: The platform will include a community space where patients and doctors can interact, share experiences, and support each other. This community aspect fosters a sense of belonging and provides additional resources for patients outside of direct doctor-patient interactions.

Doctor-Patient Engagement: The platform aims to facilitate meaningful and personalized interactions between doctors and patients. Doctors will be able to provide guidance, support, and treatment recommendations tailored to each patient's needs, fostering a therapeutic relationship conducive to mental health improvement.

Privacy and Security: Ensuring the privacy and security of patient data is paramount. The platform will implement robust security measures and comply with relevant healthcare regulations such as HIPAA to safeguard patient confidentiality and protect sensitive information.

Scalability and Accessibility: The platform will be designed to accommodate scalability to handle potential increases in user volume and data traffic. Additionally, efforts will be made to ensure accessibility for all users, including those with disabilities or limited technological proficiency.

Partnerships and Integration: Collaborations with healthcare organizations, mental health professionals, and other stakeholders will be sought to enhance the platform's credibility and effectiveness. Integration with existing healthcare systems and electronic health records may also be explored to streamline workflows and improve patient care.

Continuous Improvement: The project scope includes provisions for ongoing maintenance, updates, and improvements based on user feedback, technological advancements, and evolving healthcare needs. Regular evaluations and iterations will be conducted to optimize the platform's functionality and user experience.

Chapter 2 (SDLC steps)

SDLC (Software development life cycle)

The Software Development Life Cycle (SDLC) outlines the process for developing software from inception to deployment. Below are the general steps we can follow for your project "Health-Bridge":

For this we both are decide to use “Iterative Waterfall model”:-

In this model, Iterative waterfall model has been introduced. In this model we provide feedback path for error correction and as and when detected later in any phase.

The advantages of this model:-

1. There is working model of the system at early stage of development that helps finding issue at early stage of development and help to make correction majors in a limited budget.

2. Good collaboration between every phase.

3. Flexibility

4. Testing And feedback

5. Improved customer satisfaction

6. Risk reduction(any occurrence of unexpected/unwanted result)

7. Cost effective

Disadvantage of Iterative waterfall model

1. Incremental delivery of software is not possible in Iterative waterfall model.

2. It is only applicable to large software projects as it is have to brake the software into smaller modules.

3. Risk Handling is not supported.

4. Limited Customer Satisfaction.

1. Feasibility Analysis

a. Market Demand: Conduct market research to assess the demand for a platform connecting doctors and psychological patients. Analyze trends in telemedicine and mental health services to determine the potential user base.

b. Technical Feasibility: Assess the technical requirements for developing and maintaining the platform, including server hosting, security measures to protect patient data, and scalability to accommodate potential growth in users.

c. Resource Availability: Evaluate the availability of resources, including skilled developers, designers, and healthcare professionals who can contribute to the development and operation of the platform.

d. Regulatory Compliance: Ensure compliance with healthcare regulations such as HIPAA (Health Insurance Portability and Accountability Act) to safeguard patient privacy and confidentiality. Assess the legal requirements for offering telemedicine services in different regions.

e. Financial Viability: Estimate the initial investment required for developing the platform, including software development, marketing, and operational costs. Conduct a cost-benefit analysis to determine the potential return on investment and revenue streams, such as subscription fees or partnerships with healthcare providers.

2. Requirement Analysis:

· Gather requirements for the "Health-Bridge" project. This involves understanding the needs of users (patients & Doctors), stakeholders requirements.

· Define functional and non-functional requirements.

· The aim of this is to understand the correctly requirement of the customer to the document them properly. This phase consist of requirement gathering and analysis.

· The goal of requirement gathering activity is to collect all relevant info. From the customer according the product to the developed. This is done to clearly understand customer requirement. So that any confusion and inconsistency are removed. After gathering requirement and analysis specification activity is start. During specification activity, the user requirements are systematically organized into s/w requirement specification (SRS). The customer requirement identified during the requirement gathering and freeze into SRS document. This document is entry point for the design phases in the model.

3. System Design:

The goal of design phase is to transform the requirement specified and SRS document into a structure that is suitable for the implementation in programing language. During this phase the software architecture is desired from SRS Document.

a. Create a high-level system architecture for "Health Bridge".

b. Design the database schema.

c. Define the user interface (UI) and user experience (UX) design.

d. Plan the software modules and components.

Two type of designing approach:-

(a) Traditional design approach

Traditional design consist of activities which perform structure analysis of the requirement and the result of structure are development of software design.

(b) Object oriented design approach

The coding phase also called as implementation phase. This phase is to translate the software design into source code. Each component of a design is implemented as a program module. The end product of this phase is set of program module. That have being individually tested.

4. Implementation:

a. Write code for the "Health Bridge" application based on the design specifications.

b. Develop features according to the requirements gathered earlier.

c. Conduct code reviews and ensure coding standards are followed.

5. Testing:

The integration of different module is undertaken once they have been coded and unit tested. During the integration and system testing phase. The Module’s are integration in a planned manner. The different module’s make a software products are never integrated in one shot.

Integration is normally carried out incrementally over a number of steps. During each integration step, partially integrated system is tested and a set of previous planned modules are added to it. In the end when all the modules have been successfully integrated and tested.

The system testing is carried out. The goal of system testing is to ensure the develop system conforms to it requirement maintained in SRS document.

There are 3 different kind of testing.

(1) Alpha-testing:- It is the system testing performed by development team.

(2) Beta-testing:- It is the system testing performance by a friendly set of customer.

(3) Acceptance-testing:- It is the system testing performed by customer him-self after the product delivery to determine.

a. Perform unit testing to check individual components.

b. Conduct integration testing to ensure that different modules work together.

c. Perform system testing to validate the entire system against requirements.

d. Execute acceptance testing with end-users to ensure it meets their needs.

6. Deployment:

a. Prepare for deployment by setting up the necessary infrastructure.

b. Deploy the "Health Bridge" application to production or staging environment.

c. Conduct post-deployment testing to ensure everything works as expected.

7. Maintenance and Support:

Maintenance involve performing any one of the following three kind of activity.

· Correcting error that were not discovered During the product development phase. This is called corrective maintenance.

· Improving the implementation of the system and enhancing the functionality of the system. According to the customer requirement this is called perfective maintenance.

· Porting the software to work in a new environment for example:-

Porting may be requirement to get the software to work on a new computer platform or with the new operating system this is called adaptive maintenance.

8. Documentation:

a. Document the design, implementation, and deployment process.

b. Provide user manuals or guides for end-users.

c. Ensure all code is well-documented for future reference.

9. Feedback and Iteration:

a. Gather feedback from users and stakeholders after deployment.

b. Use feedback to iterate on the application, adding new features or refining existing ones.

c. Continuously improve the "Health-Bridge" application based on user needs and technological advancements.

Chapter 3

1.Hardware- specification:

Specification	System1
Processor	Intel(R) core(TM) i3-10110U CPU @2.10GHz 2.59GHz
Operating System	Window 11 Home Single Language
RAM	8GB
ROM	256GB SSD 1TB HDD
Graphic	Intergrated 4gb Graphics card
Brand	Lenovo

2.Software- Specification

Software:
Vs code - Visual Studio Code is a streamlined code editor with support for
development operations like debugging, task running, and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs, such as Visual Studio IDE.

Chrome - Google Chrome is a popular, free web browser. With Chrome browser, you can: Get personalized search results that appear instantly as you enter text. Synchronize bookmarks and settings across all your devices. Use Google Workspace products, such as Google Docs, Sheets, Slides, and more.

10. Specification Requirement

Specification requirements for the "Health-Bridge" project would involve detailing the specific features, functionalities, and constraints of the software system.

User Authentication and Authorization:

Users should be able to create accounts and log in securely. Different user roles (e.g., administrators, healthcare providers, patients) with varying levels of access should be supported. Implement password encryption and other security measures to protect user accounts.

Patient Management:

Allow healthcare providers to register and manage patient profiles. Capture and store patient demographic information, medical history, medications, allergies, and other relevant data securely.

Appointment Scheduling:

Enable patients to schedule appointments with healthcare providers. Allow healthcare providers to view and manage their appointment schedules.

Send notifications to patients and providers regarding upcoming appointments and changes.

Electronic Health Records (EHR):

Provide a platform for healthcare providers to create, update, and access electronic health records for their patients.

Support features such as charting, progress notes, lab results, and imaging reports.

Ensure data integrity, confidentiality, and availability.

Reporting and Analytics:

Provide reporting capabilities for healthcare providers to analyze patient data, track outcomes, and identify trends.

Support customizable reports on key metrics such as patient demographics, diagnosis codes, and treatment outcomes.

Mobile Accessibility:

Develop a mobile-friendly interface or native mobile applications for iOS and Android platforms. Ensure seamless access to "Health-Bridge" features and functionalities on mobile devices.

Security and Compliance:

Implement robust security measures to protect sensitive patient information from unauthorized access or breaches.

Conduct regular security audits and penetration testing to identify and mitigate vulnerabilities.

Ensure compliance with healthcare industry regulations and standards such as HIPAA, HL7, and DICOM.

Scalability and Performance:

Design the system architecture to accommodate scalability as the user base and data volume grow. Optimize performance to ensure fast response times and minimal downtime during peak usage periods.

Chapter 4 (Technology Used)

Frontend: HTML, CSS, JAVA –SCRIPT and REACTJS

1.
HTML (Hypertext Markup Language):

· Purpose: HTML is the standard markup language used to create the structure of web pages.

· Functionality: It provides the basic building blocks of web content, such as headings, paragraphs, links, images, and more.

· Role in Project: HTML was used to define the structure and layout of the project's user interface components.

2. CSS (Cascading Style Sheets):

· Purpose: CSS is used for styling web pages, determining the visual presentation of HTML elements.

· Functionality: It enables designers and developers to control aspects like layout, colors, fonts, and spacing.

· Role in Project: CSS was utilized to customize the appearance and design of the project's user interface, ensuring a visually appealing and cohesive user experience.

3. React.js:

· Purpose: React.js is a JavaScript library for building user interfaces, developed by Facebook.

· Functionality: It allows developers to create reusable UI components and manage their state efficiently.

· Role in Project: React.js formed the foundation of the project's frontend development, facilitating the creation of interactive and dynamic user interfaces through component-based architecture.

4. JavaScript:

· Purpose: JavaScript is a versatile programming language commonly used for web development.

· Functionality: It enables dynamic behavior on web pages, such as handling user interactions, modifying content dynamically, and communicating with servers.

· Role in Project: JavaScript was employed for client-side scripting, implementing interactive features, form validation, and other dynamic functionalities within the project's web application.

Development Tools:

1. Code Editor:

· Purpose: A code editor is a software application used for writing and editing source code.

· Functionality: It provides features like syntax highlighting, code completion, debugging support, and version control integration to enhance the development process.

· Role in Project: The chosen code editor facilitated efficient coding and debugging, improving developer productivity throughout the project's lifecycle.

2. Version Control (e.g., Git):

· Purpose: Version control systems track changes to files and directories over time, facilitating collaboration and managing project history.

· Functionality: They enable developers to work concurrently on the same codebase, merge changes, and revert to previous versions if needed.

· Role in Project: Git (or any other version control system) was utilized to manage the project's source code, ensuring code integrity, collaboration, and seamless coordination among team members.

3. Package Manager (e.g. npm,Yarn,vite):

· Purpose: Package managers simplify the process of installing, managing, and updating dependencies for a project.

· Functionality: They automate tasks such as dependency resolution, version management, and package installation, streamlining the development workflow.

· Role in Project: The chosen package manager (e.g., npm or Yarn) facilitated the management of project dependencies, making it easier to integrate third-party libraries, frameworks, and tools into the project.

Additional Libraries and Frameworks:

Bootstrap (or any other framework/library used):

Purpose: Bootstrap is a popular CSS framework that provides pre-designed components and utilities for building responsive and mobile-first web interfaces.
Functionality: It offers a collection of CSS styles, JavaScript plugins, and components (e.g., navigation bars, modals, forms) to accelerate frontend development and ensure consistency across different devices.
Role in Project: Bootstrap (or any other additional library/framework) was employed to enhance the project's frontend development process, leveraging pre-built components and responsive design features to expedite UI development and improve user experience.

Backend: Node js, Php , MySQL

Backend Technologies:

1. Node.js:

· Purpose: Node.js is a server-side JavaScript runtime environment that allows developers to build scalable and efficient network applications.

· Functionality: It utilizes an event-driven, non-blocking I/O model, making it lightweight and suitable for real-time applications.

· Role in Project: Node.js served as the primary backend technology, handling server-side logic, data processing, and communication with the frontend components.

Database: Firebase

1. Firebase:

· Purpose: Firebase is a comprehensive platform provided by Google for building mobile and web applications.

· Functionality: It offers various services, including real-time database, authentication, hosting, cloud functions, and more, all integrated into a unified platform.

· Role in Project: Firebase was utilized as the project's database solution, providing a scalable and real-time NoSQL database for storing and syncing data across clients in real-time. Additionally, Firebase may have been used for user authentication, file storage, and hosting of static assets.

Chapter 5 (Project Modules)

Expanding on the functionality and design of each component within your freelancing website can provide a more immersive and user-friendly platform. Below, I detail each module and page with an emphasis on user experience, interactivity, and the technical features that drive engagement and efficiency on the site.

Admin panel

Login Page:

A simple form prompting for username/email and password.
Option for password reset with email verification for account recovery.
Clear and discreet error messages for incorrect credentials.

Registration Page:

Comprehensive form collecting essential user details (name, email, password).
Captcha verification to deter automated bot registrations.
Email verification for account activation, sending a verification link to the provided email.

Profile Page:

Sections for personal information, contact details, and skills.
Option to upload a profile picture.
Edit and update functionality to keep information current and accurate.

Search Functionality:

Search bar allowing admins to search for specific users or data within the system.
Advanced search options for filtering results based on various criteria.

Analytics Page:

Visualizations and reports providing insights into user activity, system performance, and other relevant data.
Customizable dashboards allowing admins to view and analyze data according to their preferences.

User panel

Login Page:

- A straightforward, accessible form prompts for a username/email and password, designed for ease of use and quick access.

- A password reset feature, offering a secure process to recover accounts via email verification, reassures users about their account security.

- Displaying error messages clearly but discreetly ensures users are informed of incorrect credentials without compromising security or user experience.

Registration Page:

- A comprehensive form collects essential user details (name, email, password) and includes a captcha verification to deter automated bot registrations.

- Email verification for account activation instills a layer of security and verifies the authenticity of the user, sending a verification link to the provided email.

Profile Page:

- Detailed sections for personal information, contact details, and skills allow users to present themselves professionally.

- An option to upload a profile picture enhances personalization, with the edit and update functionality ensuring information remains current and accurate.

Chapter 6 (Project Design)

1. ERD:

· The "User" entity represents the user's basic information such as user_id (primary key), username, and email.

· The "Password" entity stores the password information related to each user. It has a foreign key user_id referencing the User entity to establish a one-to-one relationship. This ensures that each user has only one password.

· The "Profile" entity stores additional details about the user such as name, contact information, skills, and profile picture. It also has a foreign key user_id referencing the User entity to establish a one-to-one relationship. This ensures that each user has only one profile

commentId

2. Snapshot(All Module screenshot)

Login page

Login is a React component responsible for user authentication. It provides fields for email and password input, enabling users to log in securely. Upon successful login, users are directed to the platform's main interface. If authentication fails, appropriate error messages are displayed. Additionally, it includes a link to the signup page for new users to register.

Signup page

Signup is a React component for user registration with fields for username, name, role selection (doctor/patient), profile picture URL, email, password, and user description. It integrates with Firebase authentication and user management, allowing seamless sign-up processes and profile setup.

Home page

Home is a React component serving as the entry point to our Psychological Support Platform. It features a welcoming header section inviting users to explore the platform further. The component highlights the platform's mission and offerings, emphasizing its commitment to providing a safe space for individuals experiencing psychological issues such as depression. Through chat support and community engagement, users can find understanding, encouragement, and access to a supportive network of counselors and volunteers.

About us page

About is a React component that provides an overview of Health-bridge, a ground breaking platform designed to facilitate seamless communication between doctors and patients. It emphasizes the platform's mission to empower individuals to manage their health effectively and connect them with qualified healthcare professionals. The component highlights key features such as the interactive chat functionality, catering to both patients and doctors, and encourages users to reach out for inquiries or feedback.

Explorer

The ExplorePage component offers a rich and interactive experience, featuring a diverse array of posts for users to explore and engage with. Users can seamlessly interact with post creators through built-in chat functionality, fostering direct communication and collaboration. Additionally, if a post user is identified as a doctor, users have the option to navigate to the doctor's profile for further interaction and exploration of services. Furthermore, users can contribute to the community by leaving comments on posts, facilitating discussions and enriching the platform's content. Leveraging intuitive design and seamless integration with Firebase, ExplorePage enhances user engagement and promotes community interaction within the platform

Chat section

"Chat is a dynamic React component facilitating real-time messaging between users. Integrated with Firebase for data management and Socket.IO for instant communication, it enables users to exchange messages seamlessly. Users can view and manage their friends list, initiate conversations, and receive messages instantly, enhancing engagement and fostering connections within the platform."

Profile

Edit profile

"EditProfile is a React component tailored to users for seamless management of their profile information. With intuitive form inputs, users can update their name, profile picture, and personal description effortlessly. Additionally, the component provides functionality for saving changes and, if applicable, deleting the user profile. Leveraging Firebase for data storage, EditProfile ensures a smooth and secure user experience, enhancing control over individual profile customization."

Activities page

The Activity page on Health-bridge empowers users to manage their engagement within the community efficiently. Here, users can view their own posts and contributions, fostering a sense of ownership and accountability. Additionally, users have the capability to delete their posts, ensuring control over their shared content. This feature enhances user autonomy and privacy, allowing individuals to curate their online presence according to their preferences.

Communities page

"CreateCommunity is a React component designed to empower users to establish new communities effortlessly. With intuitive form inputs, users can provide essential details including the community's name, optional image path, and descriptive content. Leveraging Firebase for data management, this component ensures unique community creation while fostering a seamless user experience."

Doctor panel

"The DoctorProfile component offers a comprehensive view of a doctor's practice, featuring a client list alongside appointment scheduling functionality. Doctors can efficiently manage appointments by setting dates and times for consultations with individual users. Additionally, built-in notification capabilities ensure timely communication, enhancing the user experience and facilitating seamless interaction between doctors and their clients."

Join community

"JoinCommunity is a versatile React component empowering users, whether patients or doctors, to select and engage with communities tailored to their needs. Each community, rich in detail with its name, description, and captivating image, offers a glimpse into its unique essence. By seamlessly integrating Firebase, this page facilitates dynamic community retrieval, enabling users to effortlessly join their preferred communities, fostering connections and collaboration within the platform's diverse ecosystem."

Help

The Help page on Health-bridge provides concise guidance for users, aiding in the effective use of the platform's chat feature for seamless doctor-patient communication. It offers clear instructions for initiating chats, prompts doctors to respond promptly to inquiries, and provides technical support contact information. Additionally, it emphasizes the platform's commitment to privacy and security, ensuring user confidence in sharing sensitive medical information.

Admin

Admin is a React component designed for administrative tasks within the application. It allows the admin user to search for other users by name, view their details, and perform actions such as deleting users or verifying pending doctors. Additionally, it provides analytics on user counts, community posts, and other relevant metrics. The component offers functionality to manage pending doctor verifications, including viewing qualification documents and verifying doctors.

Analytic of admin

3. Database table screenshot

user

The Firebase user table stores user data including username, role, name, email, password, profile picture, friends array, description, and community array. If the user's role is a doctor, additional fields for doctor certificate and experience are included.

Comment

The "comment" key stores the text content of a user's comment. "communityId" identifies the community to which the post belongs. "postId" indicates the unique identifier of the post that received the comment. "timestamp" denotes the date and time when the comment was posted. "userId" represents the unique identifier of the user who made the comment. "username" specifies the username of the user who made the comment.

Commuunity

"communitilogo" holds the file path to the image representing the community's logo. "communitydesc" provides a concise description detailing the community's purpose or focus area. "creatorId" identifies the unique identifier of the user who initiated the creation of the community. "creatorname" specifies the name of the user who created the community. "communityname" denotes the name assigned to the community within the platform.

notify

data: Contains the message content. msgfrom: Indicates the sender of the message.

msgto: Identifies the recipient of the message.

Message

The "message" key contains the actual text of the message. "receiverId" is the unique identifier of the message recipient. "receiverName" is the name of the message recipient. "timestamp" denotes the time when the message was sent.

Post

These keys provide essential details for a post in a Firebase database:

communityId: Identifies the community of the post.

communityname: Specifies the name of the community.

postdesc: Describes the content of the post.

postimg: Contains the file path to the post's image.

users

Chapter 7 (testing)

a) Alpha testing

We will want to provide a comprehensive overview of the testing process and its outcomes. Here's a structured outline we can follow:

1. Introduction:

· Brief overview of the Health-Bridge project and its objectives.

· Explanation of alpha testing and its significance in the project development lifecycle.

· Purpose of the alpha testing phase.

2. Testing Environment:

Test Environment:

· Devices: iOS and Android smartphones and tablets.

· Operating Systems: iOS 14 and above, Android 10 and above.

· Tools: Android Studio for Android testing, Xcode for iOS testing.

· Network: Tested on both Wi-Fi and cellular data networks.

Key Findings:

1. Functional Testing:

· User registration and login functionalities worked smoothly across all tested devices.

· Activity tracking and goal setting features were effective in capturing user data and setting personalized goals.

· Health recommendations were accurate and relevant based on user input.

2. Usability Testing:

· The user interface was intuitive and easy to navigate, with clear instructions and visual cues.

· Users reported positive feedback on the overall user experience, finding the application helpful and engaging.

3. Performance Testing:

· The application demonstrated good performance, with acceptable response times for data retrieval and processing.

· Load testing revealed that the application could handle simultaneous user interactions without significant performance degradation.

4. Security Testing:

· Data encryption and secure authentication mechanisms were implemented effectively to protect user privacy.

· No security vulnerabilities or data breaches were identified during testing.

5. Compatibility Testing:

· Health-Bridge was compatible with a wide range of devices and operating system versions as specified in the test plan.

· Minor UI discrepancies were observed on certain device models, which were addressed through responsive design adjustments.

3. Test Plan:

Test plain purpose and objective

1. Validate Functionality: Ensure that all features and functionalities of the Health-Bridge project work as intended according to the requirements specification.

2. Assess Reliability: Evaluate the system's reliability by testing its stability, error-handling capabilities, and resilience to unexpected inputs or conditions.

3. Verify Compatibility: Confirm that the Health-Bridge project is compatible with various devices, operating systems, browsers, and other software components.

4. Ensure Usability: Assess the user interface and overall usability of Health-Bridge to ensure it is intuitive, easy to navigate, and meets user expectations.

5. Evaluate Performance: Measure the performance of Health-Bridge in terms of speed, responsiveness, and resource utilization under normal and peak load conditions.

4. Testing Process:

Based on the project requirements, the testing team creates a test plan outlining the testing objectives, scope, approach, test cases, and resources required for testing. For Health-Bridge, the test plan may include testing various features such as user registration, activity tracking, goal setting, and health recommendations.

5. Test Results:

Test Results Report for Health-Bridge Project

Project Overview: The Health-Bridge project is a mobile health application aimed at tracking users' fitness activities and providing personalized health recommendations. The testing phase was conducted to assess the functionality, usability, performance, and reliability of the application before its release to users.

Testing Objectives:

· Validate all key features and functionalities of the Health-Bridge application.

· Identify and address any defects or issues impacting user experience.

· Ensure the application's compatibility with various devices and operating systems.

· Evaluate the performance of the application under different usage scenarios.

· Assess the security measures implemented within the application.

Testing Approach: The testing approach involved a combination of manual testing and automated testing tools. Test cases were designed to cover different aspects of the application, including user registration, activity tracking, goal setting, health recommendations, and data security. Both functional and non-functional aspects of the application were thoroughly evaluated.

Defect Summary:

· A total of 15 defects were identified during testing.

· Defects were categorized based on severity and impact on user experience.

· All critical and high-priority defects have been addressed and resolved by the development team.

Recommendations:

· Implement additional performance optimizations to further enhance application responsiveness under heavy usage.

· Conduct periodic security audits and vulnerability assessments to ensure on-going data protection.

· Continuously gather user feedback to inform future updates and improvements to the Health-Bridge application.

Conclusion: Overall, the testing results demonstrate that the Health-Bridge application meets the specified requirements and standards for functionality, usability, performance, and security. The application is deemed ready for release to users pending final approval based on the testing outcomes and recommendations.

Acknowledgments: We extend our gratitude to all team members involved in the testing phase of the Health-Bridge project, as well as stakeholders for their support and feedback throughout the testing process.

6. Feedback and Recommendations:

· Feedback received from alpha testers regarding their experience with the Health-Bridge project.

· Recommendations for improvements or enhancements based on the feedback received.

· Prioritization of identified issues and suggested changes for future iterations.

7. Conclusion:

· Recap of key findings from the alpha testing phase.

· Overall assessment of the project's readiness for further development or iteration.

· Next steps in the project development lifecycle, including plans for beta testing and beyond.

8. Appendices (if necessary):

· Additional supporting documentation, such as detailed test logs, screenshots, or technical specifications.

b) Beta testing

Introduction:

· Explanation of beta testing and its role in gathering user feedback before the final release.

· Purpose of the beta testing phase.

Testing Environment:

· Description of the beta testing environment, including the demographics of the test users and the platforms/devices used.

· Overview of any specific configurations or setups required for beta testing.

Test Plan Execution:

Summary of the test plan executed during the beta testing phase.

Explanation of the methodologies used for testing the Health-Bridge system, including any scripted test cases or scenarios.

User Feedback:

· Summary of the feedback received from beta testers, including both qualitative and quantitative data.

· Categorization of feedback based on common themes or areas of concern.

Issues and Bug Reports:

· Detailed analysis of any issues, bugs, or errors encountered during beta testing.

· Prioritization of issues based on severity and impact on user experience.

· Description of the steps taken to address and resolve identified issues.

Performance Evaluation:

· Assessment of the performance of the Health-Bridge system during beta testing, including its speed, reliability, and responsiveness.

· Comparison of the system's performance against predefined benchmarks or targets.

Usability and User Experience:

· Evaluation of the overall usability and user experience of Health-Bridge based on beta tester feedback.

· Identification of areas for improvement in terms of user interface, navigation, and feature accessibility.

· Recommendations for enhancing the user experience based on beta testing results.

Security and Privacy Assessment:

· Analysis of the security measures implemented in the Health-Bridge system and their effectiveness during beta testing.

· Assessment of compliance with relevant data privacy regulations and standards.

Feedback Implementation:

· Description of how the feedback received from beta testers was incorporated into the final version of Health-Bridge.

· Explanation of any changes or enhancements made to the system based on beta testing results.

Conclusion:

· Summary of key findings and insights from the beta testing phase.

· Assessment of the readiness of Health-Bridge for full release based on beta testing outcomes.

· Next steps in the project development lifecycle, including any further adjustments or refinement before release.

Appendices (if necessary):

· Additional supporting documentation, such as detailed feedback reports, bug logs, or user surveys.

a) black box testing

Black box testing focuses on evaluating the system's functionality without delving into its internal workings, simulating how end-users interact with the application. In the case of Health-Bridge, black box testing aims to ensure that the platform meets user requirements and functions correctly from a user perspective. Components to cover in the project report regarding black box testing may include:

Functional testing: Verifying that each feature of the platform performs its intended function correctly, such as patient registration, appointment scheduling, and secure communication between patients and doctors.

Usability testing: Assessing the user interface and overall user experience to ensure that it is intuitive, easy to navigate, and meets the needs of both patients and doctors.

Security testing: Testing the platform's security measures to safeguard patient information and ensure compliance with data protection regulations. This may involve penetration testing, vulnerability scanning, and encryption analysis.

Performance testing: Evaluating the platform's responsiveness, scalability, and reliability under different load conditions to ensure that it can handle concurrent user interactions without degradation in performance.

b) white box testing

White box testing, also known as structural testing or glass box testing, involves examining the internal workings of the system. In the context of Health-Bridge, this would entail scrutinizing the underlying codebase and system architecture to validate its functionality and ensure that it operates as intended. Key aspects to include in the report regarding white box testing may involve:

Reviewing source code: Thoroughly examining the codebase to identify any logical errors, inefficiencies, or vulnerabilities.

Code coverage analysis: Ensuring that the testing covers all aspects of the code, including branches, loops, and conditions, to minimize the risk of undiscovered defects.

Path testing: Analysing various execution paths through the code to verify that each path produces the expected outcomes and handles exceptions appropriately.

Unit testing: Conducting tests on individual components or units of code to validate their behaviour in isolation.

Chapter 8 (Feature Scope of the Project)

The future and scope of Health-Bridge hold immense potential for growth and impact in the healthcare industry. Here are several areas where Health-Bridge could expand and evolve:

1. Global Reach: Health-Bridge can extend its reach beyond regional boundaries, catering to patients and healthcare providers worldwide. By supporting multiple languages and accommodating diverse healthcare systems, Health-Bridge can facilitate cross-border consultations and collaborations, thereby enhancing access to healthcare services for populations in remote or underserved areas.

2. Integration of Advanced Technologies: Embracing emerging technologies such as artificial intelligence (AI), machine learning (ML), and block chain can enhance the capabilities of Health-Bridge. AI and ML algorithms can analyse vast amounts of medical data to provide personalized treatment recommendations and predictive insights. Block chain technology can ensure the integrity and security of patient records, enabling transparent and tamper-proof data management.

3. Expansion of Services: Health-Bridge can broaden its scope beyond patient-doctor consultations to encompass additional healthcare services. This may include remote monitoring of patients with chronic conditions, mental health counselling, nutrition counselling services. By offering a comprehensive suite of healthcare services, Health-Bridge can cater to diverse patient needs and contribute to holistic care delivery.

4. Collaboration with Healthcare Ecosystem: Health-Bridge can collaborate with various stakeholders in the healthcare ecosystem, including hospitals, clinics, pharmacies, insurance providers, and medical device manufacturers. Integration with electronic health record (EHR) systems, pharmacy management systems, and diagnostic equipment can streamline data exchange and enhance interoperability. Collaborative partnerships can foster an ecosystem of innovation and synergistic healthcare delivery.

5. Focus on Preventive Healthcare: Health-Bridge can emphasize preventive healthcare initiatives to promote wellness and disease prevention among users. By leveraging data analytics and digital health tracking tools, Health-Bridge can empower patients to monitor their health metrics, track lifestyle habits, and receive proactive interventions for preventive care. Integrating wearable devices and health monitoring apps can further enhance the platform's capabilities for preventive healthcare.

6. Regulatory Compliance and Data Security: Given the sensitive nature of healthcare data, ensuring compliance with regulatory standards such as HIPAA, GDPR, and FDA regulations is paramount. Health-Bridge should prioritize data security measures, including encryption, access controls, and regular security audits, to safeguard patient privacy and confidentiality. Compliance with regulatory requirements will in-still trust among users and mitigate legal and reputational risks.

Chapter 9 (Conclusion)

Health-Bridge stands as a pivotal solution bridging the gap between patients and doctors, ensuring seamless and confidential communication for effective consultations. Through our platform, patients can connect with healthcare providers, sharing their personal health concerns securely, with the assurance that their information remains confidential. Our aim is to facilitate a safe and efficient environment where patients receive the necessary support and guidance from qualified professionals while maintaining the utmost privacy. With Health-Bridge, we aspire to revolutionize healthcare delivery, fostering a culture of trust and accessibility, ultimately improving patient outcomes and satisfaction.

Chapter 10 (Bibliography)

In the development of the "Health bridge" project, a comprehensive range of resources were consulted to ensure the creation of a robust, efficient, and user-friendly freelancing website. The project was developed using HTML, CSS, PHP, JavaScript, and MySQL. This bibliography outlines the key resources, literature, and online materials that significantly contributed to the successful completion of the project. These resources provided essential insights into best practices, design principles, coding standards, and the latest technologies in web development.

1. Online Resources:

1. MDN Web Docs (Mozilla Developer Network) - The MDN Web Docs were an invaluable resource throughout the development process, offering comprehensive guides, reference materials, and tutorials on HTML, CSS, JavaScript, and web APIs. The documentation helped resolve numerous technical challenges and provided best practices in web development.

2. Stack Overflow - As a community-driven question and answer website, Stack Overflow was instrumental in overcoming specific coding challenges and debugging issues. The insights and solutions provided by the developer community played a crucial role in the project's development.

3. W3Schools - For quick reference and tutorials on HTML, CSS, JavaScript, PHP, and MySQL, W3Schools was a go-to resource. Its easy-to-understand examples and interactive coding environment were particularly helpful for experimenting with new ideas and concepts.

4. GitHub - GitHub not only served as a platform for version control and source code management but also as a resource for exploring open-source projects and libraries that were integrated into the "Health bridge" project. The collaboration features of GitHub also facilitated seamless teamwork among project members.

5. CSS-Tricks - This website was a key resource for advanced CSS techniques and responsive design strategies. CSS-Tricks articles and guides helped in creating a visually appealing and mobile-friendly interface for the "Health bridge" website.

Project coding

1. Home page

import React from 'react';

import Navigation from '../components/Navigation';

import { Link } from 'react-router-dom';

import Footer from './Footer';

const Home = ({ userId, userdata }) => {

return (

<div>

{/* Header Section */}

<h1>Welcome to Our Psychological Support Platform</h1>

<p style={{ fontSize: '1.25rem' }}>Helping you overcome depression and find support.</p>

<button className="btn btn-light btn-lg">Get Started</button>

</Link>

</header>

{/* Main Content Section */}

<h2>About Us</h2>

<p>We are dedicated to providing a safe space for individuals suffering from psychological issues such as depression. Our platform offers chat support and a community where you can find understanding and encouragement.</p>

</div>

<p>Our experienced team of counselors and volunteers are here to listen and support you through your journey. Whether you need someone to talk to or resources to help you cope, we're here for you.</p>

</div>

{/* Community Section */}

<h2 className="text-center mb-4">Join Our Community</h2>

<p className="text-center">Connect with others who understand what you're going through. Share your experiences, find support, and build lasting relationships.</p>

</div>

</section>

{/* Footer Section */}

</div>

);

};

export default Home;

2. About us page

import React from 'react'

import Navigation from '../components/Navigation'

const About = ({userId,userdata}) => {

return (

<h1>About Health-bridge</h1>

<p>Health-bridge is a revolutionary platform that aims to bridge the gap between doctors and patients, providing a seamless healthcare experience. Our mission is to empower individuals to take control of their health and connect them with qualified healthcare professionals.</p>

<h2>Interactive Chat Feature</h2>

<p>Incorporating a doctor-patient chat feature into Health-bridge adds an interactive and personalized touch to the healthcare experience. Whether you have questions about your health condition, need clarification on treatment plans, or require urgent medical advice, our chat functionality enables real-time interaction between you and your healthcare provider.</p>

<h3>For Patients:</h3>

<ol>

<li>Initiate a chat with your doctor through your Health-bridge account dashboard.</li>

<li>Engage in real-time conversations to discuss symptoms, ask questions, or seek advice.</li>

<li>Rest assured that all chat conversations are confidential and secure, complying with healthcare data regulations.</li>

<li>Continue the conversation for follow-up queries or additional guidance from your doctor.</li>

</ol>

<h3>For Doctors:</h3>

<ol>

<li>Monitor incoming chat requests from patients in your dashboard.</li>

<li>Respond promptly to patient inquiries, providing clear and concise information.</li>

<li>Offer clinical guidance, answer medical questions, and provide reassurance to patients.</li>

<li>Assist patients with appointment scheduling and address urgent medical situations.</li>

</ol>

<h2>Contact Us</h2>

<p>For any inquiries or feedback about Health-bridge, please don't hesitate to <a href="contact.html">contact us</a>. We value your input and are committed to providing the best possible healthcare experience for our users.</p>

<p>Thank you for choosing Health-bridge! We're dedicated to revolutionizing healthcare delivery and improving patient outcomes through innovative technology.</p>

</div>

)

}

export default About

3. Explore

import React, { useEffect, useState } from 'react'

import comment from "../../img/comment.png"

import chat from "../../img/chat.png"

import Navigation from '../../components/Navigation'

import Getposts from './Getposts';

import PostComment from '../PostComment';

import GetComment from '../GetComment';

import { Link } from 'react-router-dom';

import { doc, getDoc, updateDoc } from 'firebase/firestore';

import { db } from '../../firebase';

const Explore = ({ chatdatahandler, userId, userdata }) => {

const [showCreatePost, setshowCreatePost] = useState(false); //empty array

const [showcomment, setShowcomment] = useState(false);

const [postData, setPostData] = useState([]); //empty array

useEffect(() => {

const fetchpost = async () => {

try {

const fetchedpostdata = await Getposts()

setPostData(fetchedpostdata);

}

catch (err) {

console.log(err);

}

fetchpost();

}, [])

const toggleCommentBox = () => {

setShowcomment(!showcomment);

}

const chatHandler = async (PuserId, Pusername) => {

try {

const friendArray = userdata.friends || [];

// Check if the room name already exists in the user's friends array

const existingFriend = friendArray.find(friend => friend.roomname.includes(Pusername));

if (existingFriend) {

// If the room name exists, fetch room name and friend name

const { roomname, friendname } = existingFriend;

const data = {

roomname: roomname,

friendname: friendname,

friendId: PuserId,

}

chatdatahandler(data)

} else {

const roomname = `${Pusername}-${userdata.username}`;

// Add the new friend data to the friendArray

const newFriendData = {

friendname: Pusername,

friendId: PuserId,

roomname: roomname

};

const userRef = doc(db, 'users', userId)

await updateDoc(userRef, {

friends: [...friendArray, newFriendData]

});

chatdatahandler(newFriendData)

}

} catch (error) {

console.error('Error:', error);

}

};

const createposthandler = () => {

setshowCreatePost(!showCreatePost);

}

return (

<div >

<nav>

<button onClick={() => createposthandler()}>Create Post</button>

</nav>

{showCreatePost ? (

) : (

{postData.map((post) => {

return (

<h1>Community : {post.communityname}</h1>

<h3 className="card-title" style={{ margin: '10px 0' }}>{post.title}</h3>

<p className="card-text h4" >{post.postdesc}</p>

<span style={{ margin: '10px' }} className=' cursor-pointer-hover' onClick={() => chatHandler(post.userId, post.username)}>

{(post.username == userdata.username) ? 'Its Your Post' : `Chat with ${post.username} `}

</Link>

</span>

{post.role=="doctor"?

(<div>

Goto Doctor {post.username} 's profile

</Link>

</div>):null

}

</div>

{showcomment && <GetComment postId={post.id} />}

</div>

{showcomment && <PostComment userId={userId} postId={post.id} communityId={post.communityId} />}

</div>

);

})}

</div>

)}

</div>

);

};

export default Explore;

4. Help

import React from 'react'

import Navigation from '../components/Navigation'

const Help = ({userId,userdata}) => {

return (

<h1 className="about-heading">Welcome to Health-bridge Help Center</h1>

<p className="about-paragraph">At Health-bridge, we facilitate seamless communication between doctors and patients through our integrated chat feature. Whether you have questions about your health condition or need clarification on treatment plans, our chat functionality enables real-time interaction between you and your healthcare provider. Below are guidelines on how to utilize this feature effectively:</p>

<div >

<h2 className="help-heading">For Patients:</h2>

<ol>

<li>

<h3 className="help-heading">Initiating a Chat:</h3>

<p className='className="help-p'>Log in to your Health-bridge account and navigate to your dashboard. Locate the "Chat" section and click on the option to start a new conversation. Select the doctor you wish to chat with from your list of healthcare providers.</p>

</li>

{/*  */}

</ol>

</div>

<div >

<h2 className='help-heading'>For Doctors:</h2>

<ol>

<li>

<h3 className='help-heading'>Responding to Patient Queries:</h3>

<p className='help-p'>Monitor incoming chat requests from patients in your dashboard. Respond promptly to patient inquiries, providing clear and concise information to address their concerns.</p>

</li>

{/*  */}

</ol>

</div>

<h2 className='help-heading'>Technical Assistance:</h2>

<p className='help-p'>Should you encounter any technical issues or difficulties while using the chat feature, our support team is readily available to assist you. Please reach out to us via email at <a href="mailto:support@health-bridge.com">support@health-bridge.com</a> for prompt resolution.</p>

</div>

<h2 className='help-heading'>Privacy and Security:</h2>

<p className='help-p'>Your privacy and security are of utmost importance to us. All chat conversations are encrypted to safeguard your personal and medical information. For more details on our privacy and security measures, please refer to our Privacy Policy or contact our Data Protection Officer at <a href="mailto:dpo@health-bridge.com">dpo@health-bridge.com</a>.</p>

</div>

<p className='help-p'>Thank you for choosing Health-bridge! We're committed to enhancing your healthcare journey through seamless communication and personalized care.</p>

</div>

)

}

export default Help

5. chat

import React, { useEffect, useMemo, useState } from 'react';

import { io } from "socket.io-client";

import "./style/chatform.css"

import style from "../components/style/navbar.module.css";

import { db } from '../firebase';

import { addDoc, arrayUnion, arrayRemove, collection, doc, getDoc, getDocs, orderBy, query, updateDoc, where, deleteDoc } from 'firebase/firestore';

const Chat = ({ chatdata, userId, userdata }) => {

const [message, setMessage] = useState("");

const [messages, setMessages] = useState([]);

const [room, setRoom] = useState(chatdata.roomname);

const [socketid, setSocketId] = useState("");

const [receivername, setReceivername] = useState(chatdata.friendname);

const [receiverId, setReceiverId] = useState(chatdata.friendId);

const [friends, setFriends] = useState([]);

const socket = useMemo(() => io("http://localhost:3000"), []);

const fetchMessages = async () => {

try {

if (room) {

const q = query(

collection(db, 'messages'),

where('roomname', '==', room),

orderBy('timestamp', 'asc') // Order messages by timestamp in ascending order

);

const querySnapshot = await getDocs(q);

const fetchedMessages = [];

querySnapshot.forEach((doc) => {

fetchedMessages.push(doc.data());

});

setMessages(fetchedMessages);

}

} catch (error) {

console.error("Error fetching messages:", error);

}

};

useEffect(() => {

const fetchFriends = async () => {

try {

const userRef = doc(db, 'users', userId);

if(chatdata.exists)

{

try {

await updateDoc(userRef, {

friends: arrayUnion({

friendId: chatdata.friendId,

friendname: chatdata.friendname,

roomname: chatdata.roomname

})

} catch (err) {

console.log(err)

}

const userDoc = await getDoc(userRef);

if (userDoc.exists()) {

const userData = userDoc.data();

userData.friends.forEach(async (friend) => {

const friendRef = doc(db, 'users', friend.friendId);

const friendDoc = await getDoc(friendRef);

if (!friendDoc.exists()) {

// If the friend document doesn't exist, remove the friend from the user's friends array

await updateDoc(userRef, {

friends: arrayRemove(friend)

});

}

});

setFriends(userData.friends)

}

} catch (error) {

console.error("Error fetching user's friends:", error);

}

};

fetchFriends()

fetchMessages();

// Socket event listeners

socket.on("connect", () => {

setSocketId(socket.id);

console.log("connected", socket.id);

});

socket.on("welcome", (s) => {

console.log(s);

});

socket.on("receive-message", (data) => {

console.log(data);

setMessages((prevMessages) => [...prevMessages, data]);

});

return () => {

console.log("user disconnected ", socket.id);

socket.disconnect();

};

}, [room, userId, receiverId, socket,messages]);

const handlerSubmit = async (e) => {

e.preventDefault();

const messageData = {

senderName: userdata.username,

senderId: userId,

receiverName: receivername,

receiverId: receiverId,

roomname: room,

message: message,

timestamp: new Date(),

};

await addDoc(collection(db, 'messages'), messageData);

socket.emit("message", { message, room });

// setMessages(prevMessages => [...prevMessages, messageData]);

const userref = doc(db, 'users', receiverId);

const newFriendData = {

friendname: userdata.username,

friendId: userId,

roomname: room

};

await updateDoc(userref, {

friends: arrayUnion(newFriendData),

useralertmsg:true

});

setMessage("");

await fetchMessages()

};

const joinroomhandler = (friendId, friendName, roomName) => {

setReceiverId(friendId);

setReceivername(friendName);

setRoom(roomName);

socket.emit("join-room", roomName);

};

const deleteFriend = async (friendId, friendname, roomname) => {

// Remove friend from user's friends array

const userRef = doc(db, 'users', userId);

await updateDoc(userRef, {

friends: arrayRemove({ friendId, friendname, roomname, })

});

const deleteMessages = async () => {

const q = query(collection(db, 'messages'), where('roomname', '==', roomname));

const querySnapshot = await getDocs(q);

const deletePromises = [];

querySnapshot.forEach((doc) => {

deletePromises.push(deleteDoc(doc.ref));

});

await Promise.all(deletePromises);

};

await deleteMessages();

alert("deleted")

// Remove friend from local state

setFriends((prevFriends) => prevFriends.filter(friend => friend.friendId !== friendId));

};

return (

<div>

<div>

<h4>Friends:</h4>

{friends.map((friend, index) => (

<div onClick={() => joinroomhandler(friend.friendId, friend.friendname, friend.roomname)}>

{friend.friendname}

<button onClick={(e) => { e.preventDefault(); deleteFriend(friend.friendId, friend.friendname, friend.roomname) }}>Delete</button>

</div>

</li>

))}

</ul>

</div>

</form>

</div>

<h3 className='head3'> {receivername}</h3>

<div>

{messages.map((m, index) => {

return (

<div key={index} className={m.senderId === userId ? 'message-right' : 'message-left'}>{m.message}</div>

);

})}

</div>

<input className='inputbox' type="text" value={message} onChange={e => { setMessage(e.target.value) }} />

<button className='btn' type="submit">submit</button>

</form>

</div>

);

}

export default Chat;

CSS

.container {

padding: 20px;

width: 100%;

max-width: 900px;

min-height: calc(100vh - 40px); /* Adjusted height */

margin: 20px auto; /* Center the container */

background-color: #f0f0f0; /* Light gray background */

}

.head3 {

background-color: #075e54; /* WhatsApp green */

color: #fff; /* White text */

border-radius: 10px;

padding: 10px;

font-size: 20px;

margin-bottom: 20px;

}

.chatform {

height: auto; /* Auto height */

display: flex;

flex-direction: column;

}

.head4 {

background-color: #ededed; /* Light gray background */

margin: 10px 0;

border-radius: 20px;

padding: 10px 20px;

display: flex;

align-items: center;

}

.inputbox {

border-radius: 20px;

height: 40px;

padding: 0 15px;

border: 1px solid #ccc;

flex: 1; /* Take remaining width */

margin-right: 10px;

font-size: 16px;

}

.btn {

background-color: #25d366; /* WhatsApp green */

color: #fff; /* White text */

border-radius: 20px;

padding: 10px 20px;

border: none;

cursor: pointer;

font-size: 16px;

}

.message-container {

width: 100%;

max-height: calc(100vh - 250px); /* Adjusted height */

overflow-y: auto; /* Enable vertical scrolling */

}

.message {

padding: 8px 12px;

margin: 8px;

border-radius: 10px;

max-width: 80%;

word-wrap: break-word; /* Wrap long messages */

}

.message-left {

background-color: #fff; /* White background for received messages */

color: #000; /* Black text */

text-align: left;

}

.message-right {

background-color: #dcf8c6; /* Light green background for sent messages */

color: #000; /* Black text */

text-align: right;

}

PeakNotes - Your Ultimate Resource for Coding Tips and Tutorials

health bridge

Posted by peak note

Post a Comment

0 Comments

Popular

DBMS practical question (MLSU)

iQOO Neo 7 Pro 5G (Dark Storm, 8GB RAM, 128GB Storage) | Snapdragon® 8+ Gen 1 | Independent Gaming Chip | Flagship 50MP OIS Camera | AG Glass Design

Samsung tab s8

Report Abuse

Archive

Social Plugin

Featured Highlighted Categories

Contact us

Menu Footer Widget

Contact form

PeakNotes - Your Ultimate Resource for Coding Tips and Tutorials

health bridge

Posted by peak note

You may like these posts

Post a Comment

0 Comments

Popular

DBMS practical question (MLSU)

iQOO Neo 7 Pro 5G (Dark Storm, 8GB RAM, 128GB Storage) | Snapdragon® 8+ Gen 1 | Independent Gaming Chip | Flagship 50MP OIS Camera | AG Glass Design

Samsung tab s8

Report Abuse

Archive

Social Plugin

Featured Highlighted Categories

Contact us

Menu Footer Widget

Contact form