Skip to content

CollabSphere is a versatile collaboration tool platform built using the MERN stack (MongoDB, Express.js, React, Node.js). It can be deployed either on-premises or in the cloud, ensuring data integrity within the organization.

Notifications You must be signed in to change notification settings

sakshamgupta912/react-CollabSphere-client

Repository files navigation

CollabSphere - A MERN Application in Azure ☁️

CollabSphere is a versatile collaboration tool platform built using the MERN stack (MongoDB, Express.js, React, Node.js). It can be deployed either on-premises or in the cloud, ensuring data integrity within the organization. This platform offers a range of features to enhance collaboration and communication:

image

  • 🏢 Creating Room: Create dedicated collaboration spaces for various projects or teams.
  • 🚀 Joining Room: Join existing rooms to collaborate with team members.
  • 🔊 Announcements: Make important announcements within rooms to keep all members informed.
  • 📚 Assignments: Create, add, and upload assignments to share with room members.
  • 📂 File Sharing: Easily share files and documents among room members.
  • 💬 Chat: Engage in real-time text-based communication with your team.

Deployment 🚀

The client application is deployed on Azure Web App, ensuring scalability and reliability. You can access it using the following link:

CollabSphere Client

Note ⚠️: The site is using free Azure services due to which the site is slow and may take longer time to load than expected.

Azure Implementation

CollabSphere leverages various Azure services to power its functionality:

  • Resource Group: This is used to organize and manage related Azure resources, ensuring efficient resource management. Resource Group

  • Server App Service: This hosts the server-side application, handling backend logic and APIs. Server App Service

  • Client App Service: The client application is hosted here, allowing users to interact with the CollabSphere platform. Client App Service

  • Cosmos DB for MongoDB: This NoSQL database service stores and manages the data for CollabSphere. Cosmos DB for MongoDB

Example Login Credentials

Project Structure 🏗️

The CollabSphere project is organized as follows:

  • 🚪 Login Page: A page where users can log in to their accounts.
  • 📝 Register Page: A page for new users to register.
  • 🏠 Landing Page: The landing page serves as the home screen for users.
    • 🏡 Home: The default landing page with an overview of the user's rooms.
    • 📅 Assignments: A section where assignments are listed and managed.
    • 💬 Chat: Real-time chat functionality.
  • 🛋️ Room Page: When users enter a room, they have access to the following features:
    • 🔊 Announcements: View and create room-specific announcements.
    • 📚 Assignments: Access and manage assignments related to the room.
    • 📂 Files: Share and access files relevant to the room.
    • 💬 Chat: Collaborate in real-time with room members.

Installation 🛠️

To set up CollabSphere locally, follow these steps:

  1. Clone the repository to your local machine:

    git clone https://github.com/your-username/CollabSphere.git
    
  2. Change to the project directory:

    cd CollabSphere
    
  3. Install the required dependencies using npm:

    npm install
    
  4. Start the development server:

    npm start

About

CollabSphere is a versatile collaboration tool platform built using the MERN stack (MongoDB, Express.js, React, Node.js). It can be deployed either on-premises or in the cloud, ensuring data integrity within the organization.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published