diff --git a/.env b/.env new file mode 100644 index 00000000..f5fdb484 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +VITE_API_KEY=13a32227ebd064212ea8575b58265a25 diff --git a/README.md b/README.md index f768e33f..92f149d5 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,78 @@ -# React + Vite +## Unit Assignment: Flixster -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +Submitted by: Zara Duruji -Currently, two official plugins are available: +Estimated time spent: **#** 40 Hours -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +Deployed Application (optional): [Flixster Deployed Site] https://flixster-starter-yhyt.onrender.com/ + +### Application Features + +#### CORE FEATURES + + +- [❌] **Display Movies** + - [ ❌] Users can view a list of current movies from The Movie Database API. + - [❌ ] For each movie displayed, users can see its title, poster image, and votes. + - [❌ ] Users can load more current movies by clicking a button at the bottom of the list (page should not be reloaded). +- [ ❌] **Search Functionality** + - [ ❌] Users can search for movies and view the results in a grid. + - [ ❌] Users can clear results and view previous current movies displayed. +- [ ❌] **Accessibility Features** + - ❌[ ] Website implements accessibility features (semantic HTML, color contrast, font sizing, alt text for images). +- [❌ ] **Responsive Design** + - [❌ ] Website implements responsive web design. +- [ ❌] **Movie Details** + - [ ❌] Users can view more details about a movie in a popup, such as runtime in minutes, backdrop poster, release date, genres, and/or an overview. +- [ ❌] **Sorting Options** + - [❌ ] Users can click on a filter by drop down to sort product by type (alphabetic, release date, rating). +- [ ❌] **Layout** + - [ ❌] Website displays header, banner, search, movie grid, about, contact, and footer section. + +#### STRETCH FEATURES + +- [❌ ] **Deployment** + - [ ❌] Website is deployed via Render. +- [ ❌] **Embedded Movie Trailers** + - [❌ ] Within the popup displaying a movie's details, users can play the movie trailer. +- [ ❌] **Watched Checkbox** + - [ ❌] For each movie displayed, users can mark the movie as watched. +- [ ❌] **Favorite Button** + - [❌ ] For each movie displayed, users can favorite the movie. +- [ ❌] **Sidebar** + - [ ❌] Users can open a sidebar + - [ ❌] The sidebar displays the user's favorited and watched movies + +### Walkthrough Video +
+ +### Reflection + +* Did the topics discussed in your labs prepare you to complete the assignment? Be specific, which features in your weekly assignment did you feel unprepared to complete? + +The topics discussed in the labs provided a good foundation for completing the assignment, particularly in managing state with hooks, integrating APIs, and structuring the application with reusable components. However, there were areas where I felt less prepared. Designing responsive and visually appealing components like the modal and sidebar was challenging due to limited coverage of advanced CSS and styling techniques. Managing state across multiple components, especially for dynamic updates to the favorites and watched lists, was more complex than expected. Although basic event handling was covered, implementing features like toggling favorites and marking movies as watched required more advanced knowledge. Error handling with API requests and integrating external libraries like FontAwesome for icons were also areas where additional guidance would have been helpful. Overall, while the labs were beneficial, more focus on these advanced topics would have better prepared me for the assignment. + +* If you had more time, what would you have done differently? Would you have added additional features? Changed the way your project responded to a particular event, etc. + +If I had more time, I would have made several improvements and added additional features to enhance the project. Firstly, I would refine the user interface to ensure a more cohesive and visually appealing design, paying particular attention to responsiveness across different devices. This includes optimizing the layout of the modal and sidebar components and ensuring smooth animations for opening and closing these elements. + +Additionally, I would implement more robust error handling for API requests, providing clear feedback to users in case of network issues or data retrieval errors. Enhancing the state management logic to handle complex interactions more efficiently would also be a priority, ensuring a seamless user experience when toggling favorites and marking movies as watched. + +I would consider adding features such as user authentication to personalize the experience and allow users to save their favorite movies and watched lists across sessions. Another feature could be a recommendation system based on the user's viewing history and preferences. + +Finally, I would refine the event-handling mechanisms to make interactions more intuitive and responsive, ensuring that the project responds smoothly to user actions such as sorting, searching, and interacting with movie cards. These enhancements would significantly improve the overall functionality and user experience of the project. + +* Reflect on your project demo, what went well? Were there things that maybe didn't go as planned? Did you notice something that your peer did that you would like to try next time? + +Reflecting on my project demo, I was particularly pleased with the implementation of the modal, which provided a detailed and engaging way to display movie information and trailers. The modal design and functionality turned out to be intuitive and visually appealing, enhancing the overall user experience. + +However, I did encounter challenges while implementing the sidebar. Ensuring it updated correctly with favorite and watched movies, as well as making it responsive and user-friendly, proved to be more complex than anticipated. This was an area where things didn't go entirely as planned, and it highlighted the need for better state management and event handling in my project. + +During the demo, I noticed a peer who had seamlessly integrated a more advanced sorting and filtering system, which greatly enhanced the usability of their project. This is something I would like to try in my next project, as it would provide users with a more dynamic and interactive experience. Their approach to sorting and filtering was efficient and user-friendly, and incorporating a similar feature would be a valuable addition to my own projects in the future. + +### Open-source libraries used + +- [Add any links to open-source libraries used in your project.] + +### Shout out +Instructor Sammy diff --git a/package-lock.json b/package-lock.json index 92a683d2..e8a5bca8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,10 @@ "name": "flixster", "version": "0.0.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-regular-svg-icons": "^6.5.2", + "@fortawesome/free-solid-svg-icons": "^6.5.2", + "@fortawesome/react-fontawesome": "^0.2.2", "react": "^18.2.0", "react-dom": "^18.2.0" }, @@ -811,6 +815,63 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz", + "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz", + "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.2.tgz", + "integrity": "sha512-iabw/f5f8Uy2nTRtJ13XZTS1O5+t+anvlamJ3zJGLEVE2pKsAWhPv2lq01uQlfgCX7VaveT3EVs515cCN9jRbw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz", + "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz", + "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -3193,7 +3254,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3457,7 +3517,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -3519,8 +3578,7 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-refresh": { "version": "0.14.0", diff --git a/package.json b/package.json index eded5715..304d67da 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,10 @@ "preview": "vite preview" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-regular-svg-icons": "^6.5.2", + "@fortawesome/free-solid-svg-icons": "^6.5.2", + "@fortawesome/react-fontawesome": "^0.2.2", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/public/purplebackground.jpg b/public/purplebackground.jpg new file mode 100644 index 00000000..71a44c73 Binary files /dev/null and b/public/purplebackground.jpg differ diff --git a/src/App.css b/src/App.css index 0bf65669..484d85fd 100644 --- a/src/App.css +++ b/src/App.css @@ -1,28 +1,128 @@ .App { - text-align: center; + display: flex; + flex-direction: column; + min-height: 100vh; + background-image: url(/public/purplebackground.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + color: rgb(255, 255, 255); } -.App-header { - background-color: #282c34; +main { + flex: 1; + padding: 20px; + margin: 20px; + background-color: rgba(255, 255, 255, 0.2); /* Slightly lighten the main content for readability */ + border-radius: 8px; display: flex; - flex-direction: row; - align-items: center; - justify-content: space-evenly; + flex-direction: column; + min-height: 100vh; + background-image: url(/public/purplebackground.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + color: rgb(255, 255, 255); +} + +button { + padding: 10px 20px; + font-size: 16px; + background-color: #7d3b8a; /* Darker purple */ color: white; - padding: 20px; + border: none; + border-radius: 4px; + cursor: pointer; + margin: 20px auto; + display: block; +} + +button:hover { + background-color: #9c4bb5; /* Lighter purple */ +} + +/* src/App.css */ + +.toggle-button { + background-color: #4b2e83; /* Purple background */ + color: white; + border: none; + padding: 10px 20px; + font-size: 16px; + border-radius: 5px; + cursor: pointer; + margin-bottom: 20px; /* Adjust as needed */ +} + +.toggle-button:hover { + background-color: #7856b7; /* Darker purple on hover */ +} +@media (max-width: 1024px) { + main { + padding: 15px; + margin: 15px; + } + + .toggle-button { + font-size: 14px; + padding: 8px 16px; + } + + button { + font-size: 14px; + padding: 8px 16px; + } +} + +@media (max-width: 768px) { + .header { + flex-direction: column; + align-items: center; + } + + .header-right { + margin-top: 10px; + } + + main { + padding: 10px; + margin: 10px; + } + + .toggle-button { + font-size: 12px; + padding: 6px 12px; + } + + button { + font-size: 12px; + padding: 6px 12px; + } + + .movie-card { + width: 90%; + margin: 10px auto; + } } @media (max-width: 600px) { .movie-card { width: 100%; + margin: 5px auto; } - .search-bar { - flex-direction: column; - gap: 10px; + main { + padding: 5px; + margin: 5px; } - .search-bar form { - flex-direction: column; + .toggle-button { + font-size: 10px; + padding: 5px 10px; + } + + button { + font-size: 10px; + padding: 5px 10px; } } diff --git a/src/App.jsx b/src/App.jsx index 48215b3f..ac468d23 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,95 @@ -import { useState } from 'react' -import './App.css' +import { useState, useEffect } from 'react'; +import './App.css'; +import Header from './Header'; +import NowPlaying from './NowPlaying'; +import Searching from './Searching'; +import Sidebar from './Sidebar'; +import Footer from './Footer'; const App = () => { -
- -
-} + const [isSearching, setIsSearching] = useState(false); + const [sortCriteria, setSortCriteria] = useState(''); + const [favorites, setFavorites] = useState([]); + const [watched, setWatched] = useState([]); + const [isSidebarOpen, setIsSidebarOpen] = useState(false); + const [movies, setMovies] = useState([]); + const [pageNumber, setPageNumber] = useState(1); -export default App + const toggleScreen = () => { + setIsSearching(prevState => !prevState); + }; + + const handleSortChange = (criteria) => { + console.log(criteria); + setMovies([]) + setSortCriteria(criteria); + }; + + const toggleSidebar = () => { + setIsSidebarOpen(prevState => !prevState); + }; + + const handleSetFavorites = (newVal) => { + setFavorites(newVal) + } + + const handleSetWatched = (newVal) => { + setWatched(newVal) + } + + const loadNewPages = () => { + setPageNumber(prevPageNumber => prevPageNumber + 1); + }; + + useEffect(() => { + const options = { + method: 'GET', + headers: { + accept: 'application/json', + Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJkYWU5YTZiOThlMTBjZDkyZTcxN2Y4OWIzZDYxYjdjNSIsInN1YiI6IjY2NjY1MTQ1Y2M3MDc0ZDliNjFjMWM2ZiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.IDf1-04fWbMoc-zzed3BAcZLflL14UG-mdjcZobVjxA' + } + }; + + fetch(`https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=${pageNumber}&sort_by=${sortCriteria}`, options) + .then(response => response.json()) + .then(response => setMovies(movies.concat(response.results))) + .catch(err => console.error(err)); + }, [pageNumber, sortCriteria]); + + + return ( +
+
+ + {isSidebarOpen && } +
+ + {isSearching ? ( + + ) : ( + + )} +
+
+ ); +}; + +export default App; diff --git a/src/Footer.css b/src/Footer.css new file mode 100644 index 00000000..972b412a --- /dev/null +++ b/src/Footer.css @@ -0,0 +1,10 @@ +/* Footer.css */ +.footer { + background-color: #4b2e83; /* Purple background */ + color: white; + text-align: center; + padding: 10px 0; + position: fixed; + width: 100%; + bottom: 0; + } diff --git a/src/Footer.jsx b/src/Footer.jsx new file mode 100644 index 00000000..d43ab8c9 --- /dev/null +++ b/src/Footer.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import './Footer.css'; + +function Footer() { + return ( + + ); +} + +export default Footer; diff --git a/src/Header.css b/src/Header.css new file mode 100644 index 00000000..2ea10244 --- /dev/null +++ b/src/Header.css @@ -0,0 +1,54 @@ +/* src/components/Header.css */ + +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + background-color: rgba(102, 51, 153, 0.8); /* Purple with transparency */ + color: white; + border-radius: 8px; + margin: 20px; + } + + .header h1 { + margin: 0; + margin-left: 20px; + } + + .controls-container { + display: flex; + align-items: center; + } + + .search-container { + display: flex; + align-items: center; + margin-right: 20px; + } + + .search-input { + padding: 8px; + font-size: 16px; + border: none; + border-radius: 4px; + margin-right: 8px; + outline: none; + background-color: #eee; + color: #333; + } + + .search-button { + padding: 8px 16px; + font-size: 16px; + background-color: #7d3b8a; /* Darker purple */ + color: white; + border-radius: 4px; + cursor: pointer; + margin-right: 10px; + border-color: #9c4bb5; + } + + .search-button:hover { + background-color: #9c4bb5; /* Lighter purple */ + } diff --git a/src/Header.jsx b/src/Header.jsx new file mode 100644 index 00000000..65499a11 --- /dev/null +++ b/src/Header.jsx @@ -0,0 +1,25 @@ +import './Header.css'; +import SortBy from './SortBy'; + +function Header({ setIsSearching, sortMovies }) { + + + + return ( +
+

Flixster

+
+ +
+
+ ); +} + +export default Header; diff --git a/src/Modal.css b/src/Modal.css new file mode 100644 index 00000000..86aca4aa --- /dev/null +++ b/src/Modal.css @@ -0,0 +1,101 @@ +/* src/Modal.css */ + +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.8); /* Slightly darker overlay */ + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; + } + + .modal { + background-color: #663399; /* Purple with no transparency */ + border-radius: 8px; + padding: 20px; + max-width: 900px; + width: 90%; + height: 80%; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + text-align: center; + color: white; + position: relative; + display: flex; + flex-direction: column; + overflow: hidden; + } + + .modal-close { + position: absolute; + top: 10px; + right: 10px; + background: none; + border: none; + font-size: 24px; + color: white; + cursor: pointer; + } + + .modal-header { + display: flex; + flex-direction: row; + align-items: center; + } + + .modal-image { + width: 200px; + height: auto; + border-radius: 8px; + margin-right: 20px; + } + + .modal-info { + flex: 1; + text-align: left; + } + + .modal-title { + font-size: 1.5em; + margin: 10px 0; + } + + .modal-rating { + color: #ffcc00; /* Bright yellow for rating */ + margin-bottom: 10px; + font-weight: bold; + } + + .modal-overview { + color: #f0f0f0; + margin-top: 10px; + } + + .modal-content { + margin-top: 20px; + flex: 1; + background-color: #4b2e83; /* Darker purple for contrast */ + border-radius: 8px; + padding: 20px; + overflow-y: auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .movie-trailer { + width: 100%; + height: 315px; + background-color: #333; /* Placeholder background color */ + display: flex; + justify-content: center; + align-items: center; + color: white; + margin-top: 20px; + border-radius: 8px; + overflow: hidden; + } diff --git a/src/Modal.jsx b/src/Modal.jsx new file mode 100644 index 00000000..d1b83096 --- /dev/null +++ b/src/Modal.jsx @@ -0,0 +1,144 @@ +// import { useEffect, useState } from 'react'; +// import './Modal.css'; + +// function Modal({ movie, onClose }) { +// const [movieInfo, setMovieInfo] = useState(undefined); +// const [trailerURL, setTrailerURL] = useState(""); +// const apiKey = import.meta.env.VITE_API_KEY; + + +// // useEffect(() => { +// // const options = { +// // method: 'GET', +// // headers: { +// // accept: 'application/json', +// // Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIxM2EzMjIyN2ViZDA2NDIxMmVhODU3NWI1ODI2NWEyNSIsInN1YiI6IjY2Njc2NGZkN2U0MTRkODIzM2I5Yzg1ZiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.NUYxsfy9MWnIfFGPrQ-wwi-OZ7nHi0Z8t1M0Dj62tl0' +// // } +// // }; + +// // fetch(`https://api.themoviedb.org/3/movie/${movie.id}/videos?api_key=${apiKey}`, options) +// // .then(response => response.json()) +// // .then(response => console.log(response.results.find( +// // (video) => video.site === "YouTube" && video.type === "Trailer" +// // ))) +// // .then((trailer) => setTrailerURL(`https://www.youtube.com/embed/${trailer.key}`)) +// // .catch(err => console.error(err)); +// // }, [movie.id, apiKey]); + +// useEffect(() => { +// const options = { +// method: 'GET', +// headers: { +// accept: 'application/json', +// Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJkYWU5YTZiOThlMTBjZDkyZTcxN2Y4OWIzZDYxYjdjNSIsInN1YiI6IjY2NjY1MTQ1Y2M3MDc0ZDliNjFjMWM2ZiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.IDf1-04fWbMoc-zzed3BAcZLflL14UG-mdjcZobVjxA' +// } +// }; + +// fetch(`https://api.themoviedb.org/3/movie/${movie}?language=en-US`, options) +// .then(response => response.json()) +// .then(response => setMovieInfo(response)) + +// .catch(err => console.error(err)); +// }, [movie]); + +// const handleOverlayClick = (event) => { +// if (event.target === event.currentTarget) { +// onClose(); +// } +// }; + +// return ( +//
+//
+// +// {movieInfo && ( +// <> +// {movieInfo.title} +//

{movieInfo.title}

+//

Rating: {movieInfo.vote_average}

+// + +//

{movieInfo.overview}

+// + +// +// )} +//
+//
+// ); +// } + +// export default Modal; + +import { useEffect, useState } from 'react'; +import './Modal.css'; + +function Modal({ movie, onClose }) { + const [movieInfo, setMovieInfo] = useState(undefined); + const [trailerURL, setTrailerURL] = useState(""); + const apiKey = import.meta.env.VITE_API_KEY; + + + useEffect(() => { + const options = { + method: 'GET', + headers: { + accept: 'application/json', + Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJkYWU5YTZiOThlMTBjZDkyZTcxN2Y4OWIzZDYxYjdjNSIsInN1YiI6IjY2NjY1MTQ1Y2M3MDc0ZDliNjFjMWM2ZiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.IDf1-04fWbMoc-zzed3BAcZLflL14UG-mdjcZobVjxA' + } + }; + + fetch(`https://api.themoviedb.org/3/movie/${movie}?language=en-US`, options) + .then(response => response.json()) + .then(response => { + setMovieInfo(response); + console.log("response",response); + + return response.id; + }) + .then(movieID => { + fetch(`https://api.themoviedb.org/3/movie/${movieID}/videos?api_key=${apiKey}`) + .then(response => response.json()) + .then(response => { + const trailer = response.results.find( + (video) => video.site === "YouTube" && video.type === "Trailer" + ); + console.log("trailer",trailer); + if (trailer) { + setTrailerURL(`https://www.youtube.com/embed/${trailer.key}`); + } + }) + .catch(err => console.error(err)); + }) + .catch(err => console.error(err)); + }, [movie, apiKey]); + + const handleOverlayClick = (event) => { + if (event.target === event.currentTarget) { + onClose(); + } + }; + + return ( +
+
+ + {movieInfo && ( + <> + {movieInfo.title} +

{movieInfo.title}

+

Rating: {movieInfo.vote_average}

+ {trailerURL ? ( + + ) : ( +

No trailer available

+ )} +

{movieInfo.overview}

+ + )} +
+
+ ); +} + +export default Modal; diff --git a/src/MovieCard.css b/src/MovieCard.css new file mode 100644 index 00000000..9251be7e --- /dev/null +++ b/src/MovieCard.css @@ -0,0 +1,67 @@ +.movie-card { + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 8px; + padding: 16px; + text-align: center; + background-color: rgba(102, 51, 153, 0.8); /* Purple with transparency */ + color: white; + margin: 10px; + transition: transform 0.3s, box-shadow 0.3s; + position: relative; + cursor: pointer; +} + +.movie-card:hover { + transform: scale(1.05); + box-shadow: 0 8px 16px rgb(0, 0, 0); /* Darker shadow */ +} + +.moviePoster { + width: 100%; + height: auto; + border-radius: 4px; +} + +.movie-title { + font-size: 1.2em; + margin: 10px 0; +} + +.movie-rating { + color: #ccc; + margin-bottom: 10px; /* Add space below the rating */ +} + +.favorite-button { + position: absolute; + top: 10px; + right: 10px; + background: none; + border: none; + font-size: 1.5em; + cursor: pointer; + color: rgb(255, 1, 1); + transition: color 0.3s; +} + +.favorite-button .fa-solid { + color: #ff0000; /* Red color for favorite */ +} + +.favorite-button .fa-regular { + color: rgb(255, 32, 32); /* Default color */ +} + +.watched-button { + position: relative; + background: none; + border: none; + font-size: 1em; + cursor: pointer; + color: rgba(255, 255, 255, 0.5); + transition: color 0.3s; +} + +.watched-button.watched { + color: #00ff00; /* Green color for watched */ +} diff --git a/src/MovieCard.jsx b/src/MovieCard.jsx new file mode 100644 index 00000000..fa52123b --- /dev/null +++ b/src/MovieCard.jsx @@ -0,0 +1,28 @@ +import React, { useState } from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faHeart as regularHeart } from "@fortawesome/free-regular-svg-icons"; +import { faHeart as solidHeart } from "@fortawesome/free-solid-svg-icons"; +import "./MovieCard.css"; + +function MovieCard(props) { + + function handleModal() { + props.getMovieInfo(props.movieId); + } + + return ( +
+ {props.title} +

{props.title}

+

Rating: {props.rating}

+ + +
+ ); +} + +export default MovieCard; diff --git a/src/MovieList.css b/src/MovieList.css new file mode 100644 index 00000000..a579505c --- /dev/null +++ b/src/MovieList.css @@ -0,0 +1,6 @@ +.movie-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 16px; + padding: 20px; + } diff --git a/src/MovieList.jsx b/src/MovieList.jsx new file mode 100644 index 00000000..777547e2 --- /dev/null +++ b/src/MovieList.jsx @@ -0,0 +1,48 @@ +import { useEffect, useState } from "react"; +import React from "react"; +import MovieCard from "./MovieCard"; +import "./MovieList.css"; + +function MovieList(props) { + + const toggleFavorite = (e, isAdd, movie) => { + e.stopPropagation(); + if (isAdd) { + props.setFavorites([...props.favorites, movie]); + } else { + props.setFavorites(props.favorites.filter(fav => fav.id !== movie.id)); + } + }; + + const toggleWatched = (e, isAdd, movie) => { + e.stopPropagation(); + if (isAdd) { + props.setWatched([...props.watched, movie]); + } else { + props.setWatched(props.watched.filter(watch => watch.id !== movie.id)); + } + }; + + return ( +
+ {props.data.map(card => + + )} +
+ ) +} + +export default MovieList; diff --git a/src/NowPlaying.css b/src/NowPlaying.css new file mode 100644 index 00000000..feb0ece3 --- /dev/null +++ b/src/NowPlaying.css @@ -0,0 +1,49 @@ +.now-playing { + display: flex; + flex-direction: column; + min-height: 100vh; + background-image: url(/public/purplebackground.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + color: rgb(255, 255, 255); + } + + main { + flex: 1; + padding: 20px; + margin: 20px; + background-color: rgba(255, 255, 255, 0.2); /* Slightly lighten the main content for readability */ + border-radius: 8px; + display: flex; + flex-direction: column; + min-height: 100vh; + background-image: url(/public/purplebackground.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + color: rgb(255, 255, 255); + } + + button { + padding: 10px 20px; + font-size: 16px; + background-color: #7d3b8a; /* Darker purple */ + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + margin: 20px auto; + display: block; + } + + button:hover { + background-color: #9c4bb5; /* Lighter purple */ + } + + @media (max-width: 600px) { + .movie-card { + width: 100%; + } + + } diff --git a/src/NowPlaying.jsx b/src/NowPlaying.jsx new file mode 100644 index 00000000..3403ab18 --- /dev/null +++ b/src/NowPlaying.jsx @@ -0,0 +1,67 @@ +import { useState, useEffect } from 'react'; +import './NowPlaying.css'; +import MovieList from './MovieList'; +import Modal from './Modal'; + +const NowPlaying = ({ sortCriteria, favorites, setFavorites, watched, setWatched, movies, loadNewPages }) => { + + const [isModalOpen, setIsModalOpen] = useState(false); + const [selectedMovie, setSelectedMovie] = useState(null); + + console.log(sortCriteria); +// if sortCriteria === '' or "nowplaying" then sort by popularity.desc + + + + +// useEffect(() => { +// handleSortMovies(sortCriteria); +// }, [sortCriteria]); + + + + const getMovieInfo = (movie) => { + setIsModalOpen(true); + setSelectedMovie(movie); + }; + + const handleCloseModal = () => { + setIsModalOpen(false); + setSelectedMovie(null); + }; + +// const handleSortMovies = (criteria, movieList = movies) => { +// const copyMovies = [...movieList]; +// copyMovies.sort((a, b) => { +// if (criteria === 'title') { +// return a.title.localeCompare(b.title); +// } else if (criteria === 'release_date') { +// return new Date(a.release_date) - new Date(b.release_date); +// } else if (criteria === 'vote_average') { +// return b.vote_average - a.vote_average; +// } +// return 0; +// }); + +// setMovies(copyMovies); +// }; + + return ( +
+
+ {isModalOpen && } + + +
+
+ ); +}; + +export default NowPlaying; diff --git a/src/SearchBar.jsx b/src/SearchBar.jsx new file mode 100644 index 00000000..e3b3e328 --- /dev/null +++ b/src/SearchBar.jsx @@ -0,0 +1,10 @@ +import './Searching.css'; +function SearchBar({setSearchQuery}){ + return( +
+ {setSearchQuery(e.target.value)}}/> +
+ ) +} + +export default SearchBar; diff --git a/src/Searching.css b/src/Searching.css new file mode 100644 index 00000000..5171159f --- /dev/null +++ b/src/Searching.css @@ -0,0 +1,29 @@ +/* Searching.css */ + +.search-container { + display: flex; + justify-content: center; + margin-top: 20px; + } + + .search-input { + width: 50%; + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + border: 2px solid #4b2e83; + border-radius: 4px; + background-color: #f8f8f8; + font-size: 16px; + color: #4b2e83; + } + + .search-input::placeholder { + color: #4b2e83; + } + + .search-input:focus { + outline: none; + border-color: #6f42c1; + background-color: #fff; + } diff --git a/src/Searching.jsx b/src/Searching.jsx new file mode 100644 index 00000000..bc5356ff --- /dev/null +++ b/src/Searching.jsx @@ -0,0 +1,101 @@ +import { useState, useEffect} from 'react' +import './NowPlaying.css' +import Header from '/src/Header' +import MovieList from '/src/MovieList' +import SearchBar from './SearchBar' + + +const Searching = ({favorites, setFavorites, watched, setWatched}) => { + const[movies, setMovies] =useState([]); + const [pageNumber, setPageNumber]=useState(1); + const [searchQuery, setSearchQuery] = useState(''); + + useEffect(()=>{ + const options = { + method: 'GET', + headers: { + accept: 'application/json', + Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIxM2EzMjIyN2ViZDA2NDIxMmVhODU3NWI1ODI2NWEyNSIsInN1YiI6IjY2Njc2NGZkN2U0MTRkODIzM2I5Yzg1ZiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.NUYxsfy9MWnIfFGPrQ-wwi-OZ7nHi0Z8t1M0Dj62tl0' + } + }; + + fetch(`https://api.themoviedb.org/3/search/movie?query=${searchQuery}&include_adult=false&language=en-US&page=1`, options) + .then(response => response.json()) + .then(response => setMovies(response.results)) + // .then(response => setMovies(prevMovies =>prevMovies.concat(response.results))) + .catch(err => console.error(err)); +}, [searchQuery]); + + + // fetch(`https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=${pageNumber}`, options) + // .then(response => response.json()) + // .then(response => setMovies(prevMovies =>prevMovies.concat(response.results))) + // .catch(err => console.error(err)); + // }, [pageNumber]); + + function loadNewPages(){ + setPageNumber(prevPageNumber => prevPageNumber+1) + } + + + return ( +
+ +
+ + + {/* */} +
+ + +
+ ) + +} + + +export default Searching; + + + + + + + + + + + + + + + + + + + + + + + + + + + +// const options = { +// method: 'GET', +// headers: { +// accept: 'application/json', +// Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIxM2EzMjIyN2ViZDA2NDIxMmVhODU3NWI1ODI2NWEyNSIsInN1YiI6IjY2Njc2NGZkN2U0MTRkODIzM2I5Yzg1ZiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.NUYxsfy9MWnIfFGPrQ-wwi-OZ7nHi0Z8t1M0Dj62tl0' +// } +// }; + +// fetch(`https://api.themoviedb.org/3/search/movie?query=${searching}&include_adult=false&language=en-US&page=1`, options) +// .then(response => response.json()) +// .then(response => console.log(response)) +// .catch(err => console.error(err)); diff --git a/src/Sidebar.css b/src/Sidebar.css new file mode 100644 index 00000000..efab5002 --- /dev/null +++ b/src/Sidebar.css @@ -0,0 +1,46 @@ +/* src/Sidebar.css */ + +.sidebar { + position: fixed; + top: 0; + left: 0; + width: 250px; + height: 100%; + background-color: rgba(75, 46, 131, 0.9); + color: white; + padding: 20px; + overflow-y: auto; + z-index: 1; +} + +.sidebar h2 { + font-size: 1.5em; + margin-bottom: 10px; +} + +.sidebar ul { + list-style: none; + padding: 0; +} + +.sidebar ul li { + margin-bottom: 10px; +} + +.sidebar-toggle { + position: absolute; + top: 20px; + left: 20px; + font-size: 1.5em; + background: none; + border: none; + color: white; + cursor: pointer; + margin-top: 6px; +} + +.closeSidebarButton { + +margin: 0; +float: right; +} diff --git a/src/Sidebar.jsx b/src/Sidebar.jsx new file mode 100644 index 00000000..68162d53 --- /dev/null +++ b/src/Sidebar.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import './Sidebar.css'; + +const Sidebar = ({ favorites, watched, closeSideBar }) => { + return ( +
+ +

Favorites

+ {favorites.length === 0 ? ( +

No favorite movies.

+ ) : ( + + )} +

Watched

+ {watched.length === 0 ? ( +

No watched movies.

+ ) : ( + + )} +
+ ); +}; + +export default Sidebar; diff --git a/src/SortBy.css b/src/SortBy.css new file mode 100644 index 00000000..b04c48f4 --- /dev/null +++ b/src/SortBy.css @@ -0,0 +1,14 @@ +.sort-by { + padding: 8px; + font-size: 16px; + border: none; + border-radius: 4px; + outline: none; + background-color: #7d3b8a; /* Darker purple */ + color: white; + cursor: pointer; + } + + .sort-by:hover { + background-color: #9c4bb5; /* Lighter purple */ + } diff --git a/src/SortBy.jsx b/src/SortBy.jsx new file mode 100644 index 00000000..88bbbd86 --- /dev/null +++ b/src/SortBy.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import './SortBy.css'; + +function SortBy({ setSortOption }) { + const handleSortChange = (e) => { + setSortOption(e.target.value); + }; + + return ( + + ); +} + +export default SortBy;