Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Ajmal and Giorgio project movie #322

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Ajmal and Giorgio project movie #322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1d2e03d
added components
AjmalZ Mar 28, 2023
6988198
added details page and css
AjmalZ Mar 29, 2023
ebb2c1a
hover and button
GiorgioCugusi Mar 29, 2023
0da32e7
added responsiveness
AjmalZ Mar 31, 2023
3658c58
style change
AjmalZ Jul 2, 2023
53459a2
Changed title
AjmalZ Jul 2, 2023
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
3 changes: 2 additions & 1 deletion code/.eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"react-hooks"
],
"rules": {
"linebreak-style": 0,
"react/function-component-definition": [
2,
{
Expand Down Expand Up @@ -128,4 +129,4 @@
"react-hooks/exhaustive-deps": "warn",
"semi": "off"
}
}
}
63 changes: 62 additions & 1 deletion code/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion code/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"react-router-dom": "^6.9.0"
},
"scripts": {
"start": "react-scripts start",
Expand Down
2 changes: 1 addition & 1 deletion code/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Technigo React App</title>
<title>Movie App</title>
</head>

<body>
Expand Down
15 changes: 11 additions & 4 deletions code/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The import statements seem to be correct and well-organized.

import { MovieList } from 'Components/List'
import { Details } from 'Components/Details'
import './index.css';

export const App = () => {
return (
<div>
Find me in src/app.js!
</div>
<Router>
<Routes>
<Route path="/" element={<MovieList />} />
<Route path="/movies/:id" element={<Details />} />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the Routes component, you should add a fallback Route that renders a "Page Not Found" component in case the requested URL does not match any of the defined Routes.

</Routes>
</Router>
);
}
}
129 changes: 129 additions & 0 deletions code/src/Components/Details.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
.movie-overview {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code organization: The code is well-organized and easy to read, with clear separation between different sections and components of the page. This makes it easy to maintain and update the code in the future

color: white;
}

.movie-title {
color: white;
padding-left: 6px;
}

.background {
height: 100vh;
width: 100vw;
position: absolute;
overflow: auto;
}

.details-container {
margin-top: 10vh;
margin-left: 5vw;
}

.details-text {
width: 50%;
background-color: rgb(0 0 0 / 70%);
border-radius: 10px;
}

.all-details {
position: relative;
height: 100vh;
/* Set the height of the container to fill the viewport */
}


.back-btn {
position: absolute;
top: 10px;
/* Adjust the top position as needed */
left: 10px;
/* Adjust the left position as needed */
z-index: 1;
/* Set a higher z-index to ensure the button is on top of the background */
/* Add other styles for the button */
margin-left: 5vw;
}

.details-container img {
border: solid 3px white;
}

button {
background-color: #031244;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
border-radius: 20px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
opacity: 0.8;
}

button:hover {
background-color: #040958;
color: white;
transition: .5 ease;
opacity: 1;
}

button:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
}

button:active {
background-color: #e7e7e7;
color: black;
}

@media screen and (max-width: 800px) {
.details-container {
margin-right: 3vw;
}

.details-container img {
border: solid 3px white;
scale: 95%;
}

.background {
overflow: scroll;
}
}

@media screen and (max-width: 600px) {
.details-container {
margin-right: 3vw;
}

.details-container img {
border: solid 3px white;
scale: 90%;
}

.background {
overflow: scroll;
}
}

@media screen and (max-width: 400px) {
.details-container {
margin-top: 5vh;
margin-left: 5vw;
margin-right: 3vw;
}

.details-container img {
border: solid 3px white;
scale: 80%;
}

.background {
overflow: scroll;
}
}
49 changes: 49 additions & 0 deletions code/src/Components/Details.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/* eslint-disable react/jsx-indent-props */
/* eslint-disable indent */
import React, { useState, useEffect } from 'react';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall, the code looks clean and well-organized. The use of React hooks and functional components is great to see, and it's good to see the code is modularized with separate CSS files.

import { useParams, Link } from 'react-router-dom';
import './Details.css';
import './List.css';

export const Details = () => {
const { id } = useParams();
const [movie, setMovie] = useState();
// The `useEffect` hook is being passed two arguments: a function and an array of
// dependencies. The function in this case is responsible for the fetch request and
// updating the movie state. The array of dependencies contains a single element,
// `id`, meaning that the function will only be triggered when the `id` value
// changes. //
useEffect(() => {
fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=986aaac98bfe3b83f202c023b975310e&language=en-US`)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Details component is using an API key directly in the fetch URL. This is generally not a good practice as it exposes the API key publicly. It's better to keep the key in a .env file and access it through an environment variable.

.then((res) => res.json())
.then((json) => {
setMovie(json);
})
}, [id]);

return (
<div className="all-details">
<Link className="back-btn" to="/">
<button type="button">Back to Movies</button>
</Link>
{movie && (
<div
className="background"
// eslint-disable-next-line object-curly-newline
style={{
backgroundImage: `linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,1) 100%), url(https://image.tmdb.org/t/p/original${movie.backdrop_path})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover'
}}>
<div className="details-container">
<img className="details-poster" src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`} alt={movie.title} />
<div className="details-text">
<h1 className="movie-title">{movie.title} <span className="rating">⭐{Math.round(movie.vote_average * 10) / 10}</span></h1>
<p className="movie-overview">{movie.overview}</p>
</div>
</div>
</div>)}
</div>

)
}
Loading