Repository files navigation

(UPDATE) - with the latest dependencies updates, you will have to do some small config changes.

S3MER is an innovative and customizable live streaming platform designed to revolutionize the streaming experience. It offers a feature-rich environment akin to popular platforms, while integrating cutting-edge technologies for enhanced security, customization, and seamless user interaction.

🌟S3MER Platform 🎥

This repository hosts a cutting-edge livestream platform built upon a robust tech stack utilizing TypeScript, React, Next.js, and TailwindCSS to provide a dynamic and responsive user interface. Leveraging the power of Shadcn-ui and Clerk, LiveStreamX delivers a visually immersive experience with personalized themes and advanced user authentication capabilities.

• Home Page
  • logged in
  • live
  • live logged in

• Dashboard
  • dashboard offline
  • dashboard live
  • dashboard about section
  • dashboard live chat

• Search Results
  • offline
  • live

• Live Chat
  • Chat & Community Tab
    >

• Live Badge
  >

• Frontend: TypeScript, React, Next.js, TailwindCSS, Shadcn-ui
• Prisma & MySQL: Ensuring efficient data management and storage.
• Socket.io & WebRTC: Enabling real-time communication and streaming capabilities.
• WebSockets, Clerk & JWT-decode: Strengthening secure data transmission and authentication.
• Livekit: Leveraging Livekit components, client, and server SDKs for enriched streaming functionalities.
• Tanstack/react-table & Zustand: Facilitating seamless data handling and state management.
• Uploadthing & Sonner: Streamlining file uploads and enhancing user interaction.
• Svix & Webhooks: Providing a robust integration framework for external services.
• NGROK: Enabling secure tunneling for local development and testing.
• RTMP and WHIP connections: Supporting diverse streaming protocols for broad compatibility.
• Server actions: Implementing comprehensive server-side functionalities for streamlined operations.

• Real-Time Streaming: Utilizing WebRTC and WebSockets for seamless live streaming capabilities.
• Security: Prioritizing robust security measures for user data and interactions. Integrated authentication, JWT, and additional security layers for user protection.
• Efficient Data Management: Leveraging Prisma, MySQL, and other technologies for efficient data management.
• Cutting-edge Technologies: Leveraging the latest in streaming technology to provide a seamless experience.
• Customizable UI/UX: Developed with TailwindCSS and Shadcn-ui, ensuring an engaging user interface. Empowering users with extensive customization options for their streaming environments.
• Scalable Architecture & Performance: Built with scalability in mind to accommodate growing user bases while maintaining optimal performance with a focus on delivering a smooth streaming experience.

This project is continuously evolving, incorporating new technologies and enhancements to deliver an exceptional live streaming experience. Contributions and feedback from the community are highly encouraged and welcomed!

Contributions to S#MER are welcome! Whether you're passionate about enhancing user experience, optimizing performance, or adding new features, your contributions are valued.

├── .github/# GitHub configuration│   ├── workflows/# GitHub Actions workflows for CI/CD├── actions/# Server actions│   ├── auth.ts# Authentication actions│   ├── db.ts# Database actions│   ├── streams.ts# Stream management actions│   ├── users.ts# User management actions│   └── utils.ts# Utility functions├── api/# Backend API│   ├── routes/# API routes│   │   ├── auth.js│   │   ├── streams.js│   │   └── users.js│   ├── models/# Database models│   │   ├── User.js│   │   └── Stream.js│   ├── middlewares/# Express middlewares│   │   ├── auth.js│   │   └── errorHandler.js│   ├── utils/# Utility functions│   │   └── db.js│   ├── server.js# Express server│   └── index.js# Entry point├── app/# Next.js app│   ├── pages/# Next.js pages│   │   ├── _app.tsx# Global app component│   │   ├── _document.tsx# Custom document│   │   ├── index.tsx# Home page│   │   └── ....# Other pages│   ├── components/# React components│   │   ├── Auth/│   │   │   ├── Login.tsx│   │   │   ├── Register.tsx│   │   │   └── ....│   │   ├── Home/│   │   │   ├── HomeHero.tsx│   │   │   ├── FeaturedStreams.tsx│   │   │   └── ....│   │   ├── Layout/│   │   │   ├── Header.tsx│   │   │   ├── Footer.tsx│   │   │   └── ....│   │   ├── Live/│   │   │   ├── LivePlayer.tsx│   │   │   ├── LiveChat.tsx│   │   │   └── ....│   │   ├── Profile/│   │   │   ├── ProfileHeader.tsx│   │   │   ├── ProfileContent.tsx│   │   │   └── ....│   │   ├── Settings/│   │   │   ├── AccountSettings.tsx│   │   │   ├── AppearanceSettings.tsx│   │   │   └── ....│   │   └── Video/│   │       ├── VideoPlayer.tsx│   │       ├── VideoInfo.tsx│   │       └── ....├── hooks/# Custom hooks│   ├── useAuth.ts│   ├── useStream.ts│   └── ....├── lib/# Shared lib│   └── services# API clients│       ├── auth.ts│       ├── streams.ts│       └── users.ts├── prisma/# Prisma schema & migrations│   ├── schema.prisma│   └── migrations/├── public/# Static assets│   ├── fonts/│   ├── images/│   └── styles/├── store/# State management│   ├── index.ts│   └── slices/│       ├── authSlice.ts│       ├── streamsSlice.ts│       └── usersSlice.ts├── utils/# Utility functions│   ├── formatTime.ts│   └── ...├── next.config.js# Next.js configuration├── package.json├── README.md├── tsconfig.json└── ....

Typescript, React, Next.js, TailwindCSS, Shadcn-ui, Prisma, MySQL, Socket.io, WebRTC, WebSockets, Clerk, Clerk/themes, Livekit/components-react, Livekit-client, Livekit-server-sdk, Tanstack/react-table, Uploadthing, JWT-decode, Sonner, Svix, Ngrok, Zustand, Webhooks, RTMP and WHIP connections, Server actions and more.

# install dependenciesnpm install# oryarn install# orpnpm install# orbun install

First, run the development server:

npm run dev# oryarn dev# orpnpm dev# orbun dev

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=CLERK_SECRET_KEY=NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-inNEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-upNEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/CLERK_WEBHOOK_SECRET=DATABASE_URL=''LIVEKIT_API_URL=LIVEKIT_API_KEY=LIVEKIT_API_SECRET=NEXT_PUBLIC_LIVEKIT_WS_URL=UPLOADTHING_SECRET=UPLOADTHING_APP_ID=

# install prismanpm i @prisma/client# initnpx prisma init# create a new migrationnpx prisma migrate# create a new databasenpx prisma db pushnpx prisma studio

Openhttp://localhost:3000 with your browser to see the result.

MIT