From 0ee98c9764c231a8c52f8718c6f073c1428f63c7 Mon Sep 17 00:00:00 2001 From: Jackson Kenneth Seifferly Date: Mon, 9 Jun 2025 17:32:08 -0700 Subject: [PATCH 01/41] Created Initial Wire Frame for website, Got basic styling for Header, Movie List, and Footer done. Movie Cards should be responsive to window size and are being updated dynamically by data file --- .env | 1 + src/App.jsx | 8 +++++- src/Body.css | 4 +++ src/Body.jsx | 14 +++++++++++ src/Footer.css | 4 +++ src/Footer.jsx | 13 ++++++++++ src/Header.css | 4 +++ src/Header.jsx | 15 +++++++++++ src/MovieCard.css | 21 ++++++++++++++++ src/MovieCard.jsx | 15 +++++++++++ src/MovieList.css | 6 +++++ src/MovieList.jsx | 19 ++++++++++++++ src/SearchForm.css | 7 ++++++ src/SearchForm.jsx | 17 +++++++++++++ src/Sort.jsx | 11 ++++++++ src/index.css | 62 ++++++++++++++++++++++++++++++++++++---------- 16 files changed, 207 insertions(+), 14 deletions(-) create mode 100644 .env create mode 100644 src/Body.css create mode 100644 src/Body.jsx create mode 100644 src/Footer.css create mode 100644 src/Footer.jsx create mode 100644 src/Header.css create mode 100644 src/Header.jsx create mode 100644 src/MovieCard.css create mode 100644 src/MovieCard.jsx create mode 100644 src/MovieList.css create mode 100644 src/MovieList.jsx create mode 100644 src/SearchForm.css create mode 100644 src/SearchForm.jsx create mode 100644 src/Sort.jsx diff --git a/.env b/.env new file mode 100644 index 00000000..65cece75 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +VITE_API_KEY=0fba8e118db9db4505bf2e421906b0b0 \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index dfa91584..e2894123 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,16 @@ import { useState } from 'react' +import Header from './Header' +import Body from './Body' +import Footer from './Footer' +import data from './data/data' import './App.css' const App = () => { return (
- +
+ +
) } diff --git a/src/Body.css b/src/Body.css new file mode 100644 index 00000000..04f974a8 --- /dev/null +++ b/src/Body.css @@ -0,0 +1,4 @@ +.Body { + background-color: #1C1C1C; + color: azure; +} \ No newline at end of file diff --git a/src/Body.jsx b/src/Body.jsx new file mode 100644 index 00000000..808a2234 --- /dev/null +++ b/src/Body.jsx @@ -0,0 +1,14 @@ +import MovieList from "./MovieList"; +import './Body.css' + +function Body({data}) { + + return ( +
+ +
+ ); + +} + +export default Body \ No newline at end of file diff --git a/src/Footer.css b/src/Footer.css new file mode 100644 index 00000000..b9ad75cc --- /dev/null +++ b/src/Footer.css @@ -0,0 +1,4 @@ +.Footer { + background-color: #5AE26A; + color: #1C1C1C; +} \ No newline at end of file diff --git a/src/Footer.jsx b/src/Footer.jsx new file mode 100644 index 00000000..f85891cd --- /dev/null +++ b/src/Footer.jsx @@ -0,0 +1,13 @@ +import './Footer.css' + +function Footer() { + + return ( +
+

@https://github.com/jseifferly/flixster

+
+ ); + +} + +export default Footer \ No newline at end of file diff --git a/src/Header.css b/src/Header.css new file mode 100644 index 00000000..d8e3fce0 --- /dev/null +++ b/src/Header.css @@ -0,0 +1,4 @@ +.Header { + background-color: #5AE26A; + color: #1C1C1C; +} \ No newline at end of file diff --git a/src/Header.jsx b/src/Header.jsx new file mode 100644 index 00000000..00c227cd --- /dev/null +++ b/src/Header.jsx @@ -0,0 +1,15 @@ +import SearchForm from "./SearchForm"; +import './Header.css' + +function Header() { + + return ( +
+

Flixster

+ +
+ ); + +} + +export default Header diff --git a/src/MovieCard.css b/src/MovieCard.css new file mode 100644 index 00000000..389c0651 --- /dev/null +++ b/src/MovieCard.css @@ -0,0 +1,21 @@ +.MovieCard { + margin: 1em; + flex-grow: 1; + max-width: 13vw; + + box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; + border-radius: 20px; + + text-align: center; + text-wrap: wrap; +} + +img { + object-fit: cover; + border-radius: 20px; +} + +.MovieCard:hover { + cursor: pointer; + border: 1px gray solid; +} \ No newline at end of file diff --git a/src/MovieCard.jsx b/src/MovieCard.jsx new file mode 100644 index 00000000..ff5d8b5f --- /dev/null +++ b/src/MovieCard.jsx @@ -0,0 +1,15 @@ +import './MovieCard.css' + +function MovieCard({title, image, rating}) { + + return ( +
+ +

{title}

+

Rating: {rating}

+
+ ); + +} + +export default MovieCard \ No newline at end of file diff --git a/src/MovieList.css b/src/MovieList.css new file mode 100644 index 00000000..960b4f0f --- /dev/null +++ b/src/MovieList.css @@ -0,0 +1,6 @@ +.MovieList { + display: flex; + flex-wrap: wrap; + + padding: 5vw; +} \ No newline at end of file diff --git a/src/MovieList.jsx b/src/MovieList.jsx new file mode 100644 index 00000000..28ca3cb6 --- /dev/null +++ b/src/MovieList.jsx @@ -0,0 +1,19 @@ +import MovieCard from "./MovieCard"; +import './MovieList.css' + +const baseURL = 'https://image.tmdb.org/t/p' +const posterSize = '/w500' + +function MovieList({data}) { + + return ( +
+ {data.map((movie) => { + return + })}; +
+ ); + +} + +export default MovieList \ No newline at end of file diff --git a/src/SearchForm.css b/src/SearchForm.css new file mode 100644 index 00000000..531b9475 --- /dev/null +++ b/src/SearchForm.css @@ -0,0 +1,7 @@ +.SearchForm { + display: flex; + justify-content: center; + margin: 0 auto; + padding: 1vw; + text-align: center; +} \ No newline at end of file diff --git a/src/SearchForm.jsx b/src/SearchForm.jsx new file mode 100644 index 00000000..e8c61b4c --- /dev/null +++ b/src/SearchForm.jsx @@ -0,0 +1,17 @@ +import Sort from "./Sort"; +import './SearchForm.css' + +function SearchForm() { + + return ( +
+ + + + +
+ ); + +} + +export default SearchForm \ No newline at end of file diff --git a/src/Sort.jsx b/src/Sort.jsx new file mode 100644 index 00000000..acae2440 --- /dev/null +++ b/src/Sort.jsx @@ -0,0 +1,11 @@ +function Sort() { + + return ( +
+ Sort by +
+ ); + +} + +export default Sort \ No newline at end of file diff --git a/src/index.css b/src/index.css index e1faed1a..e4d5f26b 100644 --- a/src/index.css +++ b/src/index.css @@ -1,19 +1,55 @@ -body { +/* 1. Use a more-intuitive box-sizing model */ +*, *::before, *::after { + box-sizing: border-box; +} + +/* 2. Remove default margin */ +* { margin: 0; - font-family: Arial, sans-serif; - background-color: #f4f4f4; } -button { - background-color: #282c34; - color: white; - cursor: pointer; - font-size: 16px; - font-weight: bold; - transition: background-color 0.3s ease; +/* 3. Enable keyword animations */ +@media (prefers-reduced-motion: no-preference) { + html { + interpolate-size: allow-keywords; + } +} + +body { + /* 4. Add accessible line-height */ + line-height: 1.5; + /* 5. Improve text rendering */ + -webkit-font-smoothing: antialiased; +} + +/* 6. Improve media defaults */ +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} + +/* 7. Inherit fonts for form controls */ +input, button, textarea, select { + font: inherit; } -button:hover { - background-color: #777; - color: white; +/* 8. Avoid text overflows */ +p, h1, h2, h3, h4, h5, h6 { + font-family: Verdana, Geneva, Tahoma, sans-serif; + overflow-wrap: break-word; } + +/* 9. Improve line wrapping */ +p { + text-wrap: pretty; +} +h1, h2, h3, h4, h5, h6 { + text-wrap: balance; +} + +/* + 10. Create a root stacking context +*/ +#root, #__next { + isolation: isolate; +} \ No newline at end of file From acb6deffccdb3eac312c5ca55008092f6d2b917b Mon Sep 17 00:00:00 2001 From: jseifferly <156245907+jseifferly@users.noreply.github.com> Date: Mon, 9 Jun 2025 17:34:15 -0700 Subject: [PATCH 02/41] Delete .env --- .env | 1 - 1 file changed, 1 deletion(-) delete mode 100644 .env diff --git a/.env b/.env deleted file mode 100644 index 65cece75..00000000 --- a/.env +++ /dev/null @@ -1 +0,0 @@ -VITE_API_KEY=0fba8e118db9db4505bf2e421906b0b0 \ No newline at end of file From cf8c9984a81b2ca5928e139c118bd40481b4ed68 Mon Sep 17 00:00:00 2001 From: Jackson Kenneth Seifferly Date: Mon, 9 Jun 2025 17:35:03 -0700 Subject: [PATCH 03/41] Fixed gitignore to ommit API key from commit --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index a547bf36..d7307976 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,4 @@ dist-ssr *.njsproj *.sln *.sw? +*.env From 861ce7463a99fc8d51b39a7de3b07b13b9665d25 Mon Sep 17 00:00:00 2001 From: Jackson Kenneth Seifferly Date: Mon, 9 Jun 2025 17:36:12 -0700 Subject: [PATCH 04/41] Should ignore API Key file now --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index d7307976..7ceb59f8 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,4 @@ dist-ssr *.njsproj *.sln *.sw? -*.env +.env From 0bfdf018ffe3590f7bca2cec7bc35d479205b628 Mon Sep 17 00:00:00 2001 From: Jackson Kenneth Seifferly Date: Mon, 9 Jun 2025 17:54:37 -0700 Subject: [PATCH 05/41] Styled Search Bar and Sory Button --- src/SearchForm.css | 4 ++++ src/SearchForm.jsx | 2 +- src/Sort.css | 13 +++++++++++++ src/Sort.jsx | 4 +++- 4 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 src/Sort.css diff --git a/src/SearchForm.css b/src/SearchForm.css index 531b9475..657f9cbe 100644 --- a/src/SearchForm.css +++ b/src/SearchForm.css @@ -4,4 +4,8 @@ margin: 0 auto; padding: 1vw; text-align: center; +} + +.SearchBar { + width: 30vw; } \ No newline at end of file diff --git a/src/SearchForm.jsx b/src/SearchForm.jsx index e8c61b4c..550e80cc 100644 --- a/src/SearchForm.jsx +++ b/src/SearchForm.jsx @@ -5,7 +5,7 @@ function SearchForm() { return (
- + diff --git a/src/Sort.css b/src/Sort.css new file mode 100644 index 00000000..e9ee3e00 --- /dev/null +++ b/src/Sort.css @@ -0,0 +1,13 @@ +.Sort { + border-radius: 20px; + background-color: gray; + color: aliceblue; + + margin: 1vw; + padding: 0.5vw; +} + +.Sort:hover { + cursor: pointer; + background-color: rgb(144, 144, 144); +} \ No newline at end of file diff --git a/src/Sort.jsx b/src/Sort.jsx index acae2440..11811b0e 100644 --- a/src/Sort.jsx +++ b/src/Sort.jsx @@ -1,8 +1,10 @@ +import './Sort.css' + function Sort() { return (
- Sort by + Sort by
); From 40a1d5044c6322f2ca299c3991e641836595da06 Mon Sep 17 00:00:00 2001 From: Jackson Kenneth Seifferly Date: Tue, 10 Jun 2025 07:57:44 -0700 Subject: [PATCH 06/41] Made movie tiles larger and more responsive --- src/MovieCard.css | 4 +++- src/MovieList.css | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/MovieCard.css b/src/MovieCard.css index 389c0651..62e4149e 100644 --- a/src/MovieCard.css +++ b/src/MovieCard.css @@ -1,7 +1,9 @@ .MovieCard { margin: 1em; flex-grow: 1; - max-width: 13vw; + max-width: 15vw; + min-width: 15vw; + box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; border-radius: 20px; diff --git a/src/MovieList.css b/src/MovieList.css index 960b4f0f..e78443c3 100644 --- a/src/MovieList.css +++ b/src/MovieList.css @@ -1,6 +1,7 @@ .MovieList { display: flex; flex-wrap: wrap; + justify-content: space-around; padding: 5vw; } \ No newline at end of file From 3f3ba8ee3224925ed3eaeb941e20231b69c3345f Mon Sep 17 00:00:00 2001 From: Jackson Kenneth Seifferly Date: Tue, 10 Jun 2025 08:23:10 -0700 Subject: [PATCH 07/41] Created sort button that is more semantic --- src/SearchForm.css | 4 ++++ src/SearchForm.jsx | 2 +- src/Sort.css | 3 +++ src/Sort.jsx | 11 +++++++++-- 4 files changed, 17 insertions(+), 3 deletions(-) create mode 100644 src/Sort.css diff --git a/src/SearchForm.css b/src/SearchForm.css index 531b9475..657f9cbe 100644 --- a/src/SearchForm.css +++ b/src/SearchForm.css @@ -4,4 +4,8 @@ margin: 0 auto; padding: 1vw; text-align: center; +} + +.SearchBar { + width: 30vw; } \ No newline at end of file diff --git a/src/SearchForm.jsx b/src/SearchForm.jsx index e8c61b4c..550e80cc 100644 --- a/src/SearchForm.jsx +++ b/src/SearchForm.jsx @@ -5,7 +5,7 @@ function SearchForm() { return (
- + diff --git a/src/Sort.css b/src/Sort.css new file mode 100644 index 00000000..77d8a6aa --- /dev/null +++ b/src/Sort.css @@ -0,0 +1,3 @@ +.SortBtn { + margin-left: auto; +} \ No newline at end of file diff --git a/src/Sort.jsx b/src/Sort.jsx index acae2440..a2471350 100644 --- a/src/Sort.jsx +++ b/src/Sort.jsx @@ -1,8 +1,15 @@ +import './Sort.css' + function Sort() { return ( -
- Sort by +
+
); From a920a479a606074da85329a562365d95f3df7a0b Mon Sep 17 00:00:00 2001 From: Jackson Kenneth Seifferly Date: Tue, 10 Jun 2025 12:40:31 -0700 Subject: [PATCH 08/41] Got API working so data is dynamically added using API --- .env | 2 +- README.md | 129 ++++++++++++++++++++++++++-- src/Body.jsx | 2 +- src/Header.jsx | 2 +- src/MovieList.jsx | 19 ---- src/{ => components}/MovieCard.jsx | 2 +- src/components/MovieList.jsx | 45 ++++++++++ src/{ => components}/SearchForm.jsx | 2 +- src/{ => components}/Sort.jsx | 4 +- src/{ => styles}/MovieCard.css | 8 +- src/{ => styles}/MovieList.css | 0 src/{ => styles}/SearchForm.css | 0 src/{ => styles}/Sort.css | 0 13 files changed, 180 insertions(+), 35 deletions(-) delete mode 100644 src/MovieList.jsx rename src/{ => components}/MovieCard.jsx (89%) create mode 100644 src/components/MovieList.jsx rename src/{ => components}/SearchForm.jsx (91%) rename src/{ => components}/Sort.jsx (78%) rename src/{ => styles}/MovieCard.css (71%) rename src/{ => styles}/MovieList.css (100%) rename src/{ => styles}/SearchForm.css (100%) rename src/{ => styles}/Sort.css (100%) diff --git a/.env b/.env index 65cece75..c9b8f4b9 100644 --- a/.env +++ b/.env @@ -1 +1 @@ -VITE_API_KEY=0fba8e118db9db4505bf2e421906b0b0 \ No newline at end of file +VITE_API_KEY=eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIwZmJhOGUxMThkYjlkYjQ1MDViZjJlNDIxOTA2YjBiMCIsIm5iZiI6MTc0OTUwOTQ1OC41NDU5OTk4LCJzdWIiOiI2ODQ3NjU1MmU5ODg5ZGMzMzMyMDY4OTYiLCJzY29wZXMiOlsiYXBpX3JlYWQiXSwidmVyc2lvbiI6MX0.hC15ggnHAhw1hfT_FHTOmwbKnG9c7qFyvMJeSw7LbHs'}}; diff --git a/README.md b/README.md index f768e33f..e995b69a 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,127 @@ -# 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: **Jackson Seifferly** -Currently, two official plugins are available: +Estimated time spent: **2** hours spent in total -- [@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 (**required**): [Flixster Deployed Site](ADD_LINK_HERE) + +### Application Features + +#### REQUIRED FEATURES + +- [ ] **Display Movies** + - [ ] Users can view a list of current movies from The Movie Database API in a grid view. + - [x] Movie tiles should be reasonably sized (at least 6 playlists on your laptop when full screen; large enough that the playlist components detailed in the next feature are legible). + - [x] For each movie displayed, users can see the movie's: + - [x] Title + - [x] Poster image + - [x] Vote average + - [ ] Users can load more current movies by clicking a button which adds more movies to the grid without reloading the entire page. +- [ ] **Search Functionality** + - [ ] Users can use a search bar to search for movies by title. + - [ ] The search bar should include: + - [ ] Text input field + - [ ] Submit/Search button + - [ ] Clear button + - [ ] Movies with a title containing the search query in the text input field are displayed in a grid view when the user either: + - [ ] Presses the Enter key + - [ ] Clicks the Submit/Search button + - [ ] Users can click the Clear button. When clicked: + - [ ] Most recent search results are cleared from the text input field and the grid view and all current movies are displayed in a grid view +- [ ] **Design Features** + - [ ] Website implements all of the following accessibility features: + - [ ] Semantic HTML + - [x] [Color contrast](https://webaim.org/resources/contrastchecker/) + - [ ] Alt text for images + - [x] Website implements responsive web design. + - [x] Uses CSS Flexbox or CSS Grid + - [x] Movie tiles and images shrink/grow in response to window size + - [ ] Users can click on a movie tile to view more details about a movie in a pop-up modal. + - [ ] The pop-up window is centered in the screen and does not occupy the entire screen. + - [ ] The pop-up window has a shadow to show that it is a pop-up and appears floating on the screen. + - [ ] The backdrop of the pop-up appears darker or in a different shade than before. including: + - [ ] The pop-up displays additional details about the moving including: + - [ ] Runtime in minutes + - [ ] Backdrop poster + - [ ] Release date + - [ ] Genres + - [ ] An overview + - [ ] Users can use a drop-down menu to sort movies. + - [ ] Drop-down allows movies to be sorted by: + - [ ] Title (alphabetic, A-Z) + - [ ] Release date (chronologically, most recent to oldest) + - [ ] Vote average (descending, highest to lowest) + - [ ] When a sort option is clicked, movies display in a grid according to selected criterion. + - [ ] Website displays: + - [x] Header section + - [ ] Banner section + - [x] Search bar + - [x] Movie grid + - [x] Footer section + - [ ] **VIDEO WALKTHROUGH SPECIAL INSTRUCTIONS**: To ease the grading process, please use the [color contrast checker](https://webaim.org/resources/contrastchecker/) to demonstrate to the grading team that text and background colors on your website have appropriate contrast. The Contrast Ratio should be above 4.5:1 and should have a green box surrounding it. + - [ ] **Deployment** + - [ ] Website is deployed via Render. + - [ ] **VIDEO WALKTHROUGH SPECIAL INSTRUCTIONS**: For ease of grading, please use the deployed version of your website when creating your walkthrough. + +#### STRETCH FEATURES + + +- [ ] **Embedded Movie Trailers** + - [ ] Within the pop-up modal displaying a movie's details, the movie trailer is viewable. + - [ ] When the trailer is clicked, users can play the movie trailer. +- [ ] **Favorite Button** + - [ ] For each movie displayed, users can favorite the movie. + - [ ] There should be visual element (such as a heart icon) on each movie's tile to show whether or not the movie has been favorited. + - [ ] If the movie is not favorited: + - [ ] Clicking on the visual element should mark the movie as favorited + - [ ] There should be visual feedback (such as the heart turning a different color) to show that the movie has been favorited by the user. + - [ ] If the movie is already favorited: + - [ ] Clicking on the visual element should mark the movie as *not* favorited. + - [ ] There should be visual feedback (such as the heart turning a different color) to show that the movie has been unfavorited. +- [ ] **Watched Checkbox** + - [ ] For each movie displayed, users can mark the movie as watched. + - [ ] There should be visual element (such as an eye icon) on each movie's tile to show whether or not the movie has been watched. + - [ ] If the movie has not been watched: + - [ ] Clicking on the visual element should mark the movie as watched + - [ ] There should be visual feedback (such as the eye turning a different color) to show that the movie has been watched by the user. + - [ ] If the movie is already watched: + - [ ] Clicking on the visual element should mark the movie as *not* watched. + - [ ] There should be visual feedback (such as the eye turning a different color) to show that the movie has not been watched. +- [ ] **Sidebar** + - [ ] The website includes a side navigation bar. + - [ ] The sidebar has three pages: + - [ ] Home + - [ ] Favorites + - [ ] Watched + - [ ] The Home page displays all current movies in a grid view, the search bar, and the sort movies drop-down. + - [ ] The Favorites page displays all favorited movies in a grid view. + - [ ] The Watched page displays all watched movies in a grid view. + +### Walkthrough Video + +`TODO://` Add the embedded URL code to your animated app walkthrough below, `ADD_EMBEDDED_CODE_HERE`. Make sure the video or gif actually renders and animates when viewing this README. Ensure your walkthrough showcases the presence and/or functionality of all features you implemented above (check them off as you film!). Pay attention to any **VIDEO WALKTHROUGH SPECIAL INSTRUCTIONS** checkboxes listed above to ensure graders see the full functionality of your website! (🚫 Remove this paragraph after adding walkthrough video) + +`ADD_EMBEDDED_CODE_HERE` + +### 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? + +Add your response here + +* 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. + +Add your response here + +* 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? + +Add your response here + +### Open-source libraries used + +- Add any links to open-source libraries used in your project. + +### Shout out + +Give a shout out to somebody from your cohort that especially helped you during your project. This can be a fellow peer, instructor, TA, mentor, etc. \ No newline at end of file diff --git a/src/Body.jsx b/src/Body.jsx index 808a2234..fb967662 100644 --- a/src/Body.jsx +++ b/src/Body.jsx @@ -1,4 +1,4 @@ -import MovieList from "./MovieList"; +import MovieList from "./components/MovieList"; import './Body.css' function Body({data}) { diff --git a/src/Header.jsx b/src/Header.jsx index 00c227cd..0735c9cc 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -1,4 +1,4 @@ -import SearchForm from "./SearchForm"; +import SearchForm from "./components/SearchForm"; import './Header.css' function Header() { diff --git a/src/MovieList.jsx b/src/MovieList.jsx deleted file mode 100644 index 28ca3cb6..00000000 --- a/src/MovieList.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import MovieCard from "./MovieCard"; -import './MovieList.css' - -const baseURL = 'https://image.tmdb.org/t/p' -const posterSize = '/w500' - -function MovieList({data}) { - - return ( -
- {data.map((movie) => { - return - })}; -
- ); - -} - -export default MovieList \ No newline at end of file diff --git a/src/MovieCard.jsx b/src/components/MovieCard.jsx similarity index 89% rename from src/MovieCard.jsx rename to src/components/MovieCard.jsx index ff5d8b5f..d734f113 100644 --- a/src/MovieCard.jsx +++ b/src/components/MovieCard.jsx @@ -1,4 +1,4 @@ -import './MovieCard.css' +import '../styles/MovieCard.css' function MovieCard({title, image, rating}) { diff --git a/src/components/MovieList.jsx b/src/components/MovieList.jsx new file mode 100644 index 00000000..4620bf8a --- /dev/null +++ b/src/components/MovieList.jsx @@ -0,0 +1,45 @@ +import { useState, useEffect } from "react"; +import MovieCard from "./MovieCard"; +import '../styles/MovieList.css' + +//API Info for fetch +const URL = 'https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&sort_by=popularity.desc&with_release_type=2|3&release_date.gte={min_date}&release_date.lte={max_date}' +const API_KEY = import.meta.env.VITE_API_KEY +const options = {method: 'GET', headers: {accept: 'application/json', + Authorization: 'Bearer ' + API_KEY} +} + +//Path info for movie posters +const baseURL = 'https://image.tmdb.org/t/p' +const posterSize = '/w500' + +export default function MovieList({data}) { + + const [movieData, setMovieData] = useState([]) + + useEffect(() => { + const fetchMovieData = async () => { + try{ + const res = await fetch(URL, options) + if(res.ok){ + const data = await res.json(); + setMovieData(data.results) + }else{ + throw new Error("API Not Responding") + } + }catch(error){ + console.error("Error: ", error.message) + } + } + fetchMovieData(); + },[]) + + return ( +
+ {movieData.map((movie) => { + return + })}; +
+ ); + +} \ No newline at end of file diff --git a/src/SearchForm.jsx b/src/components/SearchForm.jsx similarity index 91% rename from src/SearchForm.jsx rename to src/components/SearchForm.jsx index 550e80cc..e80ba129 100644 --- a/src/SearchForm.jsx +++ b/src/components/SearchForm.jsx @@ -1,5 +1,5 @@ import Sort from "./Sort"; -import './SearchForm.css' +import '../styles/SearchForm.css' function SearchForm() { diff --git a/src/Sort.jsx b/src/components/Sort.jsx similarity index 78% rename from src/Sort.jsx rename to src/components/Sort.jsx index a2471350..e61460b8 100644 --- a/src/Sort.jsx +++ b/src/components/Sort.jsx @@ -1,11 +1,11 @@ -import './Sort.css' +import '../styles/Sort.css' function Sort() { return (
- + - - + +
); diff --git a/src/styles/SearchForm.css b/src/styles/SearchForm.css index 657f9cbe..c80278b6 100644 --- a/src/styles/SearchForm.css +++ b/src/styles/SearchForm.css @@ -8,4 +8,19 @@ .SearchBar { width: 30vw; +} + +.searchBtn { + margin: 0 1vw; + + background-color: rgb(88, 130, 244); + color: white; + border: none; + border-radius: 10px; +} + +.searchBtn:hover { + cursor: pointer; + background-color: rgb(60, 108, 239); + } \ No newline at end of file From 80f79289c08b9c91d0802f2c87b8010e2f971844 Mon Sep 17 00:00:00 2001 From: Jackson Kenneth Seifferly Date: Wed, 11 Jun 2025 11:12:35 -0700 Subject: [PATCH 18/41] Search functionality implemented with new API request --- README.md | 22 +++++++++---------- src/App.jsx | 40 +++++++++++++++++++++++++++++++---- src/Header.jsx | 4 ++-- src/components/SearchForm.jsx | 15 +++++++++---- src/components/Sort.jsx | 2 +- src/styles/Modal.css | 1 + src/utils/utils.js | 0 7 files changed, 62 insertions(+), 22 deletions(-) create mode 100644 src/utils/utils.js diff --git a/README.md b/README.md index 609baf86..f31b3db7 100644 --- a/README.md +++ b/README.md @@ -18,17 +18,17 @@ Deployed Application (**required**): [Flixster Deployed Site](ADD_LINK_HERE) - [x] Poster image - [x] Vote average - [ ] Users can load more current movies by clicking a button which adds more movies to the grid without reloading the entire page. -- [ ] **Search Functionality** - - [ ] Users can use a search bar to search for movies by title. - - [ ] The search bar should include: - - [ ] Text input field - - [ ] Submit/Search button - - [ ] Clear button - - [ ] Movies with a title containing the search query in the text input field are displayed in a grid view when the user either: - - [ ] Presses the Enter key - - [ ] Clicks the Submit/Search button - - [ ] Users can click the Clear button. When clicked: - - [ ] Most recent search results are cleared from the text input field and the grid view and all current movies are displayed in a grid view +- [x] **Search Functionality** + - [x] Users can use a search bar to search for movies by title. + - [x] The search bar should include: + - [x] Text input field + - [x] Submit/Search button + - [x] Clear button + - [x] Movies with a title containing the search query in the text input field are displayed in a grid view when the user either: + - [x] Presses the Enter key + - [x] Clicks the Submit/Search button + - [x] Users can click the Clear button. When clicked: + - [x] Most recent search results are cleared from the text input field and the grid view and all current movies are displayed in a grid view - [ ] **Design Features** - [ ] Website implements all of the following accessibility features: - [ ] Semantic HTML diff --git a/src/App.jsx b/src/App.jsx index e30719a5..7f6d6d9c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -10,16 +10,24 @@ const options = {method: 'GET', headers: {accept: 'application/json', Authorization: `Bearer ${API_KEY}`}} const App = () => { + //States to store the current movie data const [movieData, setMovieData] = useState([]) const [pageNum, setPageNum] = useState(1) + //States to store search information + const [searchPage, setSearchPage] = useState(1) + const [searchString, setSearchString] = useState('') + //URL for featching data from API - const URL = `https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=${pageNum}` + const nowPlayingURL = `https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=${pageNum}` + const searchURL = `https://api.themoviedb.org/3/search/movie?query=${searchString}&page=${searchPage}` + const [url, setUrl] = useState(nowPlayingURL) + useEffect(() => { const fetchMovieData = async () => { try{ - var res = await fetch(URL, options) + var res = await fetch(url, options) if(res.ok){ const data = await res.json(); setMovieData([...movieData, ...data.results]); @@ -31,14 +39,38 @@ const App = () => { } } fetchMovieData(); + },[url]) + + useEffect(() => { + setUrl(nowPlayingURL) },[pageNum]) - const load = () => setPageNum(pageNum + 1) + const load = () => { + setPageNum(pageNum + 1) + } + + //**-----------------Search Function-----------------**// + const clearSearch = () => { + setMovieData([]) + setSearchString('') + setSearchPage(1) + setPageNum(1) + setUrl(nowPlayingURL) + } + + const search = () => { + setMovieData([]) + setUrl(searchURL) + } + + const updateSearchTerm = evt => { + setSearchString(evt.target.value) + } return (
-
+
diff --git a/src/Header.jsx b/src/Header.jsx index 0735c9cc..bb85d081 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -1,12 +1,12 @@ import SearchForm from "./components/SearchForm"; import './Header.css' -function Header() { +function Header({search,clear,searchTermFunction,searchString}) { return (

Flixster

- +
); diff --git a/src/components/SearchForm.jsx b/src/components/SearchForm.jsx index 930f298a..7cf032a3 100644 --- a/src/components/SearchForm.jsx +++ b/src/components/SearchForm.jsx @@ -1,13 +1,20 @@ import Sort from "./Sort"; import '../styles/SearchForm.css' -function SearchForm() { +function SearchForm({searchFunction, clearFunction, searchTerm, searchTermFunc}) { + + const handleEnter = evt => { + if(evt.key === 'Enter'){ + searchFunction(); + } + } + return (
- - - + + +
); diff --git a/src/components/Sort.jsx b/src/components/Sort.jsx index cc7a5908..fdd9c21c 100644 --- a/src/components/Sort.jsx +++ b/src/components/Sort.jsx @@ -1,6 +1,6 @@ import '../styles/Sort.css' -function Sort() { +function Sort({}) { return (
diff --git a/src/styles/Modal.css b/src/styles/Modal.css index 60c5cbd5..4c53d318 100644 --- a/src/styles/Modal.css +++ b/src/styles/Modal.css @@ -34,6 +34,7 @@ border-radius: 30px; box-shadow: 10px 10px 5px rgb(79, 79, 79); + overflow-y: auto; } .modalContent h2 { diff --git a/src/utils/utils.js b/src/utils/utils.js new file mode 100644 index 00000000..e69de29b From 9fb2d7f96eeeba9c2bc98770dc323a5f6677e85a Mon Sep 17 00:00:00 2001 From: Jackson Kenneth Seifferly Date: Wed, 11 Jun 2025 11:51:27 -0700 Subject: [PATCH 19/41] Sort Feature working --- README.md | 22 +++++++++++----------- src/App.jsx | 30 ++++++++++++++++++++++++++++-- src/Header.jsx | 4 ++-- src/components/SearchForm.jsx | 4 ++-- src/components/Sort.jsx | 10 +++++----- src/utils/utils.js | 15 +++++++++++++++ 6 files changed, 63 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index f31b3db7..626fca95 100644 --- a/README.md +++ b/README.md @@ -10,14 +10,14 @@ Deployed Application (**required**): [Flixster Deployed Site](ADD_LINK_HERE) #### REQUIRED FEATURES -- [ ] **Display Movies** +- [x] **Display Movies** - [x] Users can view a list of current movies from The Movie Database API in a grid view. - [x] Movie tiles should be reasonably sized (at least 6 playlists on your laptop when full screen; large enough that the playlist components detailed in the next feature are legible). - [x] For each movie displayed, users can see the movie's: - [x] Title - [x] Poster image - [x] Vote average - - [ ] Users can load more current movies by clicking a button which adds more movies to the grid without reloading the entire page. + - [x] Users can load more current movies by clicking a button which adds more movies to the grid without reloading the entire page. - [x] **Search Functionality** - [x] Users can use a search bar to search for movies by title. - [x] The search bar should include: @@ -47,19 +47,19 @@ Deployed Application (**required**): [Flixster Deployed Site](ADD_LINK_HERE) - [x] Release date - [x] Genres - [x] An overview - - [ ] Users can use a drop-down menu to sort movies. - - [ ] Drop-down allows movies to be sorted by: - - [ ] Title (alphabetic, A-Z) - - [ ] Release date (chronologically, most recent to oldest) - - [ ] Vote average (descending, highest to lowest) - - [ ] When a sort option is clicked, movies display in a grid according to selected criterion. - - [ ] Website displays: + - [x] Users can use a drop-down menu to sort movies. + - [x] Drop-down allows movies to be sorted by: + - [x] Title (alphabetic, A-Z) + - [x] Release date (chronologically, most recent to oldest) + - [x] Vote average (descending, highest to lowest) + - [x] When a sort option is clicked, movies display in a grid according to selected criterion. + - [x] Website displays: - [x] Header section - - [ ] Banner section + - [x] Banner section - [x] Search bar - [x] Movie grid - [x] Footer section - - [ ] **VIDEO WALKTHROUGH SPECIAL INSTRUCTIONS**: To ease the grading process, please use the [color contrast checker](https://webaim.org/resources/contrastchecker/) to demonstrate to the grading team that text and background colors on your website have appropriate contrast. The Contrast Ratio should be above 4.5:1 and should have a green box surrounding it. + - [x] **VIDEO WALKTHROUGH SPECIAL INSTRUCTIONS**: To ease the grading process, please use the [color contrast checker](https://webaim.org/resources/contrastchecker/) to demonstrate to the grading team that text and background colors on your website have appropriate contrast. The Contrast Ratio should be above 4.5:1 and should have a green box surrounding it. - [ ] **Deployment** - [ ] Website is deployed via Render. - [ ] **VIDEO WALKTHROUGH SPECIAL INSTRUCTIONS**: For ease of grading, please use the deployed version of your website when creating your walkthrough. diff --git a/src/App.jsx b/src/App.jsx index 7f6d6d9c..555b41a0 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,7 +2,9 @@ import { useState, useEffect } from 'react' import Header from './Header' import Body from './Body' import Footer from './Footer' +import sort from './utils/utils' import './App.css' +import { use } from 'react' //API Info for fetch const API_KEY = import.meta.env.VITE_API_KEY @@ -21,9 +23,12 @@ const App = () => { //URL for featching data from API const nowPlayingURL = `https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=${pageNum}` const searchURL = `https://api.themoviedb.org/3/search/movie?query=${searchString}&page=${searchPage}` - const [url, setUrl] = useState(nowPlayingURL) + //States for sort + const [sortType, setSortType] = useState('none') + + //Rerender movie data whenever url for api call changed and append to movie data useEffect(() => { const fetchMovieData = async () => { try{ @@ -41,10 +46,12 @@ const App = () => { fetchMovieData(); },[url]) + //Update the url for loading more movies useEffect(() => { setUrl(nowPlayingURL) },[pageNum]) + //Update page number to update the url const load = () => { setPageNum(pageNum + 1) } @@ -66,11 +73,30 @@ const App = () => { const updateSearchTerm = evt => { setSearchString(evt.target.value) } + //**--------------------------------------------------**// + + + //**------------------Sort Function-------------------**// + + useEffect(() => { + + console.log('do sort') + console.log(sortType) + const sortedMovies = sort(movieData,sortType) + setMovieData(sortedMovies) + + },[sortType]) + + + const updateSortType = evt => { + setSortType(evt.target.value) + } + //**--------------------------------------------------**// return (
-
+
diff --git a/src/Header.jsx b/src/Header.jsx index bb85d081..7815635f 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -1,12 +1,12 @@ import SearchForm from "./components/SearchForm"; import './Header.css' -function Header({search,clear,searchTermFunction,searchString}) { +function Header({search,clear,searchTermFunction,searchString, sortFunc}) { return (

Flixster

- +
); diff --git a/src/components/SearchForm.jsx b/src/components/SearchForm.jsx index 7cf032a3..88d65aa2 100644 --- a/src/components/SearchForm.jsx +++ b/src/components/SearchForm.jsx @@ -1,7 +1,7 @@ import Sort from "./Sort"; import '../styles/SearchForm.css' -function SearchForm({searchFunction, clearFunction, searchTerm, searchTermFunc}) { +function SearchForm({searchFunction, clearFunction, searchTerm, searchTermFunc, sortFunc}) { const handleEnter = evt => { if(evt.key === 'Enter'){ @@ -15,7 +15,7 @@ function SearchForm({searchFunction, clearFunction, searchTerm, searchTermFunc}) - +
); diff --git a/src/components/Sort.jsx b/src/components/Sort.jsx index fdd9c21c..18b286f7 100644 --- a/src/components/Sort.jsx +++ b/src/components/Sort.jsx @@ -1,14 +1,14 @@ import '../styles/Sort.css' -function Sort({}) { +function Sort({sort}) { return (
- - - - + + +
); diff --git a/src/utils/utils.js b/src/utils/utils.js index e69de29b..52189950 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -0,0 +1,15 @@ +export default function sort(arr,type) { + + const sortedArr = [...arr] + + if (type === 'alpha'){ + return sortedArr.sort((a,b) => a.title.localeCompare(b.title)); + }else if (type === 'release'){ + return sortedArr.sort((a,b) => b.release_date.localeCompare(a.release_date)) + }else if (type === 'vote'){ + return sortedArr.sort((a,b) => b.vote_average - a.vote_average) + }else { + return arr + } + +} \ No newline at end of file From 47071b15f3f812eca6f27700ec637202b75aa6bd Mon Sep 17 00:00:00 2001 From: Jackson Kenneth Seifferly Date: Wed, 11 Jun 2025 11:56:59 -0700 Subject: [PATCH 20/41] Removed Console logs --- src/App.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 555b41a0..d46d116a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -79,9 +79,6 @@ const App = () => { //**------------------Sort Function-------------------**// useEffect(() => { - - console.log('do sort') - console.log(sortType) const sortedMovies = sort(movieData,sortType) setMovieData(sortedMovies) From c0bcdc579ceb20d3410dc4cf4ddd68177972aa53 Mon Sep 17 00:00:00 2001 From: jseifferly <156245907+jseifferly@users.noreply.github.com> Date: Wed, 11 Jun 2025 11:58:47 -0700 Subject: [PATCH 21/41] Delete .env --- .env | 1 - 1 file changed, 1 deletion(-) delete mode 100644 .env diff --git a/.env b/.env deleted file mode 100644 index df98917d..00000000 --- a/.env +++ /dev/null @@ -1 +0,0 @@ -VITE_API_KEY=eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIwZmJhOGUxMThkYjlkYjQ1MDViZjJlNDIxOTA2YjBiMCIsIm5iZiI6MTc0OTUwOTQ1OC41NDU5OTk4LCJzdWIiOiI2ODQ3NjU1MmU5ODg5ZGMzMzMyMDY4OTYiLCJzY29wZXMiOlsiYXBpX3JlYWQiXSwidmVyc2lvbiI6MX0.hC15ggnHAhw1hfT_FHTOmwbKnG9c7qFyvMJeSw7LbHs \ No newline at end of file From db9930e8ff0e3642c9cd026734a11cc6ef5c712f Mon Sep 17 00:00:00 2001 From: Jackson Kenneth Seifferly Date: Wed, 11 Jun 2025 14:31:07 -0700 Subject: [PATCH 22/41] Added Alt text for images --- src/components/MovieCard.jsx | 2 +- src/components/MovieDetails.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MovieCard.jsx b/src/components/MovieCard.jsx index 3e1821ac..079ddb93 100644 --- a/src/components/MovieCard.jsx +++ b/src/components/MovieCard.jsx @@ -4,7 +4,7 @@ function MovieCard({loadModal, title, image, rating}) { return (
- + {title

{title}

Rating: {rating}

diff --git a/src/components/MovieDetails.jsx b/src/components/MovieDetails.jsx index 4aca86df..c0a36509 100644 --- a/src/components/MovieDetails.jsx +++ b/src/components/MovieDetails.jsx @@ -49,7 +49,7 @@ export default function MovieDetails({movie}) { return (

{movie.title}

- + {movie.title

Release Date: {movie.release_date}

Overview: {movie.overview}

Genres: {genreString(movieDetails.genres)}

From 30c6cca7e533fc2eca0c4333ce9e15c73507bd6c Mon Sep 17 00:00:00 2001 From: Jackson Kenneth Seifferly Date: Wed, 11 Jun 2025 16:11:33 -0700 Subject: [PATCH 23/41] Added Embedded videos and started implmenting side nav bar --- README.md | 14 +++++++------- src/App.jsx | 11 ++++++++++- src/Body.jsx | 4 ++-- src/Footer.jsx | 4 ++-- src/Header.jsx | 4 ++-- src/components/MovieCard.jsx | 4 ++-- src/components/MovieDetails.jsx | 20 ++++++++++++++------ src/components/MovieList.jsx | 4 ++-- src/components/SearchForm.jsx | 4 ++-- src/components/SideNav.jsx | 13 +++++++++++++ src/components/YoutubeEmbed.jsx | 22 ++++++++++++++++++++++ src/styles/Modal.css | 2 +- src/styles/MovieCard.css | 2 +- src/styles/SearchForm.css | 2 +- src/styles/SideNav.css | 27 +++++++++++++++++++++++++++ src/styles/YoutubeEmbed.css | 15 +++++++++++++++ src/utils/utils.js | 2 +- 17 files changed, 124 insertions(+), 30 deletions(-) create mode 100644 src/components/SideNav.jsx create mode 100644 src/components/YoutubeEmbed.jsx create mode 100644 src/styles/SideNav.css create mode 100644 src/styles/YoutubeEmbed.css diff --git a/README.md b/README.md index 626fca95..a9dfbfc5 100644 --- a/README.md +++ b/README.md @@ -29,11 +29,11 @@ Deployed Application (**required**): [Flixster Deployed Site](ADD_LINK_HERE) - [x] Clicks the Submit/Search button - [x] Users can click the Clear button. When clicked: - [x] Most recent search results are cleared from the text input field and the grid view and all current movies are displayed in a grid view -- [ ] **Design Features** - - [ ] Website implements all of the following accessibility features: - - [ ] Semantic HTML +- [x] **Design Features** + - [x] Website implements all of the following accessibility features: + - [x] Semantic HTML - [x] [Color contrast](https://webaim.org/resources/contrastchecker/) - - [ ] Alt text for images + - [x] Alt text for images - [x] Website implements responsive web design. - [x] Uses CSS Flexbox or CSS Grid - [x] Movie tiles and images shrink/grow in response to window size @@ -67,9 +67,9 @@ Deployed Application (**required**): [Flixster Deployed Site](ADD_LINK_HERE) #### STRETCH FEATURES -- [ ] **Embedded Movie Trailers** - - [ ] Within the pop-up modal displaying a movie's details, the movie trailer is viewable. - - [ ] When the trailer is clicked, users can play the movie trailer. +- [x] **Embedded Movie Trailers** + - [x] Within the pop-up modal displaying a movie's details, the movie trailer is viewable. + -[x] When the trailer is clicked, users can play the movie trailer. - [ ] **Favorite Button** - [ ] For each movie displayed, users can favorite the movie. - [ ] There should be visual element (such as a heart icon) on each movie's tile to show whether or not the movie has been favorited. diff --git a/src/App.jsx b/src/App.jsx index 555b41a0..4bb2c372 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,10 @@ import { useState, useEffect } from 'react' import Header from './Header' import Body from './Body' +import SideNav from './components/SideNav' import Footer from './Footer' import sort from './utils/utils' import './App.css' -import { use } from 'react' //API Info for fetch const API_KEY = import.meta.env.VITE_API_KEY @@ -16,6 +16,10 @@ const App = () => { const [movieData, setMovieData] = useState([]) const [pageNum, setPageNum] = useState(1) + //State Arrays for fav and watched movies + const [favMovies, setFavMovies] = useState([]) + const [watchedMovies, setWatchedMovies] = useState([]) + //States to store search information const [searchPage, setSearchPage] = useState(1) const [searchString, setSearchString] = useState('') @@ -94,9 +98,14 @@ const App = () => { //**--------------------------------------------------**// + //**------------------Sort Function-------------------**// + + //**--------------------------------------------------**// + return (
+
diff --git a/src/Body.jsx b/src/Body.jsx index 61510d9d..b8430360 100644 --- a/src/Body.jsx +++ b/src/Body.jsx @@ -4,9 +4,9 @@ import './Body.css' function Body({data, load}) { return ( -
+
-
+ ); } diff --git a/src/Footer.jsx b/src/Footer.jsx index f85891cd..6a6be04e 100644 --- a/src/Footer.jsx +++ b/src/Footer.jsx @@ -3,9 +3,9 @@ import './Footer.css' function Footer() { return ( -
+

@https://github.com/jseifferly/flixster

-
+ ); } diff --git a/src/Header.jsx b/src/Header.jsx index 7815635f..4a909d8e 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -4,10 +4,10 @@ import './Header.css' function Header({search,clear,searchTermFunction,searchString, sortFunc}) { return ( -
+

Flixster

-
+ ); } diff --git a/src/components/MovieCard.jsx b/src/components/MovieCard.jsx index 079ddb93..13e49b86 100644 --- a/src/components/MovieCard.jsx +++ b/src/components/MovieCard.jsx @@ -3,11 +3,11 @@ import '../styles/MovieCard.css' function MovieCard({loadModal, title, image, rating}) { return ( -
+
{title

{title}

Rating: {rating}

-
+ ); } diff --git a/src/components/MovieDetails.jsx b/src/components/MovieDetails.jsx index c0a36509..db4c271f 100644 --- a/src/components/MovieDetails.jsx +++ b/src/components/MovieDetails.jsx @@ -1,11 +1,15 @@ import { useState, useEffect } from "react"; +import YoutubeEmbed from './YoutubeEmbed' export default function MovieDetails({movie}) { const [movieDetails, setMovieDetails] = useState(null) + const [videoData, setVideoData] = useState([]) + const [videoId, setVideoId] = useState('') //API Information for call to movie details const url = `https://api.themoviedb.org/3/movie/${movie.id}?language=en-US`; + const videoUrl = `https://api.themoviedb.org/3/movie/${movie.id}/videos?language=en-US` const API_KEY = import.meta.env.VITE_API_KEY const options = {method: 'GET', headers: {accept: 'application/json', Authorization: `Bearer ${API_KEY}`}} @@ -13,11 +17,14 @@ export default function MovieDetails({movie}) { useEffect(() => { const fetchMovieData = async () => { try{ - var res = await fetch(url, options) - if(res.ok){ - const data = await res.json(); - console.log(data) + var res1 = await fetch(url, options) + var res2 = await fetch(videoUrl, options) + if(res1.ok && res2.ok){ + const data = await res1.json(); + const vidData = await res2.json() setMovieDetails(data); + const video = vidData.results.find(video => video.type === "Trailer") + setVideoId(video.key) }else{ throw new Error("API Not Responding") } @@ -47,15 +54,16 @@ export default function MovieDetails({movie}) { } return ( -
+

{movie.title}

{movie.title

Release Date: {movie.release_date}

Overview: {movie.overview}

Genres: {genreString(movieDetails.genres)}

Runtime: {movieDetails.runtime} minutes

+ -
+ ); } \ No newline at end of file diff --git a/src/components/MovieList.jsx b/src/components/MovieList.jsx index 176ba6a3..8d11df1a 100644 --- a/src/components/MovieList.jsx +++ b/src/components/MovieList.jsx @@ -22,11 +22,11 @@ export default function MovieList({data,load}) { } return ( <> -
+
{data.map((movie) => { return })}; -
+ diff --git a/src/components/SearchForm.jsx b/src/components/SearchForm.jsx index 88d65aa2..f099bf34 100644 --- a/src/components/SearchForm.jsx +++ b/src/components/SearchForm.jsx @@ -11,12 +11,12 @@ function SearchForm({searchFunction, clearFunction, searchTerm, searchTermFunc, return ( -
+
-
+ ); } diff --git a/src/components/SideNav.jsx b/src/components/SideNav.jsx new file mode 100644 index 00000000..91a92287 --- /dev/null +++ b/src/components/SideNav.jsx @@ -0,0 +1,13 @@ +import '../styles/SideNav.css' + +export default function SideNav() { + + return ( +
+

Home

+

Favorites

+

Watched

+
+ ); + +} \ No newline at end of file diff --git a/src/components/YoutubeEmbed.jsx b/src/components/YoutubeEmbed.jsx new file mode 100644 index 00000000..81eb5513 --- /dev/null +++ b/src/components/YoutubeEmbed.jsx @@ -0,0 +1,22 @@ +import '../styles/YoutubeEmbed.css' +import PropTypes from "prop-types"; + +const YoutubeEmbed = ({ embedId }) => ( +
+