NexCall - Premium Video Calling App

🚀 Live Demo: https://video-call-app-frontend-pi.vercel.app

A modern, high-performance video calling application built with React, WebRTC, and Socket.IO. NexCall features a sleek, premium glassmorphic user interface designed with Tailwind CSS, offering a seamless and beautiful experience for users to connect instantly.

Features

• Real-Time Video & Audio: Low-latency peer-to-peer connection powered by WebRTC.
• Signaling Server: Reliable signaling built with Express and Socket.IO.
• Premium UI: Aesthetic dark theme, animated gradients, and glassmorphic components using Tailwind CSS.
• Dynamic Layout: Responsive video grid that elegantly adapts when users join or leave the room.
• Room-Based Calls: Generate or enter a custom room code to join private video sessions.
• Hardware Controls: Easily toggle your microphone and camera on/off before and during the meeting.

Tech Stack

Frontend

• Framework: React 19 via Vite
• Routing: React Router DOM
• Styling: Tailwind CSS (v4) & tw-animate-css
• Icons: Lucide React
• Notifications: Sonner
• WebRTC API: Native browser navigator.mediaDevices and RTCPeerConnection

Backend

• Runtime: Node.js
• Framework: Express.js
• WebSockets: Socket.IO for real-time signaling

Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn

Installation

1. Clone the repository (if applicable):

   git clone https://github.com/HimanshuPadecha/Next-call
   cd video-call-app

2. Setup the Backend:

   cd backend
   npm install

   Create a .env file in the backend directory if required by your configuration, then start the development server:

   npm run dev

3. Setup the Frontend: Open a new terminal window and navigate to the frontend directory:

   cd frontend
   npm install

   Start the Vite development server:

   npm run dev

4. Open the App: Navigate to http://localhost:5173 in your browser. You can enter a room code and join the call. Open the same URL with the room code in another tab or device to test the peer-to-peer connection!

Usage

1. On the landing page, enter a desired Room Code and click Join Room.
2. On the pre-join screen, grant browser permissions for your microphone and camera.
3. Enter your Name and toggle your hardware controls as needed before clicking Join Meeting.
4. Once inside, you can mute, turn off your video, or leave the meeting using the floating dock controls at the bottom of the screen.

License

This project is licensed under the ISC License.