Move project hand in from Asako and Frida

README.md

@@ -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 

package.json

@@ -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",

src/App.jsx

@@ -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>
+  );
 }
+
+

src/Components/MovieCard.jsx

@@ -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>
+    </>
+  )
+}
+

src/Components/NavLink.jsx

@@ -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;

src/Routes/Home.jsx

@@ -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>
+  );
+}
+
+
+
+

src/Routes/MovieInfo.jsx

@@ -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>
+    </>
+  );
+}
+

src/index.css

@@ -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;
+}

src/main.jsx

@@ -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(