dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix: Imports on backend

Browse Source 
Fix: Connected Backend to Frontend over localhost
This commit is contained in:
Chris-1010
2025-01-21 23:54:11 +00:00
parent 2cda918e72
commit 1ede987914
101 changed files with 354 additions and 18641 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web_server/frontend/eslint.config.js Normal file
View File

@@ -0,0 +1,28 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)

13
web_server/frontend/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Team Software Project</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

4342
web_server/frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

34
web_server/frontend/package.json Normal file
View File

@@ -0,0 +1,34 @@
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"proxy": "http://localhost:5000",
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^7.1.3"
},
"devDependencies": {
"@eslint/js": "^9.17.0",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"eslint": "^9.17.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.14.0",
"postcss": "^8.5.1",
"tailwindcss": "^3.4.17",
"typescript": "~5.6.2",
"typescript-eslint": "^8.18.2",
"vite": "^6.0.5"
}
}

6
web_server/frontend/postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

24
web_server/frontend/src/App.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import VideoPage from './pages/VideoPage';
import LoginPage from './pages/LoginPage';
import SignupPage from './pages/SignupPage';
import CheckoutPage from './pages/CheckoutPage';
import NotFoundPage from './pages/NotFoundPage';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/video" element={<VideoPage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/signup" element={<SignupPage />} />
<Route path="/checkout" element={<CheckoutPage />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</BrowserRouter>
);
}
export default App;

BIN
web_server/frontend/src/assets/images/dance_game.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 288 KiB

BIN
web_server/frontend/src/assets/images/elf.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 372 KiB

BIN
web_server/frontend/src/assets/images/monkey.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
web_server/frontend/src/assets/images/surface.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 MiB

73
web_server/frontend/src/assets/styles/index.css Normal file
View File

@@ -0,0 +1,73 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
} */

1
web_server/frontend/src/components/Auth/LoginForm.tsx Normal file
View File

@@ -0,0 +1 @@
// login.html

1
web_server/frontend/src/components/Auth/SignupForm.tsx Normal file
View File

@@ -0,0 +1 @@
// signup.html

1
web_server/frontend/src/components/Checkout/CheckoutForm.tsx Normal file
View File

@@ -0,0 +1 @@
// checkout.html

24
web_server/frontend/src/components/Layout/BaseLayout.tsx Normal file
View File

@@ -0,0 +1,24 @@
// base.html
// src/components/Layout/BaseLayout.tsx
import React from 'react';
interface BaseLayoutProps {
children: React.ReactNode;
}
const BaseLayout: React.FC<BaseLayoutProps> = ({ children }) => {
return (
<html lang="en">
<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Live Stream</title>
</head>
<body>
{children}
</body>
</html>
);
};
export default BaseLayout;

36
web_server/frontend/src/components/Video/VideoPlayer.tsx Normal file
View File

@@ -0,0 +1,36 @@
// video.html
// src/components/Video/VideoPlayer.tsx
import React, { useEffect } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
const VideoPlayer: React.FC = () => {
useEffect(() => {
const player = videojs('player', {
width: 1280,
height: 720,
controls: true,
preload: 'auto',
sources: [{
src: '/hls/stream.m3u8',
type: 'application/x-mpegURL'
}]
});
return () => {
if (player) {
player.dispose();
}
};
}, []);
return (
<video
id="player"
className="video-js vjs-default-skin"
/>
);
};
export default VideoPlayer;

10
web_server/frontend/src/main.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './assets/styles/index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)

10
web_server/frontend/src/pages/CheckoutPage.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
const CheckoutPage: React.FC = () => {
return (
<div>
</div>
);
};
export default CheckoutPage;

73
web_server/frontend/src/pages/HomePage.tsx Normal file
View File

@@ -0,0 +1,73 @@
import React, { useState, useEffect } from "react";
// import { data, Link } from "react-router-dom";
// import { Search, User, LogIn } from "lucide-react";
const HomePage: React.FC = () => {
const [featuredStreams, setFeaturedStreams] = useState([{}]);
//! ↓↓ runs twice when in development mode
useEffect(() => {
fetch("http://127.0.0.1:5000/get_streams")
.then((response) => response.json())
.then((data) => {
setFeaturedStreams(data);
console.log(data);
});
}, []);
return (
<div>
<nav className="navbar">
<div className="logo">
<span>G</span>
<span>A</span>
<span>N</span>
<span>D</span>
<span>E</span>
<span>R</span>
</div>
<div className="nav-buttons">
<button className="nav-button">☰</button>
<button className="nav-button">⚙️</button>
</div>
</nav>
<div className="tagline">Behold, your next great watch!</div>
<div className="search-container">
{/* <input type="text" className="search-bar" placeholder="🔍 Search..."> */}
</div>
<h2 className="section-title">Live Now</h2>
<div className="streams-grid">
{featuredStreams.map((stream: any) => (
<div className="stream-card">
<img
src="/assets/images/dance_game.png"
alt="Stream thumbnail"
className="stream-thumbnail"
/>
<div className="stream-info">
<div className="streamer">
<span className="streamer-name">{stream.streamer}</span>
</div>
<div className="stream-title">{stream.title}</div>
<div className="viewer-count">{stream.viewers} viewers</div>
</div>
</div>
))}
</div>
<h2 className="section-title">Trending Categories</h2>
<div className="categories-grid">
<div className="category-card"></div>
<div className="category-card"></div>
<div className="category-card"></div>
<div className="category-card"></div>
<div className="category-card"></div>
</div>
</div>
);
};
export default HomePage;

10
web_server/frontend/src/pages/LoginPage.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
const LoginPage: React.FC = () => {
return (
<div>
</div>
);
};
export default LoginPage;

10
web_server/frontend/src/pages/NotFoundPage.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
const NotFoundPage: React.FC = () => {
return (
<div>
</div>
);
};
export default NotFoundPage;

10
web_server/frontend/src/pages/SignupPage.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
const SignupPage: React.FC = () => {
return (
<div>
</div>
);
};
export default SignupPage;

11
web_server/frontend/src/pages/VideoPage.tsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react';
const VideoPage: React.FC = () => {
return (
<div>
<h1>Hello!</h1>
</div>
);
};
export default VideoPage;

1
web_server/frontend/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

11
web_server/frontend/tailwind.config.js Normal file
View File

@@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

26
web_server/frontend/tsconfig.app.json Normal file
View File

@@ -0,0 +1,26 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}

7
web_server/frontend/tsconfig.json Normal file
View File

@@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

24
web_server/frontend/tsconfig.node.json Normal file
View File

@@ -0,0 +1,24 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}

7
web_server/frontend/vite.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})