Skip to content

GITHUB_README.md

Latest commit

 

History

History
156 lines (122 loc) · 6.63 KB

GITHUB_README.md

File metadata and controls

156 lines (122 loc) · 6.63 KB
Raw
React Vite Express MongoDB Tailwind CSS

🎥 Streamify

A full-stack, real-time video calling and messaging platform built with the MERN stack and Stream API.

📖 About The Project

Streamify is a modern, responsive web application designed to connect users through seamless real-time video calls and text messaging. Whether you're looking to catch up with friends, collaborate with a team, or build out a scalable community, Streamify provides the infrastructure to do so effortlessly.

The platform is designed with user experience in mind, boasting dynamic theming capabilities, instantaneous communication powered by WebRTC (via Stream), and a robust backend ensuring your data is secure.

✨ Key Features

  • 🔐 Secure Authentication: JWT-based stateless authentication with robust password hashing (bcrypt).
  • 📹 Real-Time Video & Chat: Integrated with the Stream.io SDK for enterprise-grade video calling and messaging.
  • 🤝 Social Mechanics: Discover recommended users, send friend requests, and manage your network dynamically.
  • 🎨 Dynamic Theming: Globally manageable UI themes using DaisyUI and Zustand state management.
  • ⚡ Lightning Fast: Powered by Vite on the frontend for instant HMR and optimized production builds.
  • 🔄 Efficient Data Fetching: Utilizes @tanstack/react-query to eliminate manual loading states and handle caching effectively.

🛠️ Tech Stack

Frontend

  • React.js (Bootstrapped with Vite)
  • Tailwind CSS & DaisyUI (Styling & Theming)
  • Zustand (Global State Management)
  • TanStack Query (Server-State Management)
  • React Router v7 (Navigation)
  • Stream Chat React SDK (Real-time UI components)

Backend

  • Node.js & Express.js (REST API)
  • MongoDB & Mongoose (Database & ODM)
  • JSON Web Tokens (JWT) (Session Management)
  • Stream Server SDK (Websocket integration)

📁 Folder Structure

streamify/
├── backend/                  # Express API Server
│   ├── src/
│   │   ├── controllers/      # Route controllers (auth, chat)
│   │   ├── lib/              # Database & Stream API configurations
│   │   ├── middelware/       # Authentication middleware
│   │   ├── models/           # Mongoose schemas
│   │   ├── routes/           # Express API routes
│   │   └── server.js         # Backend entry point
│   └── package.json
├── frontend/                 # React Vite Client
│   ├── public/
│   ├── src/
│   │   ├── components/       # Reusable UI components
│   │   ├── constants/        # Application constants
│   │   ├── hooks/            # Custom React hooks
│   │   ├── lib/              # Axios configuration
│   │   ├── pages/            # Application routes
│   │   ├── store/            # Zustand global state
│   │   ├── App.jsx           # Main React component
│   │   └── main.jsx          # Frontend entry point
│   └── package.json
└── package.json              # Root project dependencies & deployment scripts

🚀 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

Local Installation

  1. Clone the repository

    git clone https://github.com/yourusername/streamify.git
cd streamify

  2. Setup Environment Variables Create a .env file in the backend directory:

    PORT=5001
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secure_random_string
STREAM_API_KEY=your_stream_api_key
STREAM_API_SECRET=your_stream_api_secret
NODE_ENV=development

    Create a .env file in the frontend directory:

    VITE_STREAM_API_KEY=your_stream_api_key

  3. Install Dependencies and Build Run the following command from the root folder to install dependencies for both frontend and backend, and build the Vite React application:

    npm run build

  4. Start the Application Fire up the backend server (which will also serve your built frontend):

    npm start

    Your app will be running live at http://localhost:5001!

💡 Suggestions & Future Roadmap

Streamify is continuously evolving, and we want your feedback! We're actively looking for suggestions on how to improve the app.

Some features currently on our roadmap include:

  • Group Video Calls: Expanding 1-on-1 calls to support group meetings.
  • Screen Sharing: Allowing users to broadcast their screens during active video calls.
  • Push Notifications: Integrating web push notifications for incoming calls and messages.
  • Custom Avatars & Profiles: Allowing richer user profiles and banner images.

Have an idea? If you have a feature suggestion, found a bug, or think a specific piece of the UI could be improved, please let us know!

  • Open an Issue: Head over to the Issues tab and describe your suggestion or bug in detail.
  • Start a Discussion: Have a broader idea? Start a thread in the GitHub Discussions tab.

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📄 License

Distributed under the ISC License. See LICENSE for more information.

If you find this project helpful or interesting, please consider leaving a ⭐️ on the repository!