S3MER is a full stack dynamic live streaming platform, customizable features, multi-platform integration, and a developer-friendly API.
MIT License
(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
>
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 dependencies
npm install
# or
yarn install
# or
pnpm install
# or
bun install
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_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 prisma
npm i @prisma/client
# init
npx prisma init
# create a new migration
npx prisma migrate
# create a new database
npx prisma db push
npx prisma studio
Open http://localhost:3000 with your browser to see the result.