streamdevs · orestes · May 26, 2025 · May 26, 2025 · May 26, 2025 · May 26, 2025
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,14 @@
+# EditorConfig is awesome: https://editorconfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{css,tsx}]
+charset = utf-8
+indent_style = space
+indent_size = 2
diff --git a/.env b/.env
@@ -0,0 +1,6 @@
+# TODO: Add your OAuth Client Id
+VITE_CLIENT_ID=
+# TODO: Add your OAuth Client Secret
+VITE_CLIENT_SECRET=
+# TODO: Add the public URL where you're serving this app
+VITE_REDIRECT_URI=
diff --git a/.gitignore b/.gitignore
@@ -1,26 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# Local Netlify folder
-.netlify
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -1,9 +1,23 @@
-# StreamLabs Token
+# Streamlabs Token
 
-> This is a simple react app that allows you to get the token for [streamdevs/webhook](https://github.com/streamdevs/webhook)
+> This is a simple web app that allows you to get a OAuth Token to use in [streamdevs/webhook](https://github.com/streamdevs/webhook)
 
-You can get your own client_id and client_secret in the [StreamLabs developer console](https://dev.streamlabs.com/docs/register-your-application).
+You will need a Streamlabs API app OAuth `client_id` and `client_secret`. You can register a new app in the [Streamlabs developer console](https://dev.streamlabs.com/docs/register-your-application).
 
-## How to deploy it?
+## Deployment
 
 [![img](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/streamdevs/streamlabs-token)
+
+## Development
+
+Install dependencies with `yarn`
+
+```bash
+yarn
+```
+
+Start your local enviroment with `vite`
+
+```bash
+yarn dev
+```
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,41 @@
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [
+        ...tseslint.configs.recommendedTypeChecked,
+        ...tseslint.configs.strictTypeChecked,
+        ...tseslint.configs.stylisticTypeChecked,
+    ],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+        parserOptions: {
+            project: ['./tsconfig.node.json', './tsconfig.app.json'],
+            tsconfigRootDir: import.meta.dirname,
+        },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+       'react-x': reactX,
+       'react-dom': reactDom,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      ...reactX.configs['recommended-typescript'].rules,
+      ...reactDom.configs.recommended.rules,
+    },
+  },
+)
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/streamdevs.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Streamlabs Token</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/netlify.toml b/netlify.toml
@@ -1,25 +1,23 @@
 [build]
-  # Directory (relative to root of your repo) that contains the deploy-ready
-  # HTML files and assets generated by the build. If a base directory has
-  # been specified, include it in the publish directory path.
-  publish = "build/"
-
-  # Default build command.
+  publish = "dist/"
   command = "yarn build"
 
 [template.environment]
-  REACT_APP_CLIENT_ID = "change me for your client_id"
-  REACT_APP_CLIENT_SECRET = "change me for your client_secret"
+  # TODO
+  VITE_CLIENT_ID = "replace me with your OAuth Client Id"
+  # TODO
+  VITE_CLIENT_SECRET = "replace me your OAuth Client Secred"
 
 [[redirects]]
   from = "/api/*"
-  to = "https://streamlabs.com/api/v1.0/:splat"
+  to = "https://streamlabs.com/api/v2.0/:splat"
   status = 200
   force = true
   [redirects.headers]
+    X-From = "Netlify"
     access-control-allow-origin = "*"
 
 [[redirects]]
   from = "/*"
   to = "/index.html"
-  status = 200
+  status = 200
diff --git a/package.json b/package.json
@@ -1,43 +1,31 @@
 {
   "name": "streamlabs-token",
-  "version": "0.1.0",
   "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "qs": "^6.9.3",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1",
-    "typescript": "~3.7.2"
-  },
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@types/qs": "^6.9.1"
+    "@eslint/js": "^9.25.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-dom": "^1.50.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-react-x": "^1.50.0",
+    "globals": "^16.0.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.5"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/public/streamdevs.svg b/public/streamdevs.svg
diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,14 @@
-.App {
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.standalone {
+  text-align: left;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
+.header__authorization-link {
   color: white;
 }
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.test.tsx b/src/App.test.tsx