-
Notifications
You must be signed in to change notification settings - Fork 115
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Greatmoviez #45
base: main
Are you sure you want to change the base?
Greatmoviez #45
Changes from all commits
344b3a7
c74c72b
308f358
60bef57
4629df5
89933e7
9b7524b
a89eefe
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
.HomePage { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should be kebab-case for class names 👀 |
||
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; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Remove console.logs in production |
||
|
||
if (!movie) { | ||
return <h1></h1>; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ? |
||
} | ||
|
||
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> | ||
); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice and clean App structure 👍