diff --git a/src/Photos.jsx b/src/Photos.jsx
new file mode 100644
index 0000000..3d51913
--- /dev/null
+++ b/src/Photos.jsx
@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from "react";
+import { Spinner, Row, Col, Image } from "react-bootstrap";
+
+//https://www.flickr.com/services/api/misc.urls.html
+
+//Photo function that handles the content of Photography
+function Photos() {
+ const [isLoading, setLoading] = useState(true);
+ const [photoData, setPhotoData] = useState([]);
+ const [photoLinks, setPhotoLinks] = useState([]);
+
+ //Create const that gets Flickr Api data and build image links from data
+ const createFlickrLinks = async () => {
+ try {
+ const response = await fetch("https://express-api-neinhills.onrender.com/flickr");
+ console.log(response);
+ const json = await response.json();
+ console.log(json);
+ const flickrLink = await json.photos.photo.map(photo => "https://live.staticflickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + ".jpg");
+ setPhotoData(flickrLink);
+ } catch (error) {
+ console.error(error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ createFlickrLinks();
+ }, []);
+
+ //Return data to display on the website, also takes data from flickrLink to display on the website
+ return (
+
+ {
+ isLoading ?
+ <>
+
+
+
+
:
+ <>
+
+ {
+ photoData.map((url, key) => )
+ }
+
+
+ }
+
+ );
+}
+export default Photos
\ No newline at end of file
diff --git a/src/Videos.jsx b/src/Videos.jsx
new file mode 100644
index 0000000..2beb2a5
--- /dev/null
+++ b/src/Videos.jsx
@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from "react";
+import { Spinner, Row, Col, Button } from "react-bootstrap";
+
+//Videos function that handles the content of Videos
+function Videos() {
+ const [isLoading, setLoading] = useState(true);
+ const [videos, setVideos] = useState([]);
+ const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
+
+ //Create const that gets YouTube Api data and build video links from data
+ const getYTVideoLink = async () => {
+ try {
+ const response = await fetch("https://express-api-neinhills.onrender.com/youtube");
+ const json = await response.json();
+ const videoLinks = await json.items.map(item => "https://www.youtube.com/embed/" + item.id.videoId);
+ const videoiframe = await videoLinks.map(link => );
+ setVideos(videoiframe);
+ } catch (error) {
+ console.error(error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ //Handle the state of currentVideoIndex to get the previous video
+ const handlePrevClick = () => {
+ if (currentVideoIndex > 0) {
+ setCurrentVideoIndex(currentVideoIndex - 1);
+ }
+ };
+
+ //Handle the state of currentVideoIndex to get the next video
+ const handleNextClick = () => {
+ if (currentVideoIndex < videos.length - 1) {
+ setCurrentVideoIndex(currentVideoIndex + 1);
+ }
+ };
+
+ useEffect(() => {
+ getYTVideoLink();
+ }, []);
+
+ //Return data to display on the website, also takes data from vidoes to display on the website
+ return (
+
+ {
+ isLoading ?
+ <>
+
+
+
+
:
+ <>
+
+ { videos[currentVideoIndex] }
+
+
+
+
+ {" "}
+
+
+
+
+
+
+
+
+ }
+