Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Streamify 🎥💬

Streamify is a real-time video calling and chat application built using the MERN Stack. It enables users to communicate through instant messaging and high-quality video calls while maintaining a modern UI and secure authentication system.

The platform includes a friends system, onboarding flow, real-time communication, and customizable UI themes, making it a complete full-stack communication application.


🚀 Features

  • 🔐 JWT Authentication – Secure login and signup system
  • 📄 User Onboarding Flow – Guided setup for new users
  • 👥 Friends System – Add and manage friends
  • 💬 Real-Time Chat – Instant messaging between users
  • 📹 Video Calling – High-quality video communication
  • 🎨 32 UI Themes – Customizable interface themes
  • 🚨 Protected Routes – Secure pages accessible only to authenticated users
  • 🛠 Custom React Hooks – Reusable logic and clean architecture
  • 🧪 API Testing – Reliable and tested backend endpoints
  • 🚀 Deployment Ready – Structured for easy production deployment

🛠 Tech Stack

Frontend

  • React.js
  • TanStack Query
  • Tailwind CSS
  • Vite

Backend

  • Node.js
  • Express.js

Database

  • MongoDB

Authentication

  • JWT (JSON Web Token)

Video Calling

  • Stream Video API

📂 Project Structure

Streamify
│
├── backend
│   ├── node_modules
│   ├── src
│   ├── .env
│   ├── package.json
│
├── frontend
│   ├── dist
│   ├── node_modules
│   ├── public
│   ├── src
│   ├── .env
│   ├── index.html
│   ├── tailwind.config.js
│   ├── vite.config.js
│
├── helperLinks
│   └── links.txt
│
├── package.json
└── README.md

⚙️ Installation & Setup

1️⃣ Clone the repository

git clone https://github.com/your-username/streamify.git
cd streamify

2️⃣ Setup Backend

cd backend
npm install

Create a .env file inside /backend and add:

PORT=5001
MONGO_URI=your_mongo_uri
STEAM_API_KEY=your_steam_api_key
STEAM_API_SECRET=your_steam_api_secret
JWT_SECRET_KEY=your_jwt_secret
NODE_ENV=development
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

Run backend server:

npm run dev

3️⃣ Setup Frontend

Open a new terminal:

cd frontend
npm install

Create .env inside /frontend:

VITE_STREAM_API_KEY=your_stream_api_key

Run frontend:

npm run dev

🌐 Running the Application

Frontend will run on:

http://localhost:5173

Backend will run on:

http://localhost:5001

🔐 Environment Variables

Backend

Variable Description
PORT Backend server port
MONGO_URI MongoDB connection string
STEAM_API_KEY Stream API key
STEAM_API_SECRET Stream API secret
JWT_SECRET_KEY JWT authentication secret
NODE_ENV Environment mode

Frontend

Variable Description
VITE_STREAM_API_KEY Stream Video API key

🚀 Future Improvements

  • Group video calling
  • Screen sharing
  • Message notifications
  • File sharing support
  • Mobile responsive improvements

📌 Author

Om Shukla

B.Tech Student – GL Bajaj Group of Institutions Full Stack Web Developer (MERN)


⭐ Support

If you like this project, consider giving it a ⭐ on GitHub.

Releases

Packages

Contributors

Languages