Skip to content

Commit b1e312f

Browse files
juggernaut09juggernaut09
committed
Intitial commit
1 parent 82cd870 commit b1e312f

20 files changed

+1327
-92
lines changed

‎package-lock.json

+930
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+11-6
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,22 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@emotion/react": "^11.11.4",
7+
"@emotion/styled": "^11.11.5",
8+
"@fortawesome/free-solid-svg-icons": "^6.5.2",
9+
"@fortawesome/react-fontawesome": "^0.2.0",
10+
"@mui/material": "^5.15.17",
611
"@testing-library/jest-dom": "^5.17.0",
712
"@testing-library/react": "^13.4.0",
813
"@testing-library/user-event": "^13.5.0",
14+
"axios": "^1.6.8",
15+
"bootstrap": "^5.3.3",
916
"react": "^18.3.1",
17+
"react-bootstrap": "^2.10.2",
1018
"react-dom": "^18.3.1",
19+
"react-material-ui-carousel": "^3.4.2",
20+
"react-player": "^2.16.0",
21+
"react-router-dom": "^6.23.1",
1122
"react-scripts": "5.0.1",
1223
"web-vitals": "^2.1.4"
1324
},
@@ -17,12 +28,6 @@
1728
"test": "react-scripts test",
1829
"eject": "react-scripts eject"
1930
},
20-
"eslintConfig": {
21-
"extends": [
22-
"react-app",
23-
"react-app/jest"
24-
]
25-
},
2631
"browserslist": {
2732
"production": [
2833
">0.2%",

‎src/App.css

+12-29
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,21 @@
1-
.App {
2-
text-align: center;
3-
}
1+
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
2+
43

5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
4+
* {
5+
box-sizing:border-box;
6+
font-family: 'Quicksand', Arial, Arial, Helvetica, sans-serif;
87
}
98

10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
9+
body{
10+
padding:0;
11+
margin:0;
1412
}
1513

16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
14+
.App{
1915
display: flex;
2016
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
17+
min-height: 100vh;
18+
background-color: black;
2419
color: white;
25-
}
26-
27-
.App-link {
28-
color: #61dafb;
29-
}
30-
31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
20+
margin-top: 10px;
3821
}

‎src/App.js

+58-15
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,66 @@
1-
import logo from './logo.svg';
21
import './App.css';
2+
import axios from 'axios';
3+
import {useState, useEffect} from 'react';
4+
import { Layout } from './components/Layout';
5+
import { Route, Routes } from 'react-router-dom';
6+
import { Home } from './components/home/Home';
7+
import { Header } from './components/header/Header';
8+
import { Trailer } from './components/trailer/Trailer';
9+
import Reviews from './components/reviews/Reviews';
10+
import NotFound from './components/notFound/NotFound';
311

412
function App() {
13+
14+
const [movies, setMovies] = useState();
15+
const [movie, setMovie] = useState();
16+
const [reviews, setReviews] = useState();
17+
const [reviewTexts, setReviewTexts] = useState();
18+
19+
const getMovies = async () => {
20+
21+
try {
22+
23+
const response = await axios.get("http://localhost:8080/api/v1/movies");
24+
console.log(response.data);
25+
setMovies(response.data);
26+
27+
} catch (err) {
28+
console.log(err);
29+
}
30+
31+
}
32+
33+
const getMovieData = async(movieId) => {
34+
try {
35+
const response = await axios.get(`http://localhost:8080/api/v1/movies/${movieId}`);
36+
const singleMovie = response.data;
37+
setMovie(singleMovie);
38+
console.log("singleMovie.reviews", singleMovie.reviewIds);
39+
setReviews(singleMovie.reviewIds);
40+
41+
const response2 = await axios.get(`http://localhost:8080/api/v1/reviews/details/${movieId}`);
42+
setReviewTexts(response2.data);
43+
44+
} catch (error) {
45+
console.log(error);
46+
}
47+
}
48+
49+
useEffect(() => {
50+
getMovies();
51+
}, [])
52+
553
return (
654
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
55+
<Header/>
56+
<Routes>
57+
<Route path="/" element = {<Layout/>}>
58+
<Route path="/" element = {<Home movies = {movies}/>}/></Route>
59+
<Route path="/Trailer/:ytTrailerId" element = {<Trailer/>}></Route>
60+
<Route path="/Reviews/:movieId" element= {<Reviews getMovieData={getMovieData} movie = {movie} reviews={reviews} reviewTexts={reviewTexts} setReviews={setReviews}/>}></Route>
61+
<Route path="*" element = {<NotFound/>}></Route>
62+
<Route/>
63+
</Routes>
2164
</div>
2265
);
2366
}

‎src/App.test.js

-8
This file was deleted.

‎src/components/Layout.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Outlet } from "react-router-dom";
2+
3+
import React from 'react'
4+
5+
export const Layout = () => {
6+
return (
7+
<main>
8+
<Outlet/>
9+
</main>
10+
)
11+
}
12+

‎src/components/header/Header.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
2+
import { faVideoSlash } from "@fortawesome/free-solid-svg-icons";
3+
import { Button, Container, Nav, Navbar} from "react-bootstrap";
4+
import { NavLink } from "react-router-dom";
5+
6+
export const Header = () => {
7+
return (
8+
<Navbar bg="dark" variant="dark" expand="lg">
9+
<Container fluid>
10+
<Navbar.Brand href="/" style={{"color": "gold"}}>
11+
<FontAwesomeIcon icon={faVideoSlash}/> Gold
12+
</Navbar.Brand>
13+
<Navbar.Toggle aria-controls="navbarScroll"/>
14+
<Navbar.Collapse id="navbarScroll">
15+
<Nav
16+
className="me-auto my-2 my-lg-0"
17+
style={{maxHeight: '100px'}}
18+
navbarScroll
19+
>
20+
<NavLink className="nav-link" to="/">Home</NavLink>
21+
<NavLink className="nav-link" to="/watchList">Watch List</NavLink>
22+
</Nav>
23+
<Button variant="outline-info" className="me-2">Login</Button>
24+
<Button variant="outline-info">Register</Button>
25+
</Navbar.Collapse>
26+
</Container>
27+
</Navbar>
28+
)
29+
}

‎src/components/hero/Hero.css

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.movie-carousel-container{
2+
width: 100w;
3+
background-color: black;
4+
}
5+
6+
.movie-poster{
7+
height: 300px;
8+
border: 1px solid gold;
9+
border-radius: 10px;
10+
overflow: hidden;
11+
}
12+
13+
.movie-poster > img {
14+
height: 100%;
15+
width: 100%;
16+
}
17+
18+
.movie-card-container {
19+
height: 550px;
20+
background-color: black;
21+
}
22+
23+
.movie-card {
24+
background-repeat: no-repeat;
25+
width: 100%;
26+
height: 100%;
27+
background-size: cover;
28+
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)), var(--img);
29+
}
30+
31+
.movie-detail {
32+
position: absolute;
33+
top: 200px;
34+
display: flex;
35+
justify-content: space-evenly;
36+
width: 100%;
37+
}
38+
39+
.movie-title {
40+
color: white;
41+
display: flex;
42+
align-items: center;
43+
}
44+
45+
.movie-buttons-container {
46+
display: flex;
47+
justify-content: space-between;
48+
align-items: center;
49+
width: 300px;
50+
}
51+
52+
.play-button-icon-container {
53+
padding: 0px;
54+
margin: 0px;
55+
width: 150px;
56+
}
57+
58+
.play-button-icon {
59+
padding: 0px;
60+
margin: 0px;
61+
color: gold;
62+
font-size : 3rem;
63+
transition: 0.3s;
64+
cursor: pointer;
65+
}
66+
67+
.play-button-icon:hover {
68+
font-size: 4rem;
69+
color: white;
70+
}
71+
72+
@media only screen and (max-width: 800px) {
73+
.movie-detail {
74+
flex-direction: column;
75+
align-items: center;
76+
top: 20px;
77+
}
78+
}

‎src/components/hero/Hero.js

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react'
2+
import './Hero.css';
3+
import Carousel from 'react-material-ui-carousel';
4+
import { Paper } from '@mui/material';
5+
import { faCirclePlay } from '@fortawesome/free-solid-svg-icons';
6+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
7+
import { Link, useNavigate } from 'react-router-dom';
8+
import { Button } from 'react-bootstrap';
9+
10+
11+
12+
export const Hero = ({movies}) => {
13+
14+
const navigate = useNavigate();
15+
16+
const reviews = (movieId) => {
17+
navigate(`/Reviews/${movieId}`);
18+
}
19+
return (
20+
<div className='movie-carousel-container'>
21+
<Carousel>
22+
{
23+
movies?.map((movie) => {
24+
return (
25+
<Paper>
26+
<div className='movie-card-container'>
27+
<div className='movie-card' style={{"--img" : `url(${movie.backdrops[0]})`}}>
28+
<div className='movie-detail'>
29+
<div className='movie-poster'>
30+
<img src = {movie.poster} alt = ""></img>
31+
</div>
32+
<div className='movie-title'>
33+
<h4>{movie.title}</h4>
34+
</div>
35+
<div className='movie-buttons-container'>
36+
<Link to = {`/Trailer/${movie.trailerLink.substring(movie.trailerLink.length - 11)}`}>
37+
<div className='play-button-icon-container'>
38+
<FontAwesomeIcon className='play-button-icon' icon={faCirclePlay}/>
39+
</div>
40+
</Link>
41+
42+
<div className= "movie-review-button-container">
43+
<Button variant = "info" onClick = {() => reviews(movie.imdbId)}>
44+
Reviews
45+
</Button>
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
</Paper>
52+
)
53+
})
54+
}
55+
</Carousel>
56+
</div>
57+
)
58+
}

‎src/components/home/Home.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import { Hero } from '../hero/Hero';
3+
4+
export const Home = ({movies}) => {
5+
return (
6+
<Hero movies = {movies}/>
7+
)
8+
}

‎src/components/notFound/NotFound.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react'
2+
3+
const NotFound = () => {
4+
return (
5+
<div>This Page Could Not Be Found!!!</div>
6+
)
7+
}
8+
9+
export default NotFound

‎src/components/reviewForm/ReviewForm.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
import {Form, Button} from 'react-bootstrap';
3+
4+
const ReviewForm = ({handleSubmit, revText, labelText, defaultValue}) => {
5+
return (
6+
<Form>
7+
<Form.Group className='mb-3' controlId='exampleForm.ControlTextarea1'>
8+
<Form.Label>{labelText}</Form.Label>
9+
<Form.Control ref={revText} as = "textarea" rows={3} defaultValue={defaultValue}/>
10+
</Form.Group>
11+
<Button variant="outline-info" onClick={handleSubmit}>Submit</Button>
12+
</Form>
13+
)
14+
}
15+
16+
export default ReviewForm

0 commit comments

Comments
 (0)