/gamehub

GameHub - A Real-time livestreaming platform.

Primary LanguageTypeScriptMIT LicenseMIT

GameHub - A Real-time livestreaming platform.

GameHub - A Real-time livestreaming platform.

Ask Me Anything! GitHub license Maintenance GitHub branches Github commits Vercel status GitHub issues GitHub pull requests

📔 Table of Contents

‼️ Folder Structure

Here is the folder structure of this app.

gamehub/
  |- app/
    |-- (auth)/
        |--- _components/
        |--- sign-in/[[...sign-in]]/
        |--- sign-up/[[...sign-up]]/
        |--- layout.tsx
    |-- (browser)/
        |--- _components/
        |--- (home)/
        |--- [username]/
        |--- search/
        |--- layout.tsx
    |-- (dashboard)/u/[username]/
        |--- _components/
        |--- (home)/
        |--- chat/
        |--- community/
        |--- keys/
        |--- layout.tsx
    |-- api/
        |--- uploadthing/
          |---- core.ts
          |---- route.ts
        |--- webhooks/
          |---- clerk/
            |----- route.ts
          |---- livekit/
            |----- route.ts
        |--- page.tsx
    |-- error.tsx
    |-- favicon.ico
    |-- globals.css
    |-- layout.tsx
    |-- not-found.tsx
  |- components/
    |-- stream-player/
    |-- ui/
    |-- hint.tsx
    |-- live-badge.tsx
    |-- theme-provider.tsx
    |-- thumbnail.tsx
    |-- user-avatar.tsx
    |-- verified-mark.tsx
  |- config/
    |-- site.ts
  |- hooks/
    |-- use-viewer-token.ts
  |- lib/
    |-- auth-service.ts
    |-- block-service.ts
    |-- db.ts
    |-- feed-service.ts
    |-- follow-service.ts
    |-- recommended-service.ts
    |-- search-service.ts
    |-- stream-service.ts
    |-- uploadthing.ts
    |-- user-service.ts
    |-- utils.ts
  |- prisma/
    |-- schema.prisma
  |- public/
    |-- logo.svg
  |- store/
    |-- use-chat-sidebar.tsx
    |-- use-creator-sidebar.tsx
    |-- use-sidebar.tsx
  |- .env
  |- .env.example
  |- .eslintrc.json
  |- .gitignore
  |- components.json
  |- middleware.ts
  |- next.config.js
  |- package-lock.json
  |- package.json
  |- postcss.config.js
  |- tailwind.config.ts
  |- tsconfig.json

🧰 Getting Started

  1. Make sure Git and NodeJS is installed.
  2. Clone this repository to your local computer.
  3. Create .env file in root directory.
  4. Contents of .env:
# .env

# clerk auth credentials
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXX

# clerk redirect urls
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=/

# mysql db uri
DATABASE_URL="mysql://127.0.0.1/gamehub?ssl-mode=REQUIRED"

# livekit keys
LIVEKIT_API_KEY=XXXXXXXXXXXXXXXXXXXX
LIVEKIT_API_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# livekit uris
LIVEKIT_API_URL=https://gamehub-xxxxxxxxxxxxxxx.livekit.cloud
NEXT_PUBLIC_LIVEKIT_WS_URL=wss://gamehub-xxxxxxxxxxxxxxx.livekit.cloud

# app base url
NEXT_PUBLIC_BASE_URL=http://localhost:3000

# uploadthing keys
UPLOADTHING_SECRET=sk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
UPLOADTHING_APP_ID=XXXXXXXXX
  1. Clerk Redirect URLs
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=/
  1. MySQL DB URI
DATABASE_URL="mysql://127.0.0.1/gamehub?ssl-mode=REQUIRED"
  1. Livekit Keys

To obtain Livekit keys, follow these steps:

  1. Sign up for a Livekit account:

  2. Create a new project:

    • Log in to your Livekit account.
    • Go to the dashboard and create a new project.

  3. Get API Key and Secret:

    • Once the project is created, navigate to the project settings.
    • Find or generate API Key and Secret.
LIVEKIT_API_KEY=XXXXXXXXXXXXXXXXXXXX
LIVEKIT_API_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  1. Livekit URIs
LIVEKIT_API_URL=https://gamehub-xxxxxxxxxxxxxxx.livekit.cloud
NEXT_PUBLIC_LIVEKIT_WS_URL=wss://gamehub-xxxxxxxxxxxxxxx.livekit.cloud
  1. App Base URL
NEXT_PUBLIC_BASE_URL=http://localhost:3000
  1. Uploadthing Keys

To obtain Uploadthing keys, follow these steps:

  1. Sign up for an Uploadthing account:

  2. Create a new application:

    • Log in to your Uploadthing account.
    • Navigate to the dashboard and create a new application.

  3. Get Secret and App ID:

    • Once the application is created, find or generate the Secret and App ID.
UPLOADTHING_SECRET=sk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
UPLOADTHING_APP_ID=XXXXXXXXX

  1. Open terminal in root directory. Run npm install --legacy-peer-deps or yarn install --legacy-peer-deps.

  2. Now app is fully configured 👍 and you can start using this app using npm run dev or yarn dev.

📚 Additional Resources

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

📷 Screenshots:

Modern UI/UX

Realtime Livestream

Chat Settings

Search Functionality

⚙️ Tech Stack

React JS Next JS Typescript Tailwind CSS Vercel Prisma

🔧 Stats

Stats for GameHub

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

💎 Acknowledgements

Useful resources and dependencies that are used in GameHub.

☕ Buy Me a Coffee

🚀 Follow Me

GitHub followers Twitter YouTube

📚 Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

📃 Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

Star History Chart

(back to top)

```