Fix: Checkout

Fix: Formatting

frontend/Dockerfile

@@ -1,20 +1,16 @@
-# Use the latest LTS version of Node.js
 FROM node:18-alpine
 
-# Set the working directory inside the container
 WORKDIR /frontend
 
-# Copy package.json and package-lock.json
+ENV VITE_API_URL=${VITE_API_URL}
+ENV VITE_STRIPE_PUBLISHABLE_KEY=${VITE_STRIPE_PUBLISHABLE_KEY}
+
 COPY package*.json ./
 
-# Install dependencies
 RUN npm install
 
-# Copy the rest of your application files
 COPY . .
 
-# Expose the port your app runs on
 EXPOSE 5173
 
-# Define the command to run your app
 CMD ["npm", "run", "dev", "--", "--host"]

frontend/package-lock.json

@@ -24,6 +24,7 @@
         "eslint-plugin-react-hooks": "^5.0.0",
         "eslint-plugin-react-refresh": "^0.4.16",
         "globals": "^15.14.0",
+        "lucide-react": "^0.473.0",
         "postcss": "^8.5.1",
         "tailwindcss": "^3.4.17",
         "typescript": "~5.6.2",
@@ -3008,6 +3009,16 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.473.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.473.0.tgz",
+      "integrity": "sha512-KW6u5AKeIjkvrxXZ6WuCu9zHE/gEYSXCay+Gre2ZoInD0Je/e3RBtP4OHpJVJ40nDklSvjVKjgH7VU8/e2dzRw==",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",

frontend/package.json

@@ -27,11 +27,11 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
+    "lucide-react": "^0.473.0",
     "postcss": "^8.5.1",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
-    "vite": "^6.0.5",
-    "lucide-react": "0.473.0"
+    "vite": "^6.0.5"
   }
 }

frontend/src/components/Checkout/CheckoutForm.tsx

@@ -76,11 +76,10 @@ const CheckoutForm: React.FC<CheckoutFormProps> = ({ onClose }) => {
         >
           ✕
         </button>
-        <div className="bg-white p-6 rounded-lg w-full max-w-2xl relative h-full rounded-[2rem]">
+        <div className="bg-white p-6 rounded-lg w-full max-w-2xl relative h-full rounded-[2rem]" style={{ width: "clamp(300px, 60vw, 800px)" }}>
           <div
             id="checkout"
             className="h-full overflow-auto min-w-[30vw]"
-            style={{ width: "clamp(300px, 60vw, 800px)" }}
           >
             <EmbeddedCheckoutProvider stripe={stripePromise} options={options}>
               <EmbeddedCheckout />

frontend/src/components/Layout/Button.tsx

@@ -11,7 +11,7 @@ const Button: React.FC<ButtonProps> = ({
 }) => {
   return (
     <div>
-      <button onClick={onClick}>
+      <button className="underline bg-blue-600/30 p-4 rounded-[5rem] transition-all hover:text-[3.2rem]" onClick={onClick}>
         {title}
       </button>
     </div>

frontend/src/pages/HomePage.tsx

@@ -3,7 +3,6 @@ import Navbar from "../components/Layout/Navbar";
 import ListRow from "../components/Layout/ListRow";
 // import { data, Link } from "react-router-dom";
 
-
 const handleStreamClick = (streamId: string) => {
   // Handle navigation to stream page
   console.log(`Navigating to stream ${streamId}`);

frontend/src/pages/VideoPage.tsx

@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from 'react';
-import Button from '../components/Layout/Button';
-import CheckoutForm, { Return } from '../components/Checkout/CheckoutForm';
+import React, { useState, useEffect } from "react";
+import Button from "../components/Layout/Button";
+import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
 
 const VideoPage: React.FC = () => {
   const [showCheckout, setShowCheckout] = useState(false);
-	  const showReturn = window.location.search.includes('session_id');
+  const showReturn = window.location.search.includes("session_id");
 
   useEffect(() => {
     if (showCheckout) {
@@ -19,9 +19,11 @@ const VideoPage: React.FC = () => {
   }, [showCheckout]);
 
   return (
-		<div>
-			<h1>Hello!</h1>
-
+    <div className="text-5xl text-red-600 flex flex-col justify-evenly align-center h-screen text-center">
+      <h1>
+        Hello! Welcome to the soon-to-be-awesome Video Page where you'll watch
+        the best streams ever!
+      </h1>
       <Button
         title="Payment Screen Test"
         onClick={() => setShowCheckout(true)}

frontend/vite.config.ts

@@ -6,5 +6,11 @@ export default defineConfig({
   plugins: [react()],
   server: {
     allowedHosts: ['frontend'],
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+      }
+    }
   },
 })

web_server/Dockerfile

@@ -1,26 +1,19 @@
 FROM python:3.10
 
-# Set the working directory
 WORKDIR /web_server
 
-# Args that can be passed during build
 ARG FLASK_SECRET_KEY
 ARG STRIPE_SECRET_KEY
 
-# Set as environment variables
 ENV FLASK_SECRET_KEY=${FLASK_SECRET_KEY}
 ENV STRIPE_SECRET_KEY=${STRIPE_SECRET_KEY}
 
-# Install dependencies
 COPY requirements.txt requirements.txt
 RUN pip install --no-cache-dir -r requirements.txt
 
-# Copy application code
 COPY . .
 
-# Set environment variables
 ENV FLASK_APP=blueprints.__init__
 ENV FLASK_DEBUG=True
 
-# Start the Flask app
 CMD ["gunicorn", "-b", "0.0.0.0:5000", "blueprints.__init__:create_app()"]