CollaBoard is a dynamic online learning platform that seamlessly integrates video conferencing and interactive whiteboards for real-time collaboration.

📚 Table of Contents

• 💬 Introduction
• 🚀 Features
• ▶️ Demo
• 🧰 Tech Stack
• 🧠 How it Works
• 🛠️ Installation
• 🧪 Usage
• ⚙️ Configuration
• 📁 Project Structure
• 📝 License
• ❓FAQ
• 📄 Documentation
• 👥 Contributors
• 🙏 Acknowledgments

💬 Introduction

CollaBoard is an online learning collaborative platform that allows users to video chat and collaborate in real time on a shared whiteboard. This product is designed to enhance learning in virtual classrooms and tutoring sessions. Users are also able to generate summarize of their learning session using Artificial Intelligence and pay attention to real time speech to text captions.

🚀 Features

Core Features

• Real-time video chat between users
• Interactive shared whiteboard
• Simultaneous drawing, annotating, and text editing
• Chat messaging system
• Teacher and student controls

Learning Session Features

• Voice and video chat
• Realtime collaborative whiteboard
• Chat messaging system
• Mute/Unmute button
• Camera On/Off function
• Share screen function
• Virtual Background
• Raise hand
• Record

AI Integration

• AI-powered session summaries using Google Gemini
• Real-time speech-to-text transcription
• PDF Generation of AI-powered summaries

Authentication & User Management

• User authentication with session codes
• User Authentication with Google, Microsoft, or GitHub (OAuth integration) or account creation
• User database with full CRUD application
• Database storage of account usernames and passwords

User Experience and Interface

• Modern user interface
• Splash loading screen
• Profile creation and personalization
• Main Menu with dark mode and light mode
• Login/Register Page

Database Versatility

• Azure database connectivity
• Regular Expression Field Validation
• JSON parsing and serialization/deserialization

▶️ Demo

Watch the Demo Here!

🧰 Tech Stack

• Java JDK 23 – Core programming language for the application
• Apache Mavern - Dependency Management tool
• JavaFX – GUI framework used to build the user interface
• Javascript - Creates webpage for SignalR and WhiteBoardTeam API
• HTML5 - Creation of video chatting web interface
• .NET/C# - Backend integration of Azure SignalR services
• CSS3 – Stylesheets for customizing the JavaFX user interface
• Google Gemini – AI model used to generate session summaries
• Microsoft Azure Database for MySQL flexible server – Manages MySQL database hosting
• Microsoft Azure Speech Services – Converts real-time speech to text
• OAuth 2.0 – Authentication protocol used for secure user login and session authorization
• MySQL – Relational database for storing user profiles, transcripts, and session data
• JBCrypt - Adds secure password hashing
• Java-doten - Loads environmental variables from .env file
• iText 7 - Creates PDF file of generated summary
• Microsoft Authentication Library for Java - Allows authentication with microsoft accounts
• WhiteBoard Team API - Creates collaborative whiteboard interface
• Azure SignalR - Establishes real-time video chatting feature and learning session management
• Azure Websites - Allows for hosting of learning session
• JxBrowser - Creates for an embedded Chromium browser in JavaFX
• PeerJS - Establishes peer-to-peer video calling
• SignalR App created by Saim - Video chat application Link
• IntelliJ Idea - Main IDE

🧠 How it Works

Splash Screen

After intially running the application, users are presented with a splash screen to make startup feel smoother and give the users something to look at. It introduces users to the app name and logo.

Login Screen with Regular Expression

After the splash screen has finished loading, users can log in with their credentials, or sign in with their Google, Microsoft, or GitHub account. Users can also create an account.

Main Menu with toggleable dark mode

After signing in, users are shown the main menu page. Here, they can enter a session code to join a learning session after clicking on join call and entering a session code. Users can also start a new call by clicking on the start new call button. During the learning session, an AI-powered live transcription is formulated. Users can click on the MyProfile button to see and edit their profile. The Profile Database button allows administrators to see an active list of all users including their email and passwords. Users can also change the theme of the app from light mode to dark mode.

CollaBoard Learning Session

During a CollaBoard learning session, users can communicate via voice and video, with options to mute/unmute themselves, toggle their camera, share their screen, enable a virtual background, raise their hand, or start a recording. They can also collaborate on a shared whiteboard and exchange messages through a chat feature.

Azure Text to Speech and AI-powered summary

During a learning session, audio is transcribed into text in real time using Azure Speech to Text, with the output displayed in a dedicated text area. Once the session ends, an AI-generated summary is created using Google Gemini. This summary is then exported as a PDF file saved to the project root directory.

Profile Page with Regular Expression

The profile page allows users to upload a profile picture and edit their personal details, including first name, last name, email, password, and bio.

Profile Database with Microsoft Azure

The profile database allows administrators to manage all registered CollaBoard accounts. It provides functions such as connect, display all users, insert new entries, query by ID, delete by ID, and edit user information by ID. It contains text-fields such as ID, first name, last name, email, and password which validated using regular expressions to ensure data integrity and proper formatting.

🛠️ Installation

1. Clone the repository using IntelliJ IDEA

Use the git clone function on link https://github.com/d-jason32/AdvancedProgramming_Capstone_Project.git
Open the repo

2. Set up your environment

• Java Development Kit 23
• JavaFX SDK
• Mavern
• Azure Flexible MySQL server
• Azure Speech Services
• SignalR
• Google Gemini

3. Run the project

• Click the run button on IntelliJ Idea

🧪 Usage

1. Launch the application

Run this command:

• Click the run button on IntelliJ Idea

2. Log in or register

Use your credentials or create a new account to enter the system.

3. Join a session

Create a new learning session or enter a session code provided by the instructor.

4. Use core features

• Transcription: Speak while in a session to see real-time text
• AI Summary: After a learning session is over, use Google Gemini to generate a summary of the session
• Profile Database: Check the database to see all registered profiles

⚙️ Configuration

After installing the project, update API Keys:

Required keys:

Key	Description
MYSQL_SERVER_URL	JDBC URL to your MySQL database
DB_URL	Database name
USERNAME	Your database username
PASSWORD	Your database password
AZURE_SPEECH_KEY	Key for Azure Speech API
API_KEY	Google Gemini API Key
SIGNAL_R_API_KEY	Key for SignalR video chat

📁 Project Structure

advancedprogramming_capstone_project/                        
├── src/
    └── main/
        ├── java/
        │   └── edu/farmingdale/advancedprogramming_capstone_project/
        │       ├── AI_Helper.java
        │       ├── CapstoneApp.java
        │       ├── ConnDbOps.java
        │       ├── DatabaseController.java
        │       ├── GeminiService.java
        │       ├── LoginController.java
        │       ├── MainController.java
        │       ├── Person.java
        │       ├── ProfileConnDbOps.java
        │       ├── ProfileController.java
        │       ├── SpeechToTextService.java
        │       ├── SplashScreenController.java
        │       ├── SummaryController.java
        │       └── TranscriptionController.java
        └── resources/
            └── edu/farmingdale/advancedprogramming_capstone_project/
                ├── fonts/                  
                ├── images/               
                ├── styling/               
                │   ├── database_styles.css
                │   ├── light_mode.css
                │   ├── login_page_styles.css
                │   ├── main_page_styles.css
                │   ├── profile.css
                │   ├── style.css
                │   └── video-style.css
                ├── config.properties      
                ├── database.fxml
                ├── login-screen.fxml
                ├── main.fxml
                ├── password-reset-screen.fxml
                ├── profilePage.fxml
                ├── splash-screen.fxml
                ├── SummaryView.fxml
                └── TranscriptionView.fxml

📝 License

• This project is licensed under the MIT License. Feel free to use, modify, and distribute it as permitted.

❓FAQ

What does this project do?

This project is a real-time collaboration tool for classrooms, allowing users to join sessions, follow along with real time transcriptions, and generate session summaries.

Does it support dark mode?

Yes! Click the toggle in the main menu.

How do I sign in or make an account?

In the login screen, you can sign in with GitHub or Google. To make an account, follow the instructions for account creation.

How does the speech-to-text feature work?

The app uses Azure Speech Services to convert microphone input into text in real time.

Is there support for multiple users?

Yes. Teachers can create sessions and students can join using a session code.

📄Documentation

View the Documentation

👥 Contributors

@Jason Devaraj	@Saim Sameer	@Yohangel Adames	@Milton Moses	@Obye Shaji

🙏 Acknowledgments

• Special thanks to Dr. Moaath Alrajab for his guidance and support throughout the development of this project.