W9-movie-site

.gitignore

@@ -12,6 +12,7 @@ dist
 dist-ssr
 *.local
 package-lock.json
+.env
 
 # Editor directories and files
 .vscode/*

README.md

@@ -1,37 +1,8 @@
-<h1 align="center">
-  <a href="">
-    <img src="/src/assets/movies.svg" alt="Project Banner Image">
-  </a>
-</h1>
-
 # 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
-```
-
-### 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?
+A movie website to show a list of popular movies and details about each movie by use React, React Router.
 
 ### 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.
-
-## Instructions
-
-<a href="instructions.md">
-   See instructions of this project
-  </a>
+https://jingmovierelease.netlify.app/
+[jingh999]

instructions.md

@@ -34,6 +34,9 @@ With your freshly minted API key, you're now ready to start making API requests.
 
 https://api.themoviedb.org/3/movie/popular?api_key={api_key}&language=en-US&page=1 <br />
 !!! Don't forget to replace {api_key} with your API key if you copy and paste this.
+https://api.themoviedb.org/3/movie/popular?api_key=b8e637d215af7c581df59754b1cd501e&language=en-US&page=1
+
+api_key = b8e637d215af7c581df59754b1cd501e
 
 ### Fetching a movie's details
 
@@ -50,6 +53,8 @@ That path to the image is incomplete - it needs a full URL.
 
 To get the full URL, we need to decide what size of the image we'd like, and the API has a bunch of options for that. You can find the full list of sizes by loading the API endpoint https://api.themoviedb.org/3/configuration?api_key={api_key} (don't forget to put your API key in place of {api_key}). That response looks something like this:
 
+https://api.themoviedb.org/3/configuration?api_key=b8e637d215af7c581df59754b1cd501e
+
 ```json
 {
   "images": {
@@ -110,11 +115,6 @@ This route expects a movie ID in the URL and is responsible for showing more det
   - You could also investigate how to handle the loading of images - or show plain text by default and then use CSS to place the image over the text (using absolute positioning). This way, if the images take a long time to load, the user still sees something relevant.
 
 ### Advanced stretch goals
+
 - On the homepage where you list popular movies, you could add a dropdown to change the list. For example, you could toggle between popular, upcoming, and new releases.
 - When you load a movie, you get a lot of information in the API response, such as a collection it belongs to, genres it has, or the companies involved with producing the film. Each of these has an API endpoint that can be used to fetch more information about that entity. You could use this data to make links from your movie page to another page. Take a look through the documentation and be creative!
-
-
-
-
-
-

netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "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,16 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { MovieList } from './pages/MovieList.jsx';
+import { ShowMovie } from './pages/ShowMovie.jsx';
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
-};
+  return (
+    <BrowserRouter>
+      <main>
+        <Routes>
+          <Route path="/" element={<MovieList />} />
+          <Route path="/movies/:id" element={<ShowMovie/>} />
+        </Routes>
+      </main>
+    </BrowserRouter>
+  )
+};

src/components/Cover.css

@@ -0,0 +1,57 @@
+.cover-container {
+  width: 100%;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.movie:hover .movie-info{
+  opacity: 0.8;
+}
+
+a{
+  width: 50%; 
+  margin: 0;
+  height: auto;
+  text-decoration: none;
+  position: relative;
+}
+
+a img {
+  width: 100%;
+  display: flex;
+}
+
+a:hover .movie-info {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.cover{
+  width: 100%;
+  margin: 0;
+  height: 100%;
+  object-fit: cover;
+}
+
+.movie-info{
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.75);
+  display: none;
+  padding: 20px;
+  color: white;
+}
+
+@media (min-width:1025px){
+  a{
+    width: calc(25% - 1px); 
+    margin: 0;
+    height: auto;
+  }
+}

src/components/Cover.jsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import './Cover.css';
+import { Link} from 'react-router-dom';
+
+export const Cover = () => {
+  const apiEnv = import.meta.env.VITE_OPENDB_KEY;
+  const [coverImages, setCoverImages] = useState([]);
+  const [movieIds, setMovieIds] = useState([]);
+  const [movies, setMovies] = useState([]);
+
+  const movieUrl = `https://api.themoviedb.org/3/movie/popular?api_key=${apiEnv}&language=en-US&page=1`;
+
+  useEffect(() => {
+    fetch(movieUrl)
+      .then(res => res.json())
+      .then(json => {
+
+        setMovies(json.results);
+
+        setMovieIds(json.results.map(movie=>movie.id));
+
+        setCoverImages(json.results.map(movie => movie.poster_path));
+      })
+      .catch(error => {
+        console.error('Error fetching data:', error);
+      });
+  }, [movieUrl]);
+
+  return (
+    <div className = "cover-container">
+      {movies.map((movie, index)=>(
+        <Link key={movieIds[index]} to={`/movies/${movieIds[index]}`}>
+          <img src={`https://image.tmdb.org/t/p/w1280${movie.poster_path}`} alt="poster" className='cover' />
+          <div className = "movie-info">
+            <h1 className = "movie-title">{movie.title}</h1>
+            <p className = "movie-date">Released {movie.release_date}</p>
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+};

src/components/details/Background.jsx

@@ -0,0 +1,10 @@
+import './Pictures.css'
+
+export const Background = ({movieDetail}) => {
+  return (
+    <div>
+      <img src={`https://image.tmdb.org/t/p/original${movieDetail?.backdrop_path} `}  alt = "background_image" className = "background"/>
+      <div className = "inner-shadow"></div>
+    </div>
+  )
+}

src/components/details/Description.css

@@ -0,0 +1,44 @@
+.description-container{
+  display: flex;
+  flex-direction: column;
+}
+
+.title-container{
+  flex-wrap: wrap;
+  font-size: 1.5em;
+  font-weight: bold;
+  margin-block-start: 1em;
+  margin-block-end: 0;
+  display: block;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  unicode-bidi: isolate;
+}
+
+.rate{
+  background-color: white;
+  color: black;
+  padding:0 5px;
+  margin-left: 10px;
+}
+
+.detail-overview{
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  unicode-bidi: isolate;
+}
+
+@media (min-width:667px) and (max-width:1024px){
+  .description-container{
+    position: relative;
+    bottom: -160px;
+  }
+}
+
+@media (min-width:1025px){
+  .description-container{
+    position: relative;
+    bottom: -320px;
+  }
+}

src/components/details/Description.jsx

@@ -0,0 +1,13 @@
+import './Description.css'
+
+export const Description = ({movieDetail}) => {
+  return (
+    <div className = "description-container">
+      <h1 className = "title-container">
+        <span className = "detail-title">{movieDetail?.title}</span>
+        <span className = "rate">⭐{movieDetail?.vote_average.toFixed(1)}</span>
+      </h1>
+      <p className = "detail-overview">{movieDetail?.overview}</p>
+    </div>
+  )
+}

src/components/details/FrontImage.jsx

@@ -0,0 +1,9 @@
+import './Pictures.css'
+
+export const FrontImage = ({movieDetail}) => {
+  return (
+    <div>
+      <img src={`https://image.tmdb.org/t/p/w342${movieDetail?.poster_path} `}  alt="poster_image" className = "poster-image" />
+    </div>
+  )
+}

src/components/details/Nav.css

@@ -0,0 +1,14 @@
+.back-home{
+  position: absolute;
+  display: inline-flex;
+  color: #fff;
+  align-items: center;
+  font-weight: 700;
+  text-decoration: none;
+  left: 50px;
+  top: 20px;
+  filter: drop-shadow(2px 3px 4px rgb(0 0 0 / .5));
+  min-width: 80px;
+  margin: 0;
+  z-index: 5;
+}

src/components/details/Nav.jsx

@@ -0,0 +1,10 @@
+import { Link } from 'react-router-dom'
+import './Nav.css'
+
+export const Nav = () => {
+  return (
+    <Link to = "/">
+      <h3 className = "back-home"> ◄  Movie </h3>
+    </Link>
+  )
+}

src/components/details/Pictures.css

@@ -0,0 +1,49 @@
+.background{
+  height: 100vh;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  background-size: cover;
+  position: absolute;
+  flex-direction: column;
+  justify-content: flex-end;
+  margin: 0;
+}
+
+.inner-shadow {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 30%; /* Adjust height as needed */
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
+}
+
+.poster-image{
+  width: 200px;
+  height: auto;
+  border: 5px solid #fff;
+}
+
+@media (min-width:667px) and (max-width:1024px){
+  .background{
+    height: 100vh;
+    width: auto;
+    width: 100%;
+  }
+
+  .poster-image{
+    width: 250px;
+  }
+}
+
+@media (min-width:1025px){
+  .background{
+    width: 100vw;
+    background-size: cover;
+  }
+
+  .poster-image{
+    width: 352px;
+  }
+}

src/index.css

@@ -11,3 +11,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+body{
+  margin: 0;
+}

src/main.jsx

@@ -7,4 +7,4 @@ ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-);
+);