Kei-K23 / streamify

Streamify is a streaming web app(like Twitch) that can connect your favorite streaming software. Provide simple communication with your viewers and other essential features that need in streaming application.

Streamify (Streaming web application)

Overview

Streamify is a streaming web app(like Twitch) that can connect your favorite streaming software. Provide simple communication with your viewers and other essential features that need in streaming application.

Features

Key Features:

• Streaming using RTMP / WHIP streaming protocols
• Connecting Next.js app to OBS / Your favorite streaming software
• Authentication
• Thumbnail upload
• Live viewer count
• Live statuses
• Real-time chat using sockets
• Following system
• Blocking system
• Kicking participants from a stream in real-time
• Streamer / Creator Dashboard
• Slow chat mode
• Followers only chat mode
• Enable / Disable chat
• Collapsible layout (hide sidebars, chat etc, theatre mode etc.)
• Home page recommending streams, sorted by live first
• Search results page with a different layout
• Syncing user information to our DB using Webhooks
• Syncing live status information to our DB using Webhooks
• Community tab
• Grouped routes & layouts
• MySQL
• Deployment

Tech Stack

• Next.js 14 (server action for data mutation)
• Postgresql (Neon cloud)
• Prisma
• Clerk (Auth)
• TypeScript
• Tailwind / ShadcnUI
• Livekit (Video streaming & WebRTC)

Getting Started

Prerequisites

• Node.js and npm installed on your machine.
• Postgresql database for storing application data.

Installation

1. Clone the repository: git clone https://github.com/Kei-K23/task-mingle
2. Navigate to the project directory: cd your-web-app
3. Install dependencies: npm install
4. Configure environment variables.
5. Start the application locally: npm run dev

Configuration

Make sure to set the following environment variables:

• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<YOUR_CLERK_PUBLISHABLE_KEY>

• CLERK_SECRET_KEY=<YOUR_CLERK_SECRET_KEY>

• NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in<modify_as_you_need>

• NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up<modify_as_you_need>

• NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/<modify_as_you_need>

• NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/<modify_as_you_need>

• NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=<YOUR_UNSPLASH_ACCESS_KEY>

• NEXT_PUBLIC_UNSPLASH_SECRET_KEY=<YOUR_UNSPLASH_SECRET_KEY>

• DATABASE_URL=<YOUR_POSTGRESQL_DATABASE_CONNECTION_STRING>

• NEXT_PUBLIC_LIVEKIT_WS_URL=<YOUR_NEXT_PUBLIC_LIVEKIT_WS_URL>

• LIVEKIT_API_KEY=<YOUR_LIVEKIT_API_KEY>

• LIVEKIT_SECRET_KEY=<YOUR_LIVEKIT_SECRET_KEY>

• LIVEKIT_API_URL=<YOUR_LIVEKIT_API_URL>

• UPLOADTHING_SECRET=<YOUR_UPLOADTHING_SECRET>

• UPLOADTHING_APP_ID=<YOUR_UPLOADTHING_APP_ID>

Contributing

We welcome contributions from the community! If you find a bug or have an idea for an improvement, please open an issue or submit a pull request.

License

This project is licensed under the MIT License.

Acknowledgments

• Twitch for the inspiration.
• Build a Twitch Clone using Next.js 14, React, Prisma, Tailwind, MySQL | Full Course 2023 | Part 1/2 for the inspiration and learning.

---

Happy collaborating with streamify! 🚀