feat: Changes

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

src/App.css

@@ -3,13 +3,32 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #880ac2;
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-evenly;
   color: white;
-  padding: 20px;
+  padding: 10px 20px;
+
+}
+.title {
+  display: flex;
+  align-items: center;
+  height: 100px;
+  justify-content: center;
+  flex-grow: 1;
+}
+
+.title h1 {
+  font-size: 50px;
+}
+@media (max-width: 600px) {
+  .title h1 {
+    font-size: 30px; /
+  }
+}
+.title img {
+  height: 60px;
 }
 
 @media (max-width: 600px) {
@@ -26,3 +45,37 @@
     flex-direction: column;
   }
 }
+
+.line {
+  width: 35px;
+  height: 5px;
+  background-color: black;
+  margin: 3px 0;
+}
+
+.btn-wrapper {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column; /* Aligns the lines vertically */
+  justify-content: center; /* Center lines vertically within the btn-wrapper */
+  align-items: flex-start;
+}
+
+.btn-wrapper:hover {
+  cursor: pointer;
+}
+
+.App-footer {
+  background-color: #880ac2;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: white;
+  padding: 10px 20px;
+}
+.App-footer a {
+  display: flex;
+  justify-content: center;
+  flex-grow: 1;
+  color: white;
+}

src/App.jsx

@@ -1,10 +1,36 @@
-import { useState } from 'react'
-import './App.css'
+// App.jsx
+import React, { useState } from "react";
+import "./App.css";
+import MovieList from "./MovieList";
 
 const App = () => {
-  <div className="App">
-
-  </div>
-}
+  const [isSidebarOpen, setSidebarOpen] = useState(false);
+  const toggleSidebar = () => {
+    setSidebarOpen(!isSidebarOpen);
+  };
+  return (
+    <div className="App">
+      <header className="App-header">
+        {!isSidebarOpen && (
+          <div className="btn-wrapper" onClick={toggleSidebar}>
+            <div className="line"></div>
+            <div className="line"></div>
+            <div className="line"></div>
+          </div>
+        )}
+        <div className="title">
+          <h1>Flixster</h1>
+          <img src="movie.png" alt="" />
+        </div>
+      </header>
+      <MovieList isSidebarOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
+      <footer className="App-footer">
+        <a href="https://www.linkedin.com/in/boris-hernandez-jr/">
+          Learn More!
+        </a>
+      </footer>
+    </div>
+  );
+};
 
-export default App
+export default App;

src/Modal.css

@@ -0,0 +1,45 @@
+
+.modal-overlay {
+    box-sizing: border-box;
+    position:fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%; 
+    background-color: rgba(0,0,0,0.4); 
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #fefefe;
+    margin: 10% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 50%; 
+    height: auto;
+    max-height: 80%;
+ }
+
+
+#close-modal {
+    flex-shrink: 0;
+    font-size: 25px;
+    cursor: pointer; 
+    margin-left: auto;
+    justify-content: flex-end;
+
+ } 
+
+ .modal-content img {
+    width: 150px;
+
+ }

src/Modal.jsx

@@ -0,0 +1,36 @@
+import "./Modal.css";
+const Modal = ({
+  isOpen,
+  onClose,
+  title,
+  poster,
+  release,
+  overview,
+  genres,
+  trailer,
+}) => {
+  const modalStyle = { display: isOpen ? "flex" : "none" };
+  return (
+    <div className="modal-overlay" style={modalStyle}>
+      <div className="modal-content">
+        <span id="close-modal" onClick={onClose}>
+          &times;
+        </span>
+        <h2>{title}</h2>
+        <img src={poster} alt="movie-poster" />
+        <p>Release date: {release}</p>
+        <p>Overview: {overview}</p>
+        <p>Genres: {genres}</p>
+        <iframe
+          width="300"
+          height="215"
+          src={trailer}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen
+          alt="trailer"
+        ></iframe>
+      </div>
+    </div>
+  );
+};
+export default Modal;

src/MovieCard.css

@@ -0,0 +1,63 @@
+.card {
+    display: flex;
+    flex-direction: column;  
+    width: 200px; 
+    height: 375px;  
+    border: solid black;
+    background-color: white;
+    margin: 10px;
+    box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, 0.582);
+    position: relative;
+    top: 0;
+    transition: top ease 0.5s;
+}
+.card:hover {
+    top: -15px;
+    cursor: pointer;
+}
+
+.img-container {
+    width: 100%;  
+    height: 80%;  
+    background-color: #ccc;  
+    overflow: contain;
+}
+
+.img-container img {
+    width: 100%;  
+    height: 100%;
+    object-fit: contain;  
+}
+
+.txt-container { 
+    text-align: center;  
+    display: flex;
+    flex-direction: column;
+    justify-content: center;  
+    align-items: center;
+    height: 20%;
+}
+
+.txt-container h2, .txt-container p {
+    font-size: 15px;
+    margin: 0%;
+}
+
+.sub-txt {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.icons {
+    display: flex;
+    gap: 5px;
+    position: absolute;
+    left: 10px; /* Position icons to the left inside the card */
+}
+
+.rating {
+    flex-grow: 1;
+    text-align: center;
+}

src/MovieCard.jsx

@@ -0,0 +1,43 @@
+import "./MovieCard.css";
+
+const MovieCard = ({
+  movieId,
+  title,
+  poster,
+  rating,
+  clickHandler,
+  seen,
+  loved,
+  toggleSeen,
+  toggleLoved,
+}) => {
+  const handleToggleSeen = (e) => {
+    e.stopPropagation();
+    toggleSeen(movieId);
+  };
+
+  const handleToggleLoved = (e) => {
+    e.stopPropagation();
+    toggleLoved(movieId);
+  };
+
+  return (
+    <div className="card" onClick={() => clickHandler(movieId)}>
+      <div className="img-container">
+        <img src={poster} alt="Movie Poster" />
+      </div>
+      <div className="txt-container">
+        <h2>{title}</h2>
+        <div className="sub-txt">
+          <div className="icons">
+            <p onClick={handleToggleLoved}>{loved ? "❤️" : "🤍"} </p>
+            <p onClick={handleToggleSeen}>{seen ? "📖" : "📘"}</p>
+          </div>
+          <p className="rating">{rating}⭐️</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MovieCard;

src/MovieList.css

@@ -0,0 +1,16 @@
+.movie-row {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;  /* Center cards horizontally */
+        padding: 20px;
+        width: 75%; 
+        margin: 0 auto;
+        gap: 2%;
+        z-index: 0;
+}
+
+.load-btn {
+        width: 100%;
+        float: left;
+        margin-top: 30px;
+}