Skip to content

project_documentation.md

Latest commit

 

History

History
47 lines (35 loc) · 4.67 KB

project_documentation.md

File metadata and controls

47 lines (35 loc) · 4.67 KB

Virtual Study Hub - Project Documentation

1. Abstract

The Virtual Study Hub is a dynamic, full-stack web application designed to facilitate online learning and collaboration among students and educators. By leveraging real-time communication technologies and a robust web architecture, the platform enables users to interact instantly, manage study materials, and engage in collaborative learning environments. The system aims to bridge the gap in remote education by providing an integrated solution that combines interactive discussion capabilities, secure user authentication, and seamless file handling in a single centralized hub.

2. Overview

The project is built on modern web development practices utilizing a complete JavaScript stack (MERN stack). It features a distinct separation between the client-side presentation layer and the server-side logic and database operations. Real-time features such as live chat or instant notifications are powered by WebSockets, allowing instant data exchange without page reloads. The application ensures secure access through robust authentication mechanisms while supporting structured data management for users, courses, or study materials.

3. Description

The Virtual Study Hub serves as an interactive platform containing a Frontend interface built with React and a Backend API service powered by Node.js and Express.

  • Real-Time Collaboration: Integration of socket.io provides live bidirectional communication, which is crucial for features like instant messaging, live Q&A, or real-time study rooms.
  • Secure Authentication: Using bcryptjs and jsonwebtoken (JWT), the platform ensures that user credentials are encrypted and sessions are securely managed.
  • File Management: With multer integrated into the backend, users can upload, share, and access study documents, assignments, and structural media smoothly.
  • Data Persistence: The application relies on mongoose to interact with a MongoDB database, ensuring that user data, messages, and uploaded study records are reliably stored, indexed, and retrieved.

4. Technical Workflow

4.1. Frontend Technical Workflow

Technology Stack: React (created via Create React App), Socket.io-client.

Execution Flow:

  1. Initialization: The frontend server starts via npm start (using react-scripts), serving the React SPA (Single Page Application) locally on port 3000 by default.
  2. Component Rendering: React components render the user interface. It manages internal state and handles user inputs (e.g., login forms, messaging box, file uploads).
  3. API Communication: Upon taking actions like logging in or accessing study materials, the frontend makes standard HTTP (REST) requests using fetch or axios to the backend Node.js endpoints.
  4. Real-time Connection: Once authenticated, the socket.io-client establishes a persistent WebSocket connection to the backend server. It listens for events (like receive_message) and dispatches events (like send_message) instantly, updating the UI React state without page reloads.

4.2. Backend Technical Workflow

Technology Stack: Node.js, Express.js, MongoDB (Mongoose), Socket.io, JWT, bcryptjs, Multer.

Execution Flow:

  1. Server Initialization: The server boots up via npm run dev (using nodemon for development), loading environment variables via dotenv. The server runs locally typically on port 5000 or similar.
  2. Database Connection: The system attempts to connect to the MongoDB (Atlas or local) cluster using the Mongoose library. Connection parameters and DNS resolutions are configured to ensure stable access.
  3. HTTP Server & Routing (Express):
    • Express sets up middleware such as cors to allow cross-origin requests from the React frontend.
    • It intercepts incoming HTTP requests, routing them to specific controllers (e.g., Auth, Uploads, Fetching Data).
  4. Authentication (JWT & bcryptjs):
    • On signup, passwords are mathematically hashed using bcryptjs before being stored in MongoDB.
    • On login, a JSON Web Token (JWT) is generated and returned to the frontend. All subsequent protected endpoints require this JWT for authorization.
  5. File Handling (Multer): When file upload requests hit the REST API, multer middleware intervenes to process the multipart-form data, saving files appropriately and allowing the server to store the file path in the MongoDB database.
  6. Real-Time Engine (Socket.io): An instance of socket.io is mounted on top of the Express server. It listens for WebSocket connections from the frontend, manages distinct user rooms/channels, and broadcasts messages/events simultaneously to connected clients globally.