Greatmoviez

README.md

@@ -6,29 +6,15 @@
 
 # Movie Site Project
 
-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.
-
-## Getting Started with the Project
-
-### Dependency Installation & Startup Development Server
-
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
-
-The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
-
-```bash
-npm i && code . && npm run dev
-```
+Create a movie site. Build multi-page React application and use a API. 
 
 ### 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?
+I did a css file for each component to keep things more tidy and easy to manage. The added an array for the movies. To make the text more accessible/readble I add gradient to increase the contrast between foreground and background element. Tested in lighthouse and got 88%. Replaced display none with opacity 0 and the got 100 on lighthouse.
 
 ### 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://greatmoviez.netlify.app/
 
 ## Instructions
 

package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "dayjs": "^1.11.10",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.jsx

@@ -1,3 +1,14 @@
-export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
-};
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { HomePage } from "./HomePage";
+import { MoviePage } from "./MoviePage";
+
+// https://reactrouter.com/
+export const App = () => (
+  <Router>
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+      <Route path="/movies/:id" element={<MoviePage />} />
+    </Routes>
+  </Router>
+);

src/HomePage.css

@@ -0,0 +1,64 @@
+.HomePage {
+  display: flex;
+  flex-direction: column;
+}
+
+.HomePage-title {
+  color: white;
+}
+
+.HomePage-movies {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.HomePage-movie {
+  width: 50%;
+  position: relative;
+}
+
+@media (min-width: 500px) {
+  .HomePage-movie {
+    width: 33.3333%;
+  }
+}
+
+@media (min-width: 700px) {
+  .HomePage-movie {
+    width: 25%;
+  }
+}
+
+.HomePage-movie:hover .HomePage-movieInfo {
+  opacity: 1;
+}
+
+.HomePage-moviePoster {
+  width: 100%;
+}
+
+.HomePage-movieInfo {
+  opacity: 0;
+  transition: opacity 0.3s;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  flex-direction: column;
+  padding: 1rem;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  justify-content: flex-end;
+  row-gap: 32px;
+}
+
+.HomePage-movieTitle {
+  font-size: 32px;
+  margin: 0;
+}
+
+.HomePage-movieReleaseDate {
+  font-size: 16px;
+  margin: 0;
+}

src/HomePage.jsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import dayjs from "dayjs";
+import "./HomePage.css";
+
+export const HomePage = () => {
+  const [movies, setMovies] = useState([]);
+
+  useEffect(() => {
+    const url = `https://api.themoviedb.org/3/movie/popular?api_key=bd8739b499ca4e3054f829b6e1e0d8e8&language=en-US&page=1`;
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => setMovies(data.results));
+  }, []);
+
+  return (
+    <div className="HomePage">
+      {/* created this early to help sketch out the structure of the page before fetching  */}
+      <div className="HomePage-movies">
+        {movies.map((movie) => (
+          <Link
+            key={movie.id}
+            className="HomePage-movie"
+            to={`/movies/${movie.id}`}
+          >
+            {/* <a href={`/movies/${movie.id}`}>{movie.title}</a> */}
+
+            {/* https://developer.themoviedb.org/docs/image-basics */}
+            {/* we have to build our own image URL, but that's helpful
+          so that we can pick the right size of image for what we're using it for  */}
+            <img
+              className="HomePage-moviePoster"
+              src={`https://image.tmdb.org/t/p/w400/${movie.poster_path}`}
+              alt=""
+            />
+            <div className="HomePage-movieInfo">
+              <h2 className="HomePage-movieTitle">{movie.title}</h2>
+              <p className="HomePage-movieReleaseDate">
+                {dayjs(movie.release_date).format("MMMM D, YYYY")}
+              </p>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};

src/MoviePage.css

@@ -0,0 +1,94 @@
+.MoviePage-backgroundImage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  width: 100vw;
+  height: 100vh;
+  object-fit: cover;
+}
+
+.MoviePage-backLink {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #ffffff;
+  font-size: 20px;
+  column-gap: 10px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  filter: drop-shadow(0 0 5px black);
+}
+
+.MoviePage-backIcon {
+  width: 30px;
+  filter: drop-shadow(0 0 5px black);
+}
+
+.MoviePage-info {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 50px;
+  row-gap: 20px;
+  background: linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0.8) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}
+
+@media (min-width: 700px) {
+  .MoviePage-info {
+    flex-direction: row;
+    align-items: flex-end;
+    column-gap: 32px;
+    justify-content: flex-start;
+  }
+
+  .MoviePage-overview {
+    max-width: 400px;
+  }
+}
+
+.MoviePage-poster {
+  width: 200px;
+  border: 5px solid white;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+}
+
+.MoviePage-textInfo {
+  display: flex;
+  flex-direction: column;
+  row-gap: 20px;
+}
+
+.MoviePage-heading {
+}
+
+.MoviePage-title {
+  color: white;
+  font-size: 30px;
+  font-weight: bold;
+  text-shadow: 0 0 5px black;
+}
+
+.MoviePage-votes {
+  background: white;
+  padding: 5px;
+  display: inline-flex;
+  column-gap: 4px;
+  font-size: 19px;
+}
+
+.MoviePage-overview {
+  color: white;
+}

src/MoviePage.jsx

@@ -0,0 +1,64 @@
+import "./MoviePage.css";
+import { useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+// here we fetch each movie details by its ID
+export const MoviePage = () => {
+  const { id } = useParams();
+  const [movie, setMovie] = useState();
+
+  useEffect(() => {
+    const url = `https://api.themoviedb.org/3/movie/${id}?api_key=bd8739b499ca4e3054f829b6e1e0d8e8&language=en-US&page=1`;
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => setMovie(data));
+  }, []);
+  console.log(movie);
+
+  if (!movie) {
+    return <h1></h1>;
+  }
+
+  return (
+    <div className="MoviePage">
+      <img
+        className="MoviePage-backgroundImage"
+        src={`https://image.tmdb.org/t/p/w1280/${movie.backdrop_path}`}
+        alt=""
+      />
+      <div className="MoviePage-info">
+        <img
+          className="MoviePage-poster"
+          src={`https://image.tmdb.org/t/p/w200/${movie.poster_path}`}
+          alt=""
+        />
+        <div className="MoviePage-textInfo">
+          <div className="MoviePage-heading">
+            <span className="MoviePage-title">{movie.title}</span>{" "}
+            <span className="MoviePage-votes">
+              <img src="/star.svg" alt="" />
+              {movie.vote_average.toFixed(1)}
+            </span>
+          </div>
+
+          <div className="MoviePage-overview">{movie.overview}</div>
+        </div>
+      </div>
+
+      <Link className="MoviePage-backLink" to="/">
+        <svg
+          className="MoviePage-backIcon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 30 30"
+        >
+          <path
+            d="M27 14.5C27 7.596441 21.4035594 2 14.5 2S2 7.596441 2 14.5 7.5964406 27 14.5 27 27 21.403559 27 14.5zm-19.3388348-.353553l7.4852814-7.485282c.1952622-.195262.5118446-.195262.7071068 0l2.1213203 2.121321c.1952622.195262.1952622.511844 0 .707106L12.9644661 14.5l5.0104076 5.010408c.1952622.195262.1952622.511844 0 .707106l-2.1213203 2.121321c-.1952622.195262-.5118446.195262-.7071068 0l-7.4852814-7.485282c-.19799-.19799-.197989-.509117 0-.707106z"
+            fill="#fff"
+            fillRule="evenodd"
+          ></path>
+        </svg>
+        Movies
+      </Link>
+    </div>
+  );
+};

src/index.css

@@ -11,3 +11,12 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+body {
+  background: black;
+  margin: 0;
+}
+
+* {
+  box-sizing: border-box;
+}