App with modal

.env

@@ -0,0 +1 @@
+VITE_API_KEY=abdf86b5a5bfd53f8efefa7cdcb50fa9

README.md

@@ -1,8 +1,64 @@
-# 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: Dara Oyedun
 
-Currently, two official plugins are available:
+Estimated time spent: 50 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 (optional): [Flixster Deployed Site](https://flixster-starter-w73s.onrender.com)
+
+### Application Features
+
+#### CORE FEATURES
+
+
+- [x] **Display Movies**
+  - [x] Users can view a list of current movies from The Movie Database API.
+  - [x] For each movie displayed, users can see its title, poster image, and votes.
+  - [x] Users can load more current movies by clicking a button at the bottom of the list (page should not be reloaded).
+- [x] **Search Functionality**
+  - [x] Users can search for movies and view the results in a grid.
+  - [x] Users can clear results and view previous current movies displayed.
+- [x] **Accessibility Features**
+  - [x] Website implements accessibility features (semantic HTML, color contrast, font sizing, alt text for images).
+- [x] **Responsive Design**
+  - [x] Website implements responsive web design.
+- [x] **Movie Details**
+  - [x] 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.
+- [x] **Sorting Options**
+  - [x] Users can click on a filter by drop down to sort product by type (alphabetic, release date, rating).
+- [x] **Layout**
+  - [x] Website displays header, banner, search, movie grid, about, contact, and footer section.
+
+#### STRETCH FEATURES
+
+- [x] **Deployment**
+  - [x] Website is deployed via Render.
+- [x] **Embedded Movie Trailers**
+  - [x] Within the popup displaying a movie's details, users can play the movie trailer.
+- [x] **Watched Checkbox**
+  - [x] For each movie displayed, users can mark the movie as watched.
+- [x] **Favorite Button**
+  - [x] For each movie displayed, users can favorite the movie.
+- [x] **Sidebar**
+  - [x] Users can open a sidebar
+  - [x] The sidebar displays the user's favorited and watched movies
+
+### Walkthrough Video
+
+'https://www.loom.com/share/94d48f59afcd45d3853c479b60ee7728?sid=d083ebdc-4df4-4f91-9c69-1d2ef9884188'
+
+### 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 labs helped me as well as the code demos done in class. that really helped me understand why I could get any errors and how I could resolve them. it also ensured that I was able to get the foundational knowledge I needed to grasp React
+
+* 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 implement more CSS features and add some animations. I would also want a button that if clicked on would take you back to the top as scrolling is tedious. Also, i would want my search bar to immediately start displaying movies as soon as the user starts to type on the search bar.
+
+* 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?
+I like how my modal turned out and how I was able to also add the embedded video trailer. I nticed that one of my peers used an image from the movies as the header and it displayed some of the information on it. I would like to try it next time.
+
+### Open-source libraries used
+TMDB API {'https://developer.themoviedb.org/docs/getting-started'}
+### Shout out
+To Sammy, Ayoub, Destiny and Gabriella

index.html

@@ -2,12 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <link rel="icon" type="image/png" href="/movie.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Flixster</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
+    <script src="https://kit.fontawesome.com/1d23c78beb.js" crossorigin="anonymous"></script>
   </body>
 </html>

package.json

@@ -21,6 +21,6 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "vite": "^5.2.0"
+    "vite": "^5.2.13"
   }
 }

src/App.css

@@ -1,28 +1,82 @@
-.App {
+.title-header{
   text-align: center;
+  padding-right: auto;
+  color: white;
 }
-
-.App-header {
-  background-color: #282c34;
-  display: flex;
+.loadMoreButton{
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  justify-content: center;
+  background-color: white;
+  color: black
+}
+footer{
+  display: inline-block;
+  /* position: fixed; */
+  margin-left: 50%;
+  left: 0;
+  bottom: 0;
+  margin-right: 50%;
+  width: 200px;
+  height: 50px;
+  background-color:black;
+}
+.button{
+  margin-left: auto;
+  margin-right: auto;
+}
+.search-bar{
+  width: 80%
+}
+.body{
+  background-color: #0d0f16;
+  margin-left: 20%;
+  display: inline-flex;
+  flex-wrap: wrap;
   flex-direction: row;
-  align-items: center;
-  justify-content: space-evenly;
-  color: white;
-  padding: 20px;
 }
+.hide{
+  display: none;
+}
+.show{
+  display: flex;
+}
+.nav-bar{
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  backdrop-filter: blur(5px);
 
-@media (max-width: 600px) {
-  .movie-card {
-    width: 100%;
-  }
+}
+.whole-body{
+  background-color: #0d0f16;
+}
 
-  .search-bar {
-    flex-direction: column;
-    gap: 10px;
-  }
+.button {
+  font-family: "Poppins";
+  border-radius: 10px;
+  font-size: 110%;
+  border: none;
+}
+.button:hover {
+  background-color: rgba(255, 82, 122, .6);
 
-  .search-bar form {
-    flex-direction: column;
-  }
+}
+.load-more{
+  margin-left: 10%;
+  margin-right: 10%;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+header {
+  font-family: Arial, sans-serif;
+  font-size: 20px;
+  color: #333;
+  background-image: url('/src/Background.jpg');
+  width: 100%;
+  border-bottom: 1px solid #ccc;
+  height:100%
 }