-
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
Week 9 – Movie Project – Sofia & Nathalie #48
base: main
Are you sure you want to change the base?
Changes from 26 commits
407450c
e0acfcb
1e73d46
ae8f1a6
075f5b2
8ec80fb
a241654
f9731d5
9f55ef8
43b5ea3
6ed880b
9ae7e62
ea6b889
0418f01
c7ea087
3fe9f6a
6925ed1
10bd019
a868f01
291bc20
01b7308
b0cbcd4
81f553f
034702f
41fe3ab
5b6e3a2
0ec0cd8
c0380bc
6d17b9a
b9fb27a
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 |
---|---|---|
@@ -0,0 +1 @@ | ||
VITE_DBAPI_KEY = 5f524441926a384bdad27fc1fd156e93 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,13 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Movie Site Project</title> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="/src/main.jsx"></script> | ||
</body> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" type="image/png" href="/popcorn.png" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Nathalie's & Sofia's Movie Site Project</title> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="/src/main.jsx"></script> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
/* /index.html 200 |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,41 @@ | ||
import { BrowserRouter, Routes, Route } from "react-router-dom" | ||
import { Footer } from "./components/footer/Footer" | ||
import { Header } from "./components/header/Header" | ||
import { Details } from "./components/details/Details" | ||
import { Listing } from "./components/listing/Listing" | ||
import { NotFound } from "./components/404/NotFound" | ||
import { Genres } from "./components/genres/Genres" | ||
|
||
export const App = () => { | ||
return <div>Find me in src/app.jsx!</div>; | ||
}; | ||
return ( | ||
<> | ||
<BrowserRouter> | ||
<Header /> | ||
<main> | ||
<Routes> | ||
{/* Conditional that makes the "page content" switch between components, depending on the URL*/} | ||
<Route | ||
path="/" | ||
element={<Listing />} | ||
errorElement={<NotFound />} | ||
/> | ||
<Route | ||
path="/movies/:slug/*" | ||
element={<Details />} | ||
errorElement={<NotFound />} | ||
/> | ||
<Route | ||
path="/genre/:genreId/" | ||
element={<Genres />} | ||
/> | ||
<Route | ||
path="*" | ||
element={<NotFound />} | ||
/> | ||
</Routes> | ||
</main> | ||
<Footer /> | ||
</BrowserRouter> | ||
</> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { useRouteError } from "react-router-dom" | ||
import "./NotFound.css" | ||
|
||
export const NotFound = () => { | ||
const error = useRouteError() | ||
console.error(error) | ||
return ( | ||
<div> | ||
<h1>Oups!</h1> | ||
<p>{error.statusText || error.message}</p> | ||
</div> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,139 @@ | ||
.details-container { | ||
height: 100svh; | ||
padding: 5%; | ||
color: white; | ||
display: flex; | ||
flex-wrap: wrap; | ||
/* align-items: flex-end; | ||
align-content: flex-end; */ | ||
justify-items: center; | ||
} | ||
|
||
.back-btn-wrapper { | ||
align-self: flex-start; | ||
position: absolute; | ||
top: 7%; | ||
display: none; | ||
} | ||
|
||
.back-button { | ||
width: 35px; | ||
height: 35px; | ||
filter: drop-shadow(0 0 0.4rem black); | ||
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. this shadow is a bit wonky -(square shadow on a round object) maybe use a svg instead to avoid this? :) |
||
} | ||
|
||
.poster { | ||
object-fit: cover; | ||
height: 100%; | ||
max-width: 200px; | ||
width: auto; | ||
border: 6px solid white; | ||
box-shadow: var(--box-shadow); | ||
margin-left: 16px; | ||
position: relative; | ||
} | ||
|
||
.details { | ||
width: 100%; | ||
background: radial-gradient(rgba(0, 0, 0, 0) 100%, rgb(0, 0, 0) 70%); | ||
display: flex; | ||
flex-wrap: wrap; | ||
align-items: flex-start; | ||
align-self: flex-start; | ||
justify-items: center; | ||
gap: 0.5rem; | ||
margin-bottom: 30px; | ||
} | ||
|
||
.summary { | ||
padding: 1rem 1rem 0 1rem; | ||
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. maybe add some more contrast here as well to improve readability? |
||
display: flex; | ||
flex-direction: column; | ||
gap: 1rem; | ||
} | ||
|
||
.title { | ||
text-shadow: var(--text-shadow); | ||
font-size: 28px; | ||
word-wrap: break-word; | ||
} | ||
|
||
.desc { | ||
font-size: 16px; | ||
} | ||
|
||
.rank-time-container { | ||
display: flex; | ||
gap: 2rem; | ||
} | ||
|
||
.ranking, | ||
.runtime { | ||
background-color: rgba(0, 0, 0, 0.4); | ||
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. nice with the dark background so its easier to read :) |
||
padding: 0.2rem; | ||
width: fit-content; | ||
color: rgba(255, 255, 255, 0.869); | ||
font-weight: 600; | ||
font-size: 0.875rem; | ||
border-radius: 3px; | ||
font-style: italic; | ||
} | ||
|
||
.ranking::before { | ||
content: "⭐️ "; | ||
display: inline; | ||
} | ||
|
||
.ranking::after { | ||
content: " / 10"; | ||
display: inline; | ||
} | ||
|
||
@media all and (min-width: 668px) { | ||
.details-container { | ||
flex-direction: row; | ||
align-content: flex-end; | ||
} | ||
|
||
.details { | ||
align-items: flex-end; | ||
align-content: flex-end; | ||
} | ||
|
||
.back-btn-wrapper { | ||
left: 20px; | ||
display: block; | ||
} | ||
|
||
.summary { | ||
width: 55%; | ||
} | ||
|
||
.poster { | ||
max-width: 245px; | ||
} | ||
.title { | ||
font-size: 38px; | ||
} | ||
|
||
.desc { | ||
font-size: 18px; | ||
} | ||
} | ||
|
||
@media all and (min-width: 1028px) { | ||
.poster { | ||
max-width: 295px; | ||
} | ||
.summary { | ||
width: 65%; | ||
} | ||
|
||
.title { | ||
font-size: 3rem; | ||
} | ||
|
||
.desc { | ||
font-size: 20px; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
import { Link, useParams } from "react-router-dom" | ||
import "./Details.css" | ||
import { useEffect, useState } from "react" | ||
import backButton from "../../assets/left-arrows-white.png" | ||
import { GenreList } from "../genreList/GenreList" | ||
|
||
export const Details = () => { | ||
const movie = useParams() | ||
const [results, setResults] = useState() | ||
const API_KEY = import.meta.env.VITE_DBAPI_KEY | ||
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. nice hiding that key on the client side :) |
||
const API_LANG = "en-US" | ||
const POSTER_URL = "https://image.tmdb.org/t/p" | ||
|
||
useEffect(() => { | ||
const fetchDetails = async () => { | ||
try { | ||
const response = await fetch( | ||
`https://api.themoviedb.org/3/movie/${movie.slug}?api_key=${API_KEY}&language=${API_LANG}` | ||
) | ||
if (!response.ok) { | ||
throw Error("Something wrong with the fetch") | ||
} | ||
const data = await response.json() | ||
setResults(data) | ||
} catch (error) { | ||
console.error("Error", error) | ||
setResults([]) | ||
} | ||
} | ||
|
||
fetchDetails() | ||
}, []) | ||
Comment on lines
+14
to
+32
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. Could also be written as:
|
||
|
||
return ( | ||
<> | ||
{results && ( | ||
<section | ||
className="details-container" | ||
style={{ | ||
background: `linear-gradient(rgba(0, 0, 0, 0) 20%, rgb(0, 0, 0) 100%), url(${POSTER_URL}/original${results.backdrop_path}) center/cover no-repeat`, | ||
}}> | ||
<div className="details"> | ||
<div className="back-btn-wrapper"> | ||
<Link to={"/"}> | ||
<img | ||
className="back-button" | ||
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. stick to either this one or the other one. this seemes a bit more styled so maybe just keep this one? |
||
src={backButton} | ||
alt="white arrow button pointing left" | ||
/> | ||
</Link> | ||
</div> | ||
<img | ||
className="poster" | ||
src={`${POSTER_URL}/w500${results.poster_path}`} | ||
alt={results.title} | ||
/> | ||
<div className="summary"> | ||
<h1 className="title">{results.title}</h1> | ||
<div className="rank-time-container"> | ||
<p className="ranking"> | ||
{Math.round(results.vote_average * 100) / 100} | ||
</p> | ||
<p className="runtime">{results.runtime} minutes</p> | ||
</div> | ||
<p className="desc">{results.overview}</p> | ||
<div className="genre-container"> | ||
<GenreList | ||
genreArray={results.genres} | ||
n={false} | ||
Comment on lines
+67
to
+69
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. Ohh, nice! ⭐ |
||
/> | ||
</div> | ||
</div> | ||
</div> | ||
</section> | ||
)} | ||
</> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.error-msg { | ||
padding: 2rem; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import "./Error.css" | ||
|
||
export const Error = ({ m }) => { | ||
return <div className="error-msg">{m}</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.
Remove unused code