Add MIT license, CI workflow, and live demo link

.github/workflows/ci.yml

@@ -0,0 +1,45 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  backend:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: backend
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+          cache-dependency-path: backend/package-lock.json
+      - run: npm ci
+      - run: npm run build
+
+  frontend:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: frontend
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run build
+        env:
+          VITE_API_URL: http://localhost:3000/api
+          VITE_SOCKET_URL: http://localhost:3000
+          VITE_SIP_WS_URL: wss://sip.example.com
+          VITE_APP_PORT: 5173
+          VITE_APP_NAME: ChatSphere

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Keyur Machhi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,5 +1,11 @@
 # Chat Sphere — MERN + WebRTC Chat App
 
+[![CI](https://github.com/sudo-devKm/chat-sphere/actions/workflows/ci.yml/badge.svg)](https://github.com/sudo-devKm/chat-sphere/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+[![Live Demo](https://img.shields.io/badge/demo-live-brightgreen)](https://chat-sphere-tawny.vercel.app/)
+
+**[Live Demo →](https://chat-sphere-tawny.vercel.app/)**
+
 A modern chat & WebRTC calling application built with TypeScript:
 
 - Backend: Node.js, Express, Socket.IO, MongoDB, Redis, JWT authentication, S3 integration
@@ -315,7 +321,7 @@ Contributing
 
 License
 
-- This repository does not include an explicit license file. Add a LICENSE (for example MIT) if you want to make the code open source.
+- Licensed under the [MIT License](LICENSE).
 
 ---
 

frontend/.env.example

@@ -0,0 +1,5 @@
+VITE_API_URL=http://localhost:3000/api
+VITE_SOCKET_URL=http://localhost:3000
+VITE_SIP_WS_URL=wss://sip.example.com
+VITE_APP_PORT=5173
+VITE_APP_NAME=ChatSphere

frontend/eslint.config.js

@@ -21,7 +21,7 @@ export default defineConfig([
 		},
 		rules: {
 			'@typescript-eslint/no-explicit-any': 'off',
-			'@typescript-eslint/no-unused-var': 'warn',
+			'@typescript-eslint/no-unused-vars': 'warn',
 		},
 	},
 ]);

frontend/src/components/call/CallTimer.tsx

@@ -18,7 +18,6 @@ export const CallTimer: React.FC<CallTimerProps> = ({
 
 	useEffect(() => {
 		if (!startTime) {
-			setDuration(0);
 			return;
 		}
 
@@ -43,7 +42,7 @@ export const CallTimer: React.FC<CallTimerProps> = ({
 		<div className={`flex items-center gap-2 ${className}`}>
 			{showIcon && <AccessTimeIcon className='w-4 h-4 text-gray-400' />}
 			<Typography variant='caption' className='font-mono text-gray-400'>
-				{formatTime(duration)}
+				{formatTime(startTime ? duration : 0)}
 			</Typography>
 		</div>
 	);

frontend/src/components/chat/message-input/InputArea.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { TextField, IconButton, Box } from '@mui/material';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import EmojiEmotionsOutlinedIcon from '@mui/icons-material/EmojiEmotionsOutlined';
@@ -32,6 +33,11 @@ export const InputArea = ({
 	fileInputRef,
 }: InputAreaProps) => {
 	const isSendDisabled = uploading || (!message.trim() && !selectedFile);
+	// Track the emoji button DOM node in state (set via the ref callback
+	// below) instead of reading emojiBtnRef.current during render.
+	const [emojiAnchor, setEmojiAnchor] = useState<HTMLButtonElement | null>(
+		null,
+	);
 
 	const handleKeyDown = (e: React.KeyboardEvent) => {
 		if (e.key === 'Enter' && !e.shiftKey) {
@@ -64,7 +70,10 @@ export const InputArea = ({
 			{/* Emoji Button */}
 			<IconButton
 				size='medium'
-				ref={emojiBtnRef}
+				ref={(node) => {
+					emojiBtnRef.current = node;
+					setEmojiAnchor(node);
+				}}
 				onClick={() => setShowEmoji(!showEmoji)}
 				className='bg-white text-gray-600 hover:bg-gray-100 border border-gray-200 shadow-sm'
 				sx={{
@@ -81,7 +90,7 @@ export const InputArea = ({
 
 			<EmojiPickerPopover
 				open={showEmoji}
-				anchorEl={emojiBtnRef.current}
+				anchorEl={emojiAnchor}
 				onClose={() => setShowEmoji(false)}
 				onEmojiClick={onEmojiClick}
 			/>

frontend/src/components/chat/message-input/MessageInput.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { SocketEvent } from '@/constants/socket.events';
-import { useSocket } from '@/providers/SocketProvider';
+import { useSocket } from '@/providers/SocketContext';
 import { toastError } from '@/components/toaster/Toast';
 import { useFileUpload } from '@/hooks/useFileUpload';
 import { InputContainer } from './InputContainer';

frontend/src/components/chat/message-list/VirtualMessageRow.tsx

@@ -21,6 +21,9 @@ export const VirtualMessageRow = ({
 	return (
 		<div
 			data-index={index}
+			// tanstack-virtual's documented API for dynamic row measurement;
+			// this assigns a callback ref, not a render-time ref read.
+			// eslint-disable-next-line react-hooks/refs
 			ref={rowVirtualizer.measureElement}
 			style={{
 				position: 'absolute',

frontend/src/components/image/ChatImage.tsx

@@ -37,8 +37,18 @@
 	const [dimensions, setDimensions] = useState(initialDimensions || null);
 	const [imageLoaded, setImageLoaded] = useState(false);
 	const [imageError, setImageError] = useState(false);
 	const [_, setClientDimensions] = useState<ImageDimensions | null>(null);
 
+	// Reset states when the preview URL changes (adjusting state during
+	// render instead of an effect avoids an extra render pass)
+	const [prevPreviewUrl, setPrevPreviewUrl] = useState(previewUrl);
+	if (previewUrl !== prevPreviewUrl) {
+		setPrevPreviewUrl(previewUrl);
+		setImageLoaded(false);
+		setImageError(false);
+		setClientDimensions(null);
+	}
+
 	// Calculate display dimensions based on maxWidth constraint
 	const displayDimensions = useMemo(() => {
 		if (!dimensions) {
@@ -118,13 +128,6 @@
 		setImageLoaded(false);
 	};
 
-	// Reset states when URL changes
-	useEffect(() => {
-		setImageLoaded(false);
-		setImageError(false);
-		setClientDimensions(null);
-	}, [previewUrl]);
-
 	// Try to extract dimensions from preview URL if backend dimensions are missing
 	useEffect(() => {
 		if (previewUrl && !dimensions && !loading && !imageError) {