Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,6 @@
# Movies
js-project-movies:
An app where you can scroll through movie alternatives, see each overview and rating by clicking at the movie poster. Built with React/React Router!

Link to netlify:

By Asako Kanno & Frida Engman, Web development Bootcamp at Technigo 2025
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@
},
"dependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0"
"react-dom": "^19.0.0",
"react-router-dom": "^7.10.1",
"styled-components": "^6.1.19"
},
"devDependencies": {
"@eslint/js": "^9.21.0",
Expand Down
15 changes: 13 additions & 2 deletions src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Home } from "./Routes/Home"
import { MovieInfo } from "./Routes/MovieInfo"

export const App = () => {
return (
<h1>Movies</h1>
)
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/movies/:id" element={<MovieInfo />} />
</Routes>
</BrowserRouter>
);
}


66 changes: 66 additions & 0 deletions src/Components/MovieCard.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import styled from "styled-components";
import { Link } from "react-router-dom"


//styling
const Card = styled.div`
position: relative;
height: auto;
min-width: 0px;
text-align: left;

&:hover div {
opacity: 1;
}
`;
const Poster = styled.img`
width: 100%;
`;
const Overlay = styled.div`
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: left;
opacity: 0;
transition: opacity 0.3s ease;
text-align: left;
padding: 1rem;
`;
const Title = styled.h2`
font-size: 1rem;
background: none;
`;
const ReleaseDate = styled.p`
font-size: 0.9rem;
background: none;
`;

//component
export const MovieCard = ({ movie }) => {
const IMAGE_BASE = "https://image.tmdb.org/t/p/w342";

// card with overlay and movie title
return (
<>
<Card>
<Link to={`/movies/${movie.id}`}>
<Poster
src={`${IMAGE_BASE}${movie.poster_path}`}
alt={movie.title}
/>
<Overlay>
<Title>{movie.title}</Title>
<ReleaseDate>Released {movie.release_date}</ReleaseDate>
</Overlay>
</Link>
</Card>
</>
)
}

27 changes: 27 additions & 0 deletions src/Components/NavLink.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Link } from "react-router-dom";
import styled from "styled-components";

//styling
const StyledLink = styled(Link)`
text-decoration: none;
font-weight: bold;
font-size: Large;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
margin-left: 20px;
transition: transform 0.2s ease;

&:hover {
transform: translateX(5px);
}

@media (min-width: 768px) {
margin-left: 50px;
}
`;

//component
const NavLink = ({ to = "/", children }) => {
return <StyledLink to={to}>{children}</StyledLink>;
};

export default NavLink;
57 changes: 57 additions & 0 deletions src/Routes/Home.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { useEffect, useState } from "react";
import { MovieCard } from "../Components/MovieCard"
import styled from "styled-components";

//styling
const Grid = styled.section`
display: grid;
gap: 0;
margin: 0;
grid-template-columns: repeat(2, minmax(140px, 1fr));

@media (min-width: 768px) {
grid-template-columns: repeat(3, minmax(140px, 1fr));
}

@media (min-width: 1024px) {
grid-template-columns: repeat(4, minmax(140px, 1fr));

}
`;

// component
export const Home = () => {
const [movies, setMovies] = useState([]);
const [loading, setLoading] = useState(true);

//fetching API
useEffect(() => {
fetch(
`https://api.themoviedb.org/3/movie/popular?api_key=a2b94bfec7b2f944f7fff21bcd94ef06&language=en-US&page=1`
)
.then(res => res.json())
.then(data => {
setMovies(data.results);
setLoading(false);
})
.catch(err => {
console.error("Error fetching movies:", err);
setLoading(false);
});
}, []);

if (loading) return <p>Loading movies...</p>;

// movie grid
return (
<Grid>
{movies.map(movie => (
<MovieCard key={movie.id} movie={movie} />
))}
</Grid>
);
}




169 changes: 169 additions & 0 deletions src/Routes/MovieInfo.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import styled from "styled-components";
import NavLink from "../Components/NavLink";

//styling

const TopNav = styled.div`
display: flex;
position: absolute;
top: 20px;
z-index: 10;
`;

const InfoRow = styled.div`
display: flex;
flex-direction: column;
align-items: left;
gap: 15px;
padding: 20px;
z-index: 1;
box-sizing: border-box;

@media (min-width: 768px) {
flex-direction: row;
align-items: flex-end;
gap: 30px;
padding: 50px;
}
`;

const InfoText = styled.div`
display: flex;
flex-direction: column;
max-width: 100%;
gap: 10px;


@media (min-width: 768px) {
max-width: 400px;
}
`;

const Backdrop = styled.div`
width: 100%;
min-height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
display: flex;
align-items: column;


&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(rgba(0,0,0,0)0%, rgba(0,0,0,0.9) 90%);
}

@media (min-width: 768px) {
height: 100vh;
align-items: flex-end;
}
`;

const Poster = styled.div`
width: 100%;
height: 80%;
max-width: 60%;
aspect-ratio: 2 / 3;
border: 6px solid white;
margin-top: 60px;

img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
`;

const TitleRow = styled.div`
align-items: center;
gap: 2px;

@media (min-width: 768px) {
display: flex;
}
`;

const Title = styled.h1`
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

@media (min-width: 768px) {
margin-top: 330px;
}
`;

const Rating = styled.span`
background-color: #ffffffad;
color: black;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
font-weight: bold;
border-radius: 2px;
padding: 0.2rem 0.5rem;
font-size: 1rem;
margin-top: 0px;

@media (min-width: 768px) {
margin-top: 330px;
}
`;

const Info = styled.p`
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
font-size: 12px;
`;


//component
export const MovieInfo = () => {
const { id } = useParams();
const [movie, setMovie] = useState(null);

//fetching API
useEffect(() => {
fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=a2b94bfec7b2f944f7fff21bcd94ef06&language=en-US`)
.then(res => res.json())
.then(data => setMovie(data))
.catch(err => console.error(err));
}, [id]);

if (!movie) return <p>Loading...</p>;
const posterUrl = `https://image.tmdb.org/t/p/w342${movie.poster_path}`;

//backdrop, movie poster and info
return (
<>
<Backdrop
style={{
backgroundImage: `url(https://image.tmdb.org/t/p/w1280${movie.backdrop_path})`
}}
>
<TopNav>
<NavLink to="/"> ⬅ Movies</NavLink>
</TopNav>
<InfoRow>
<Poster>
<img src={posterUrl} alt={movie.title} />
</Poster>
<InfoText>
<TitleRow>
<Title>{movie.title}</Title>
<Rating> ⭐️ {movie.vote_average.toFixed(1)}</Rating>
</TitleRow>
<Info>{movie.overview}</Info>
</InfoText>
</InfoRow >
</Backdrop>
</>
);
}

10 changes: 10 additions & 0 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
}

* {
margin: 0;
padding: 0;
color: white;
}

body {
background-color: black;
}
2 changes: 0 additions & 2 deletions src/main.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React from 'react'
import ReactDOM from 'react-dom/client'

import { App } from './App.jsx'

import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
Expand Down