+
+ {/*
*/}
+
+
+
+
+
{movieDetails.title}
+
⭐ {Math.round(movieDetails.vote_average * 10) / 10}
+
{movieDetails.overview}
+
+
+ )
+}
+
+export default SingleMovie;
\ No newline at end of file
diff --git a/code/src/components/TrendingList.js b/code/src/components/TrendingList.js
new file mode 100644
index 000000000..31be61045
--- /dev/null
+++ b/code/src/components/TrendingList.js
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+// import { API_KEY } from 'utils/key';
+import { BASE_URL } from 'utils/urls';
+
+const TrendingList = () => {
+ const [movieList, setMovieList] = useState([])
+ useEffect(() => {
+ fetch(BASE_URL)
+ .then((response) => response.json())
+ .then((data) => setMovieList(data.results))
+ .catch((error) => console.log(error))
+ }, [])
+ return (
+
+ {movieList.map((movie) => {
+ return (
+
+ 
+
+
{movie.title}
+
Released {movie.release_date}
+
+ )
+}
+
+export default TrendingList;
\ No newline at end of file
diff --git a/code/src/index.js b/code/src/index.js
index ec9ad93c9..d0dc7ce8d 100644
--- a/code/src/index.js
+++ b/code/src/index.js
@@ -1,6 +1,10 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
-import './index.css';
+import './styling/index.css';
+import './styling/singlemovie.css';
+import './styling/footer.css'
+import './styling/trendinglist.css'
+import './styling/notfound.css'
import { App } from './App';
const container = document.getElementById('root');
diff --git a/code/src/styling/footer.css b/code/src/styling/footer.css
new file mode 100644
index 000000000..dc73d396d
--- /dev/null
+++ b/code/src/styling/footer.css
@@ -0,0 +1,51 @@
+footer {
+ margin-top: 20px;
+ /* height: 120px; */
+ padding: 5px;
+ background-color: black;
+ display: flex;
+ flex-direction: column;
+ }
+
+ footer p {
+ text-align: center;
+ /* font-family: 'Roboto Mono', monospace; */
+ color: white;
+ /* text-shadow: 1px 1px 2px white; */
+ }
+
+ .contact-me {
+ display:flex;
+ justify-content: center;
+ align-items: center;
+ gap: 5px;
+ padding: 5px;
+ margin-top: 10px;
+ }
+
+ .contact-logo {
+ width: 30px;
+ height: 30px;
+ object-fit: cover;
+ opacity: .75;
+ }
+
+ .contact-logo:hover {
+ transform: scale(1.2);
+ opacity: 1;
+ }
+
+ .about-me {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 5px;
+ padding: 5px;
+ font-size: 15px;
+ margin-bottom: 10px;
+ /* font-family: 'Roboto Mono', monospace; */
+ color: white;
+ /* text-shadow: 1px 1px 2px #3B5898; */
+ text-align: center;
+ }
\ No newline at end of file
diff --git a/code/src/index.css b/code/src/styling/index.css
similarity index 80%
rename from code/src/index.css
rename to code/src/styling/index.css
index 4a1df4db7..929c6016f 100644
--- a/code/src/index.css
+++ b/code/src/styling/index.css
@@ -5,9 +5,17 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ background-color: black;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+
+}
\ No newline at end of file
diff --git a/code/src/styling/notfound.css b/code/src/styling/notfound.css
new file mode 100644
index 000000000..b2128b304
--- /dev/null
+++ b/code/src/styling/notfound.css
@@ -0,0 +1,15 @@
+.not-found {
+ height: 70vh;
+}
+
+.not-found .back-button {
+ width: 200px;
+}
+.not-found p {
+ font-size: xx-large;
+ color: #fff;
+ text-align: center;
+}
+
+
+
diff --git a/code/src/styling/singlemovie.css b/code/src/styling/singlemovie.css
new file mode 100644
index 000000000..470694fad
--- /dev/null
+++ b/code/src/styling/singlemovie.css
@@ -0,0 +1,115 @@
+.single-movie-wrapper {
+ min-height: 100vh;
+ background-size: cover;
+ display: flex;
+ flex-direction: column;
+ padding: 30px;
+}
+
+.back-button {
+ color: white;
+ border: none;
+ background: none;
+ font-size: 18px;
+ font-weight: bold;
+ text-align: center;
+ width: 160px;
+ height: 25px;
+ margin: 30px 0 30px 20px;
+ opacity: .85;
+}
+
+.back-button:hover {
+ transform: scale(1.1);
+ opacity: 1;
+}
+
+.single-movie-poster {
+ border: white 5px solid;
+ width: 100%;
+ /*max-width: 342px;*/
+}
+
+.single-movie-details {
+ padding: 20px;
+}
+
+.single-movie-title {
+ font-size: 28px;
+ margin: 20px 0 10px 0;
+ color: whitesmoke;
+}
+
+.single-rating {
+ font-size: 22px;
+ margin: 0 0 10px 0;
+ color: black;
+ background-color: rgba(245, 245, 245, 0.979);
+ width: fit-content;
+ padding: 0px 10px 0px 10px;
+ border-radius: 7px;
+}
+
+.single-movie-overview {
+ font-size: 18px;
+ color: whitesmoke;
+}
+
+@media (min-width: 667px) and (max-width: 1024px) {
+ .single-movie-wrapper {
+ display: grid;
+ grid-template-columns: 50% 50%;
+ grid-template-rows: 40% 60%;
+ padding: 30px;
+ }
+
+ .single-movie-poster {
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ align-self: end;
+ width: 90%;
+ /*max-width: 342px;*/
+ justify-self: end;
+ margin: 0px 30px 0px 30px;
+ }
+
+ .single-movie-details {
+ grid-column: 2 / 3;
+ grid-row: 2 / 3;
+ align-self: end;
+ margin: 0;
+ }
+}
+
+@media (min-width: 1025px) {
+
+ .single-movie-wrapper {
+ display: grid;
+ grid-template-columns: 40% 40% 20%;
+ grid-template-rows: 10% 90%;
+ }
+
+ .back-button {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ margin-left: 50px;
+ }
+
+ .single-movie-poster {
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ align-self: end;
+ justify-self: end;
+ margin: 0px 30px 0px 30px;
+ width: 85%;
+ /*max-width: 342px;*/
+
+ }
+
+ .single-movie-details {
+ grid-column: 2 / 3;
+ grid-row: 2 / 3;
+ align-self: end;
+ margin: 0;
+ }
+}
diff --git a/code/src/styling/trendinglist.css b/code/src/styling/trendinglist.css
new file mode 100644
index 000000000..fe3d3ccff
--- /dev/null
+++ b/code/src/styling/trendinglist.css
@@ -0,0 +1,57 @@
+.front-page {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.front-page a {
+ width: 100%;
+ position: relative;
+ color: #fff;
+ text-decoration: none;
+}
+
+.front-page a img {
+ width: 100%;
+}
+
+.front-page .poster-hover-details {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba(0, 0, 0, 0.75);
+ display: none;
+ padding: 20px;
+}
+
+.front-page .poster-hover-details h1 {
+ margin-top: auto;
+ margin-bottom: 20px;
+}
+
+.front-page a:hover .poster-hover-details {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ justify-content: flex-end;
+}
+
+
+@media (min-width: 370px) {
+ .front-page a {
+ width: 50%;
+ }
+}
+
+@media (min-width: 570px) {
+ .front-page a {
+ width: 33.33%;
+ }
+}
+
+@media (min-width: 820px) {
+ .front-page a {
+ width: 25%;
+ }
+}
\ No newline at end of file
diff --git a/code/src/utils/urls.js b/code/src/utils/urls.js
new file mode 100644
index 000000000..23d2ebfe1
--- /dev/null
+++ b/code/src/utils/urls.js
@@ -0,0 +1,2 @@
+export const BASE_URL = `https://api.themoviedb.org/3/trending/movie/day?api_key=${process.env.REACT_APP_KEY}`
+export const SINGLE_MOVIE = (id) => `https://api.themoviedb.org/3/movie/${id}?api_key=${process.env.REACT_APP_KEY}`
\ No newline at end of file
diff --git a/netlify.toml b/netlify.toml
index e42219ead..13101f8b5 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -4,3 +4,8 @@
base = "code/"
publish = "build/"
command = "npm run build"
+
+[[redirects]]
+ from = "/*"
+ to = "/index.html"
+ status = 200
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..99196158c
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+ "name": "project-movies",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {}
+}