ProComm - Video Conference Application

A modern, feature-rich video conferencing application built with React, Node.js, Socket.IO, and WebRTC.

🌟 Features

HD Video & Audio Calls with WebRTC technology
Real-time Chat with message history
Screen Sharing for presentations
Reactions & Emojis for interactive meetings
Participant Management with user controls
Built-in Code Space for real-time coding and technical interviews
Advanced Assessment Mode with secure assignments, live proctoring, question randomization, negative marking, and customizable evaluation settings
More Tools including Notepad and Whiteboard
Mobile Responsive design for all devices
Professional UI with modern design

🚀 Live Demo

Visit: https://procomm-india.vercel.app

Screenshot

🛠️ Tech Stack

Frontend: React 18, TailwindCSS, Lucide React Icons
Backend: Node.js, Express, Socket.IO
WebRTC: PeerJS for peer-to-peer connections
Styling: TailwindCSS with responsive design
Deployment: Vercel for production hosting

🚀 Features

Modern React Frontend with responsive design
Dark/Light Theme Toggle with localStorage persistence
Interactive Chatbot Widget with voice input and text messaging
Real-time Video Conferencing using WebRTC and Socket.IO
Meeting Management - Create, join, and manage video meetings
Participant Management - Email-based meeting invitations and validation
Screen Sharing capabilities
Chat Messaging during meetings
Professional UI/UX with smooth animations and transitions

🛠️ Tech Stack

Frontend

React 18 with functional components and hooks
React Router for navigation
Tailwind CSS for styling
Framer Motion for animations
Lucide React for icons
Socket.IO Client for real-time communication
PeerJS for WebRTC connections

Backend

Node.js with Express server
Socket.IO for real-time messaging
UUID for meeting ID generation
CORS for cross-origin requests
Helmet for security
Compression for performance

📁 Project Structure

procomm-app/
├── client/                 # React frontend
│   ├── public/
│   ├── src/
│   │   ├── components/     # Reusable components
│   │   │   ├── Navbar.js
│   │   │   ├── Chatbot.js
│   │   │   ├── JoinMeetingModal.js
│   │   │   └── CreateMeetingModal.js
│   │   ├── pages/          # Page components
│   │   │   ├── Login.js
│   │   │   ├── Home.js
│   │   │   ├── Profile.js
│   │   │   ├── Support.js
│   │   │   └── VideoRoom.js
│   │   ├── context/        # React contexts
│   │   │   └── ThemeContext.js
│   │   ├── App.js
│   │   ├── index.js
│   │   └── index.css
│   └── package.json
├── server/                 # Node.js backend
│   ├── routes/
│   │   ├── auth.js         # Authentication routes
│   │   └── meetings.js     # Meeting management routes
│   ├── server.js           # Main server file
│   └── package.json
└── package.json            # Root package.json with scripts

🎯 Key Features Implemented

1. Theme System

Toggle between Light and Dark modes
Persistent theme settings using localStorage
Smooth transitions between themes

2. Chatbot Widget

Minimizable/maximizable widget
Voice input using Web Speech API
Text messaging capabilities
Positioned at bottom-right corner

3. Meeting Management

Create meetings with participant invitations
Join meetings with email validation
Real-time participant management
Meeting access control

4. Video Conferencing

WebRTC peer-to-peer connections
Camera and microphone controls
Screen sharing functionality
Real-time chat during meetings

5. Modern UI/UX

Responsive design for all screen sizes
Professional color palette maintained
Smooth animations and transitions
Clean, modern interface

6. Code Space

Built-in collaborative code editor inside the meeting room
Supports writing and editing code during live meetings
Ideal for coding interviews, technical discussions, and pair programming
Provides a distraction-free coding environment

7. Assessment Mode

Create and manage assessments with multiple question types:

Multiple Choice (Checkbox)
True or False
Paragraph/Descriptive

Advanced assessment features:

Negative marking support
Configurable retake attempts
Live AI/WebRTC-based proctoring during assessments
Question and answer shuffling for each candidate
Assign assessments only to selected candidates
After publishing, assigned assessments automatically appear in the candidate's "Assigned to Me" section
Candidates can start and complete assessments directly from their dashboard

🚀 Getting Started

Prerequisites

Node.js (v16 or higher)
npm or yarn
Firebase account (for authentication and database)
Cloudinary account (for image uploads)

Installation

Clone the repository

git clone <repository-url>
cd procomm-app

Install all dependencies

npm run install-all

⚠️ IMPORTANT: Set up environment variables

Create a .env file in the client directory:

# Firebase Configuration
REACT_APP_FIREBASE_API_KEY=your_firebase_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
REACT_APP_FIREBASE_PROJECT_ID=your_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id
REACT_APP_FIREBASE_MEASUREMENT_ID=your_measurement_id

# Cloudinary Configuration
REACT_APP_CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
REACT_APP_CLOUDINARY_UPLOAD_PRESET=your_upload_preset

How to get these credentials:

Firebase: Go to Firebase Console → Your Project → Project Settings → General → Your apps
Cloudinary: Sign up at Cloudinary → Settings → Upload → Create unsigned upload preset

⚠️ NEVER commit the .env file to Git! It's already in .gitignore.

Start the development environment

npm run dev

This will start:

React frontend on http://localhost:3000
Node.js backend on http://localhost:3001
PeerJS server on http://localhost:3002

Individual Commands

Frontend only: npm run client
Backend only: npm run server
PeerJS server only: npm run peer

🔧 Configuration

Environment Variables (Server)

Create a .env file in the server directory:

NODE_ENV=development
PORT=3001
CLIENT_URL=http://localhost:3000
PEER_HOST=localhost
PEER_PORT=3002

📱 Usage

Creating a Meeting

Go to the Dashboard
Click "New Meeting"
Add meeting title and description
Invite participants by email
Start the meeting or share the meeting link

Joining a Meeting

Click "Join Meeting" on the Dashboard
Enter the meeting ID or link
Provide your name and email
Join the meeting (email must be on the invited list)

Using the Chatbot

Click the chat icon in the bottom-right corner
Type messages or use the microphone for voice input
Get help with ProComm features and troubleshooting

Theme Toggle

Go to Profile → Settings
Use the Theme toggle to switch between Light/Dark mode
Setting is automatically saved to localStorage

🎨 Design System

Color Palette

Primary Blue: #2563eb (maintained from original)
Success Green: #28a745
Gray Scale: Various shades for backgrounds and text
Dark Mode: Adjusted colors for dark theme

Typography

Font: 'Segoe UI', Arial, sans-serif
Responsive text sizes
Consistent font weights

🚀 Deployment

Production Build

npm run build
npm start

Environment Setup

Set NODE_ENV=production
Configure proper CORS origins
Set up SSL certificates for production

✅ Security Audit Completed (January 2, 2026)

🤝 Contributing

Fork the repository
Create a feature branch
Make your changes
Test thoroughly
Submit a pull request

📄 License

You may not use, copy, modify, or distribute this project without prior permission.
For permission requests, please contact me: enquiretovarun@gmail.com

See the LICENSE file for details.

👨‍💻 Author

Varun Kumar R - Software Developer

🎉 What's New

Complete React Migration - Converted from HTML/CSS/JS to modern React
Enhanced UI/UX - Professional, modern design with improved user experience
Theme System - Dark/Light mode toggle with persistence
Interactive Chatbot - AI-powered assistant with voice and text input
Better Architecture - Clean separation between frontend and backend
Improved Performance - Optimized code and better resource management
Mobile Responsive - Works seamlessly on all device sizes

The application maintains the same core functionality while providing a much more modern, professional, and user-friendly experience.

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
api		api
client		client
server		server
.env.example		.env.example
.gitignore		.gitignore
License		License
README.md		README.md
cors.json		cors.json
firebase.json		firebase.json
firestore.indexes.json		firestore.indexes.json
firestore.rules		firestore.rules
package-lock.json		package-lock.json
package.json		package.json
storage.rules		storage.rules
vercel.json		vercel.json

Folders and files

Latest commit

History

Repository files navigation

ProComm - Video Conference Application

🌟 Features

🚀 Live Demo

Screenshot

🛠️ Tech Stack

🚀 Features

🛠️ Tech Stack

Frontend

Backend

📁 Project Structure

🎯 Key Features Implemented

1. Theme System

2. Chatbot Widget

3. Meeting Management

4. Video Conferencing

5. Modern UI/UX

6. Code Space

7. Assessment Mode

🚀 Getting Started

Prerequisites

Installation

Individual Commands

🔧 Configuration

Environment Variables (Server)

📱 Usage

Creating a Meeting

Joining a Meeting

Using the Chatbot

Theme Toggle

🎨 Design System

Color Palette

Typography

🚀 Deployment

Production Build

Environment Setup

✅ Security Audit Completed (January 2, 2026)

🤝 Contributing

📄 License

👨‍💻 Author

🎉 What's New

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages