Simple Video Chat Application

This repository contains the source code for a simple video chat application developed using React for the frontend, NodeJS for the backend, and Jitsi as the video conferencing service.

🚀 simple-video-chat-app.vercel.app

Features

• 🎥👥 Video Chat Rooms: Users can create and join video chat rooms by entering a room name.

• 📹 Participant Video Streams: Display video streams of all participants in the video chat room.

• ⚛️ Functional Components: Utilize React functional components and hooks for efficient development.

• 🎨 Clear UI Design: Implement a basic UI with clear and intuitive design for a seamless user experience.

• 🚀 NodeJS Server: Set up a NodeJS server using Express to serve the React application.

• 🌐 API Endpoints: Implement necessary API endpoints to support room management and interactions.

• 📞 Jitsi Integration: Integrate Jitsi Meet API to handle video conferencing functionalities.

• 🔒 User Authentication (Bonus): Optionally implement user authentication for added security.

• 💬 Chat Functionality (Bonus): Add chat functionality within the video chat room for communication.

• 📝 TypeScript Usage (Bonus): Use TypeScript for both the frontend and backend for type safety.

• 📄 Documentation: Provide clear instructions on setting up and running the application.

• 🌟 User Experience: Focus on creating a seamless user experience and interface design.

• 👨‍💻 Code Quality: Ensure code quality and organization for maintainability and readability.

• 🎤👋 Event Handling: Properly handle video chat events like user joining, leaving, and audio/video toggling.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/kaleabo/simple-video-chat-app.git
cd simple-video-chat-app

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

# Your Jitsi app id
NEXT_PUBLIC_JITSI_APP_ID=""

Replace the placeholder values with your domain & meeting room name.

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

Acknowledgements

• Jitsi for making this project possible

License

MIT