{"id":16192595,"url":"https://github.com/ricardogesteves/s3mer","last_synced_at":"2025-03-19T04:30:27.048Z","repository":{"id":212173630,"uuid":"730737065","full_name":"RicardoGEsteves/s3mer","owner":"RicardoGEsteves","description":"S3MER is a full stack dynamic live streaming platform, customizable features, multi-platform integration, and a developer-friendly API.","archived":false,"fork":false,"pushed_at":"2024-10-29T08:21:08.000Z","size":2881,"stargazers_count":8,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-29T09:37:33.816Z","etag":null,"topics":["clerk","jwt","livekit","mysql","nextjs","prisma","react","server-actions","shadcn-ui","socket-io","sonner","svix","tailwindcss","tanstack-table","typescript","uploadthing","webhooks","webrtc","websockets","zustand"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RicardoGEsteves.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-12T15:06:14.000Z","updated_at":"2024-10-29T08:21:09.000Z","dependencies_parsed_at":"2023-12-25T02:23:04.746Z","dependency_job_id":"30817781-3b7b-4fad-9b73-ebc2fe4da8a1","html_url":"https://github.com/RicardoGEsteves/s3mer","commit_stats":null,"previous_names":["ricardogesteves/s3mer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RicardoGEsteves%2Fs3mer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RicardoGEsteves%2Fs3mer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RicardoGEsteves%2Fs3mer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RicardoGEsteves%2Fs3mer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RicardoGEsteves","download_url":"https://codeload.github.com/RicardoGEsteves/s3mer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244357247,"owners_count":20440298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clerk","jwt","livekit","mysql","nextjs","prisma","react","server-actions","shadcn-ui","socket-io","sonner","svix","tailwindcss","tanstack-table","typescript","uploadthing","webhooks","webrtc","websockets","zustand"],"created_at":"2024-10-10T08:10:47.390Z","updated_at":"2025-03-19T04:30:26.542Z","avatar_url":"https://github.com/RicardoGEsteves.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# S3MER - Advanced Customizable Live Streaming Platform\n\n\u003e **(UPDATE)** - with the latest dependencies updates, you will have to do some small config changes.\n\nS3MER 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.\n\n## Project Description:\n\n🌟 **S3MER Platform 🎥**\n\nThis 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.\n\n##\n\n### Demo Images\n\n\u003e - Home Page\n\u003e   - logged in\n\u003e     \u003cimg src=\"/public/demo-images/home.png\"/\u003e\n\u003e   - live\n\u003e     \u003cimg src=\"/public/demo-images/homeLive.png\"/\u003e\n\u003e   - live logged in\n\u003e     \u003cimg src=\"/public/demo-images/homeLiveLogedIn.png\"/\u003e\n\u003e\n\u003e ##\n\u003e\n\u003e - Dashboard\n\u003e   - dashboard offline\n\u003e     \u003cimg src=\"/public/demo-images/dashboardOffline.png\"/\u003e\n\u003e   - dashboard live\n\u003e     \u003cimg src=\"/public/demo-images/dashboardLive.png\"/\u003e\n\u003e   - dashboard about section\n\u003e     \u003cimg src=\"/public/demo-images/dashboardAbout.png\"/\u003e\n\u003e   - dashboard live chat\n\u003e     \u003cimg src=\"/public/demo-images/dashboardLiveChat.png\"/\u003e\n\u003e\n\u003e ##\n\u003e\n\u003e - Search Results\n\u003e   - offline\n\u003e     \u003cimg src=\"/public\\demo-images\\searchResults.png\"/\u003e\n\u003e   - live\n\u003e     \u003cimg src=\"/public\\demo-images\\searchResultsLive.png\"/\u003e\n\u003e\n\u003e ##\n\u003e\n\u003e - Live Chat\n\u003e   - Chat \u0026 Community Tab\n\u003e     \u003cbr/\u003e \u003e \u003cimg src=\"/public\\demo-images\\liveChat.png\"/\u003e\u003cimg src=\"/public\\demo-images\\communityTab.png\"/\u003e\n\u003e\n\u003e ##\n\u003e\n\u003e - Live Badge\n\u003e   \u003cbr/\u003e \u003e \u003cimg src=\"/public\\demo-images\\liveBadge.png\"/\u003e\n\n##\n\n### Technologies \u0026 Key Features\n\n- **Frontend:** TypeScript, React, Next.js, TailwindCSS, Shadcn-ui\n- **Prisma \u0026 MySQL**: Ensuring efficient data management and storage.\n- **Socket.io \u0026 WebRTC**: Enabling real-time communication and streaming capabilities.\n- **WebSockets, Clerk \u0026 JWT-decode**: Strengthening secure data transmission and authentication.\n- **Livekit**: Leveraging Livekit components, client, and server SDKs for enriched streaming functionalities.\n- **Tanstack/react-table \u0026 Zustand**: Facilitating seamless data handling and state management.\n- **Uploadthing \u0026 Sonner**: Streamlining file uploads and enhancing user interaction.\n- **Svix \u0026 Webhooks**: Providing a robust integration framework for external services.\n- **NGROK**: Enabling secure tunneling for local development and testing.\n- **RTMP and WHIP connections**: Supporting diverse streaming protocols for broad compatibility.\n- **Server actions**: Implementing comprehensive server-side functionalities for streamlined operations.\n\n##\n\n### Features \u0026 Capabilities:\n\n- **Real-Time Streaming:** Utilizing WebRTC and WebSockets for seamless live streaming capabilities.\n- **Security**: Prioritizing robust security measures for user data and interactions. Integrated authentication, JWT, and additional security layers for user protection.\n- **Efficient Data Management:** Leveraging Prisma, MySQL, and other technologies for efficient data management.\n- **Cutting-edge Technologies**: Leveraging the latest in streaming technology to provide a seamless experience.\n- **Customizable UI/UX:** Developed with TailwindCSS and Shadcn-ui, ensuring an engaging user interface. Empowering users with extensive customization options for their streaming environments.\n- **Scalable Architecture \u0026 Performance:** Built with scalability in mind to accommodate growing user bases while maintaining optimal performance with a focus on delivering a smooth streaming experience.\n\n##\n\n#### Get Involved \u0026 Contribute\n\nThis 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!\n\nContributions to S#MER are welcome! Whether you're passionate about enhancing user experience, optimizing performance, or adding new features, your contributions are valued.\n\n##\n\n#### Project Structure\n\n```bash\n├── .github/               # GitHub configuration\n│   ├── workflows/         # GitHub Actions workflows for CI/CD\n├── actions/               # Server actions\n│   ├── auth.ts            # Authentication actions\n│   ├── db.ts              # Database actions\n│   ├── streams.ts         # Stream management actions\n│   ├── users.ts           # User management actions\n│   └── utils.ts           # Utility functions\n├── api/                    # Backend API\n│   ├── routes/             # API routes\n│   │   ├── auth.js\n│   │   ├── streams.js\n│   │   └── users.js\n│   ├── models/             # Database models\n│   │   ├── User.js\n│   │   └── Stream.js\n│   ├── middlewares/        # Express middlewares\n│   │   ├── auth.js\n│   │   └── errorHandler.js\n│   ├── utils/              # Utility functions\n│   │   └── db.js\n│   ├── server.js           # Express server\n│   └── index.js            # Entry point\n├── app/                   # Next.js app\n│   ├── pages/             # Next.js pages\n│   │   ├── _app.tsx       # Global app component\n│   │   ├── _document.tsx  # Custom document\n│   │   ├── index.tsx      # Home page\n│   │   └── ....           # Other pages\n│   ├── components/        # React components\n│   │   ├── Auth/\n│   │   │   ├── Login.tsx\n│   │   │   ├── Register.tsx\n│   │   │   └── ....\n│   │   ├── Home/\n│   │   │   ├── HomeHero.tsx\n│   │   │   ├── FeaturedStreams.tsx\n│   │   │   └── ....\n│   │   ├── Layout/\n│   │   │   ├── Header.tsx\n│   │   │   ├── Footer.tsx\n│   │   │   └── ....\n│   │   ├── Live/\n│   │   │   ├── LivePlayer.tsx\n│   │   │   ├── LiveChat.tsx\n│   │   │   └── ....\n│   │   ├── Profile/\n│   │   │   ├── ProfileHeader.tsx\n│   │   │   ├── ProfileContent.tsx\n│   │   │   └── ....\n│   │   ├── Settings/\n│   │   │   ├── AccountSettings.tsx\n│   │   │   ├── AppearanceSettings.tsx\n│   │   │   └── ....\n│   │   └── Video/\n│   │       ├── VideoPlayer.tsx\n│   │       ├── VideoInfo.tsx\n│   │       └── ....\n├── hooks/                 # Custom hooks\n│   ├── useAuth.ts\n│   ├── useStream.ts\n│   └── ....\n├── lib/                   # Shared lib\n│   └── services           # API clients\n│       ├── auth.ts\n│       ├── streams.ts\n│       └── users.ts\n├── prisma/                # Prisma schema \u0026 migrations\n│   ├── schema.prisma\n│   └── migrations/\n├── public/                # Static assets\n│   ├── fonts/\n│   ├── images/\n│   └── styles/\n├── store/                 # State management\n│   ├── index.ts\n│   └── slices/\n│       ├── authSlice.ts\n│       ├── streamsSlice.ts\n│       └── usersSlice.ts\n├── utils/                 # Utility functions\n│   ├── formatTime.ts\n│   └── ...\n├── next.config.js          # Next.js configuration\n├── package.json\n├── README.md\n├── tsconfig.json\n└── ....\n```\n\n## Tech Stack\n\n`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. `\n\n##\n\n#### Installation \u0026 Setup\n\n```bash\n# install dependencies\nnpm install\n# or\nyarn install\n# or\npnpm install\n# or\nbun install\n```\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\n#### Setup .env file\n\n```bash\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=\nCLERK_SECRET_KEY=\nNEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in\nNEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up\nNEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/\nNEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/\nCLERK_WEBHOOK_SECRET=\n\nDATABASE_URL=''\n\nLIVEKIT_API_URL=\nLIVEKIT_API_KEY=\nLIVEKIT_API_SECRET=\nNEXT_PUBLIC_LIVEKIT_WS_URL=\n\nUPLOADTHING_SECRET=\nUPLOADTHING_APP_ID=\n```\n\n#### Setup Prisma\n\n```bash\n# install prisma\nnpm i @prisma/client\n# init\nnpx prisma init\n# create a new migration\nnpx prisma migrate\n# create a new database\nnpx prisma db push\n\nnpx prisma studio\n\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n#### License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fricardogesteves%2Fs3mer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fricardogesteves%2Fs3mer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fricardogesteves%2Fs3mer/lists"}