Technigo · mvfrid · Mar 29, 2023 · Mar 29, 2023 · Mar 30, 2023 · Mar 31, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,11 @@
 # Project Movies
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This weeks project was all about building multi-page applications using React Router. It was done through pair-programming by Matilda Frid and Johanna Leonsson. The task was to create a site where the user can scroll through the latest movie releases and select a movie to read more about. 
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+We started out planning and creating the components we wanted to use. Then we made sure that we could fetch the correct data from the IMDB API and insert it into our components. Once we got all the basic functions to work, we continued with styling the different pages according to the styling proposal we had recieved before. 
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://johanna-matilda-project-movies.netlify.app/
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/package.json b/code/package.json
@@ -11,7 +11,8 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.9.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/code/public/index.html b/code/public/index.html
@@ -4,6 +4,12 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="https://kit.fontawesome.com/e51eabe7f5.js" crossorigin="anonymous"></script>
+
+      <!-- Most essentiel OG tags-->
+      <meta property="og:title" content="Movie Releases">
+      <meta property="og:description" content="Johanna & Matildas Movie Releases Project">
+      <meta property="og:image" content="https://i.postimg.cc/Hsv4ZnZB/2023-04-01-17-50-562.png">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -13,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Technigo React App</title>
+    <title>Movie Releases</title>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,34 @@
 import React from 'react';
+// eslint-disable-next-line no-unused-vars
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import MovieList from './components/MovieList';
+import MovieDetails from './components/MovieDetails';
+
+// https://api.themoviedb.org/3/movie/popular?api_key=7e62f4c867db459871fea2a9a052cb08&language=en-US&page=1
 
 export const App = () => {
+  // const [loading, setLoading] = useState(false);
+  // const [list, setList] = useState([]);
+  // const API_KEY = '7e62f4c867db459871fea2a9a052cb08';
+  // console.log(list)
+
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<MovieList />} />
+        <Route path="/details/:id" element={<MovieDetails />} />
+      </Routes>
+    </BrowserRouter>
   );
 }
+
+/*
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<MovieList movies={list} />} />
+        <Route path="/details/:id" element={<MovieDetails />} />
+      </Routes>
+    </BrowserRouter>
+  );
+  */
diff --git a/code/src/components/Footer.css b/code/src/components/Footer.css
@@ -0,0 +1,43 @@
+
+
+.foot-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+    padding-top: 20px;
+    padding-bottom: 30px;
+  }
+
+  .icon-link  {
+    color: red;
+    font-size: 30px;
+    padding: 0 20px 0 20px;
+  }
+
+  .icon-link :hover {
+    color: white;
+  }
+
+  .byFoot {
+    font-family: "Courier New";
+    font-size: 16px;
+    color: white;
+    margin: 10px auto 14px auto;
+    max-width: 80%;
+    text-align: center;
+  }
+
+
+  @media (min-width: 820px) {
+
+      .icon-link  {
+        font-size: 43px;
+      }
+
+      .byFoot {
+        font-size: 22px;
+      }
+  }
+
+
diff --git a/code/src/components/Footer.js b/code/src/components/Footer.js
@@ -0,0 +1,29 @@
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <div className="foot-container">
+      <div>
+        <a
+          className="icon-link"
+          href="https://www.linkedin.com/in/matilda-frid-7923bb88/"
+          aria-label="Link to Matildas Linkedin"
+          target="_blank"
+          rel="noopener noreferrer">
+          <i className="fa-brands fa-linkedin-in" />
+        </a>
+        <a
+          className="icon-link"
+          href="https://www.linkedin.com/in/johannaleonsson/"
+          aria-label="Link to Johannas Linkedin"
+          target="_blank"
+          rel="noopener noreferrer">
+          <i className="fa-brands fa-linkedin-in" />
+        </a>
+      </div>
+      <p className="byFoot">Created by Matilda Frid & Johanna Leonsson</p>
+    </div>
+  )
+}
+
+export default Footer;
diff --git a/code/src/components/Loading.css b/code/src/components/Loading.css
@@ -0,0 +1,23 @@
+
+.loading {
+    display: flex;
+    justify-content: center;
+    font-size: 150px;
+    padding-top: 300px;
+}
+
+.loading span {
+    animation: bounce 0.5s ease-in-out infinite;
+  }
+
+  @keyframes bounce {
+    0% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-40px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
diff --git a/code/src/components/Loading.js b/code/src/components/Loading.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Loading = () => {
+  return (
+    <div className="loading">
+      <span aria-label="animated emoji indicating loading">🎬</span>
+    </div>
+  )
+}
+
+export default Loading;
diff --git a/code/src/components/MovieDetails.css b/code/src/components/MovieDetails.css
@@ -0,0 +1,87 @@
+.detailContainer {
+    margin: 0;
+    position: relative;
+}
+
+h2 {
+    color: white;
+    font-size: 30px;
+    margin: 0;
+}
+
+p {
+    color: white;
+}
+
+.icon {
+    position: absolute;
+    font-size: 40px;
+    color: red;
+    padding: 20px 20px;
+    text-decoration: none;
+    display: flex;
+    gap: 12px;
+}
+
+.icon span {
+    color: white;
+    font-size: 28px;
+}
+
+.icon:hover i {
+    transition: margin-right 0.2s ease-in-out;
+  }
+
+  .rating {
+    margin: 0;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+.detailSummary {
+    min-height: 100vh;
+    display: flex;
+    background-size: cover;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: 25px;
+    gap: 15px;
+}
+
+.detailText {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .poster {
+    max-width: 200px;
+    max-height: 300px;
+    border: solid white 3px;
+  }
+
+
+  @media (min-width: 577px) {
+    .detailSummary {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: flex-end;
+        padding: 50px;
+    }
+    .detailText {
+        max-width: 600px;
+    }
+}
+
+    @media (min-width: 770px) {
+        .detailSummary {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-end;
+            padding: 50px;
+        }
+        .detailText {
+            max-width: 600px;
+        }
+      }
+