Technigo · beemailley · Mar 29, 2023 · Mar 29, 2023 · Mar 30, 2023 · Mar 30, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,15 @@
 # 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.
+The homepage for this website shows movie posters for today's trending movies according to The Movie Database. When you click on any poster, you will go to a page that has details specifically for that movie.
 
 ## 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?
 
+This week, we worked in a small group to learn and practice using React Router to build more than one page for the website. We learned several new hooks, including useNavigate and useParams.  We also learned how to incorporate a .env file to store environmental variables. To start this project, we sketched our components and their relationships with pencil and paper. We then began coding each component so that we knew we could fetch the correct data from each API we needed to use. Once the pages were functional, we then split up into two groups to style each page component. We then merged our branches and tidied up the code. 
+
+We have experimented with the .env file and and environmental variable in order to not include our API key directly in the code.  If we had more time, we would further test this to make sure it's working correctly (it still seems to show some errors).  If we had more time, we would also have done a bit more styling, and tried to incorporate additional APIs with different movie data.
+
 ## 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://cosmic-daffodil-7c032f.netlify.app/
diff --git a/code/.eslintrc.json b/code/.eslintrc.json
@@ -42,6 +42,10 @@
         "allowSingleLine": true
       }
     ],
+    "linebreak-style":[
+      "off",
+      "unix"
+    ],
     "comma-dangle": [
       "error",
       "never"

diff --git a/code/.gitignore b/code/.gitignore
@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# api key
+.env
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/package.json b/code/package.json
@@ -4,14 +4,19 @@
   "private": true,
   "dependencies": {
     "@babel/eslint-parser": "^7.18.9",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "dotenv": "^16.0.3",
     "eslint": "^8.21.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "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.10.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/code/public/assets/Frida.jpg b/code/public/assets/Frida.jpg
diff --git a/code/public/assets/annika.jpg b/code/public/assets/annika.jpg
diff --git a/code/public/assets/bridget.jpg b/code/public/assets/bridget.jpg
diff --git a/code/public/assets/chevron_left.svg b/code/public/assets/chevron_left.svg
diff --git a/code/public/assets/chevron_left_2.png b/code/public/assets/chevron_left_2.png
diff --git a/code/public/index.html b/code/public/index.html
@@ -13,7 +13,8 @@
       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>Annika, Bridget, & Frida's Movie Page</title>
+    <script src="https://kit.fontawesome.com/dae95110f4.js" crossorigin="anonymous"></script>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,20 @@
 import React from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import NotFound from 'components/NotFound';
+import TrendingList from 'components/TrendingList';
+import SingleMovie from 'components/SingleMovie';
+import Footer from 'components/Footer';
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<TrendingList />} />
+        <Route path="/movies/:id" element={<SingleMovie />} />
+        <Route path="/404" element={<NotFound />} />
+        <Route path="*" element={<Navigate to="/404" replace />} />
+      </Routes>
+      <Footer />
+    </BrowserRouter>
   );
 }
diff --git a/code/src/components/Footer.js b/code/src/components/Footer.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer>
+      <div className="contact-me">
+        <a href="https://github.com/annikalindberg"><img src="/assets/annika.jpg" className="contact-logo" alt="link to Annika's github" /></a>
+        <a href="https://bridgetmailley.com/"><img src="/assets/bridget.jpg" className="contact-logo" alt="link to Bridget's portfolio" /></a>
+        <a href="https://frida-nordenlow-portfolio.netlify.app//"><img src="/assets/frida.jpg" className="contact-logo" alt="link to Frida's portfolio" /></a>
+      </div>
+      <div className="about-me">
+        <p>Designed by Annika, Bridget, & Frida. Technigo Web Development Bootcamp 2023.</p>
+        <p>Data and images from <a href="https://www.themoviedb.org/">The Movie Database</a></p>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer
diff --git a/code/src/components/NotFound.js b/code/src/components/NotFound.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const NotFound = () => {
+  const navigate = useNavigate()
+  const onBackButtonClick = () => {
+    navigate('/');
+  }
+
+  return (
+    <div className="not-found">
+      <button className="back-button" type="button" onClick={onBackButtonClick}>Back to Home Page</button>
+      <p>Sorry, no such page</p>
+    </div>
+  )
+}
+
+export default NotFound;