Completed front end video listings and basic styling

client/src/App.jsx

@@ -1,7 +1,10 @@
+import Videos from "./Videos/Videos";
+
 const App = () => {
 	return (
 		<>
 			<h1>Video Recommendations</h1>
+			<Videos />
 		</>
 	);
 };

client/src/Videos/Videos.jsx

@@ -0,0 +1,36 @@
+import { useState, useEffect, useRef } from "react";
+import "./videos.scss";
+
+const Videos = () => {
+	const [videos, setVideos] = useState([]);
+	const fetchedVideos = useRef(true);
+
+	useEffect(() => {
+		if (fetchedVideos.current) {
+			fetchedVideos.current = false;
+			fetch("/api/videos")
+				.then((res) => res.json())
+				.then((data) => {
+					setVideos(data);
+					fetchedVideos.current = true;
+				});
+		}
+	}, []);
+
+	const mapVideos = videos.map((video, index) => {
+		return (
+			<div key={index} className="container">
+				<p>{video.title}</p>
+				<iframe
+					src={video.src}
+					title="Video recommendations"
+					className="container_video"
+				></iframe>
+			</div>
+		);
+	});
+
+	return <p>{mapVideos}</p>;
+};
+
+export default Videos;

client/src/Videos/videos.scss

@@ -0,0 +1,11 @@
+.container {
+	margin-top: 2rem;
+	padding-left: 1rem;
+
+	&_video {
+		border-radius: 1rem;
+		border: none;
+		box-shadow: 6px 4px 18px 0 #00000042;
+		margin-top: 0.6rem;
+	}
+}

client/src/index.css

@@ -1,8 +1,15 @@
-html,
-body {
+* {
+	padding: 0;
 	margin: 0;
+	box-sizing: border-box;
+}
+
+body {
+	background-color: #f1f7ed;
+	color: #b33951;
 }
 
 h1 {
 	text-align: center;
+	margin-top: 1.4rem;
 }

db/initdb.sql

@@ -2,82 +2,13 @@ DROP TABLE IF EXISTS videos CASCADE;
 
 CREATE TABLE videos (title VARCHAR, src VARCHAR);
 
-INSERT INTO
-    videos (title, src)
-VALUES
-    (
-        'Never Gonna Give You Up',
-        'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
-    );
-
-INSERT INTO
-    videos (title, src)
-VALUES
-    (
-        'The Coding Train',
-        'https://www.youtube.com/watch?v=HerCR8bw_GE'
-    );
-
-INSERT INTO
-    videos (title, src)
-VALUES
-    (
-        'Mac & Cheese | Basics with Babish',
-        'https://www.youtube.com/watch?v=FUeyrEN14Rk'
-    );
-
-INSERT INTO
-    videos (title, src)
-VALUES
-    (
-        'Videos for Cats to Watch - 8 Hour Bird Bonanza',
-        'https://www.youtube.com/watch?v=xbs7FT7dXYc'
-    );
-
-INSERT INTO
-    videos (title, src)
-VALUES
-    (
-        'The Complete London 2012 Opening Ceremony | London 2012 Olympic Games',
-        'https://www.youtube.com/watch?v=4As0e4de-rI'
-    );
-
-INSERT INTO
-    videos (title, src)
-VALUES
-    (
-        'Learn Unity - Beginner''s Game Development Course',
-        'https://www.youtube.com/watch?v=gB1F9G0JXOo'
-    );
-
-INSERT INTO
-    videos (title, src)
-VALUES
-    (
-        'Cracking Enigma in 2021 - Computerphile',
-        'https://www.youtube.com/watch?v=RzWB5jL5RX0'
-    );
-
-INSERT INTO
-    videos (title, src)
-VALUES
-    (
-        'Coding Adventure: Chess AI',
-        'https://www.youtube.com/watch?v=U4ogK0MIzqk'
-    );
-
-INSERT INTO
-    videos (title, src)
-VALUES
-    (
-        'Why the Tour de France is so brutal',
-        'https://www.youtube.com/watch?v=ZacOS8NBK6U'
-    );
-
-INSERT INTO
-    videos (title, src)
-VALUES
-    (
-        'Coding Adventure: Ant and Slime Simulations',
-        'https://www.youtube.com/watch?v=X-iSQQgOd1A'
-    );
+INSERT INTO videos (title,src) VALUES ('Never Gonna Give You Up','https://www.youtube.com/embed/dQw4w9WgXcQ?si=sdvqEritjOTwN2Af');
+INSERT INTO videos (title,src) VALUES ('The Coding Train','https://www.youtube.com/embed/HerCR8bw_GE?si=5Xfqx9K1JMB_QCBh');
+INSERT INTO videos (title,src) VALUES ('Mac & Cheese | Basics with Babish','https://www.youtube.com/embed/FUeyrEN14Rk?si=dUHtCerjTKIdgK5u');
+INSERT INTO videos (title,src) VALUES ('Videos for Cats to Watch - 8 Hour Bird Bonanza','https://www.youtube.com/embed/xbs7FT7dXYc?si=W9bjQcH1cYbIlnY3');
+INSERT INTO videos (title,src) VALUES ('The Complete London 2012 Opening Ceremony | London 2012 Olympic Games','https://www.youtube.com/embed/4As0e4de-rI?si=QvvaM7T6gj31cQ6z');
+INSERT INTO videos (title,src) VALUES ('Learn Unity - Beginners Game Development Course','https://www.youtube.com/embed/gB1F9G0JXOo?si=zh21-opwR7otFnSZ');
+INSERT INTO videos (title,src) VALUES ('Cracking Enigma in 2021 - Computerphile','https://www.youtube.com/embed/RzWB5jL5RX0?si=OuYo20zJalIFBT2w');
+INSERT INTO videos (title,src) VALUES ('Coding Adventure: Chess AI','https://www.youtube.com/embed/U4ogK0MIzqk?si=xICbZlD8Hm9nCyWy');
+INSERT INTO videos (title,src) VALUES ('Coding Adventure: Ant and Slime Simulations','https://www.youtube.com/embed/X-iSQQgOd1A?si=bZUPXmKxC43YzERA');
+INSERT INTO videos (title,src) VALUES ('Why the Tour de France is so brutal','https://www.youtube.com/embed/ZacOS8NBK6U?si=nfaj6AHw0aaE-c7C');

package.json

@@ -46,6 +46,7 @@
 		"npm": ">=10"
 	},
 	"dependencies": {
+		"sass": "^1.75.0",
 		"serverless-http": "^3.2.0"
 	}
 }