feat: Flixter - Pull Request to base repo

.gitignore

@@ -12,6 +12,7 @@ dist
 dist-ssr
 *.local
 
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
@@ -22,3 +23,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

src/App.jsx

@@ -1,27 +1,14 @@
-import { useState } from 'react'
 import './App.css'
-import MovieCard from './MovieCard'
-import data from './data/data'
+import MovieList from './MovieList'
 
 const App = () => {
-  // Get the movies from the data
-  const movies = data.results;
-
   return (
     <div className="App">
       <header className="App-header">
         <h1>Flixster</h1>
+        inp
       </header>
-      <div className="movie-container" style={{
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        padding: '20px'
-      }}>
-        {movies.map(movie => (
-          <MovieCard key={movie.id} movie={movie} />
-        ))}
-      </div>
+      <MovieList />
     </div>
   )
 }

src/MovieCard.css

@@ -0,0 +1,46 @@
+.movie-card {
+  width: 200px;
+  margin: 1rem;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s ease;
+  background-color: #1a1a1a;
+}
+
+.movie-card:hover {
+  transform: scale(1.03);
+}
+
+.movie-poster {
+  width: 100%;
+  height: 300px;
+  object-fit: cover;
+}
+
+.movie-info {
+  padding: 1rem;
+}
+
+.movie-title {
+  margin: 0 0 0.5rem 0;
+  font-size: 1rem;
+  color: white;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.movie-vote {
+  display: flex;
+  align-items: center;
+}
+
+.vote-average {
+  background-color: #ffd700;
+  color: black;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  font-weight: bold;
+  font-size: 0.9rem;
+}

src/MovieList.css

@@ -0,0 +1,39 @@
+.movie-list-container {
+  padding: 20px;
+}
+
+.section-title {
+  font-size: 1.8rem;
+  margin-bottom: 20px;
+  color: #fff;
+  text-align: center;
+}
+
+.movie-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+}
+
+.loading, .error {
+  text-align: center;
+  padding: 40px;
+  font-size: 1.2rem;
+  color: #fff;
+}
+
+.error {
+  color: #ff6b6b;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .movie-list {
+    gap: 15px;
+  }
+
+  .section-title {
+    font-size: 1.5rem;
+  }
+}

src/MovieList.jsx

@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react';
+import MovieCard from './MovieCard';
+import './MovieList.css';
+
+const MovieList = () => {
+  const [movies, setMovies] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchMovies = async () => {
+      const apiKey = import.meta.env.VITE_API_KEY;
+      const url = `https://api.themoviedb.org/3/movie/now_playing?api_key=${apiKey}&language=en-US&page=1`;
+
+      try {
+        const response = await fetch(url);
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        setMovies(data.results);
+        setLoading(false);
+      } catch (error) {
+        console.error("Error fetching movies:", error);
+        setError("Failed to fetch movies. Please try again later.");
+        setLoading(false);
+      }
+    };
+
+    fetchMovies();
+  }, []);
+
+  if (loading) {
+    return <div className="loading">Loading movies...</div>;
+  }
+
+  if (error) {
+    return <div className="error">{error}</div>;
+  }
+
+  return (
+    <main className="movie-list-container">
+      <h2 className="section-title">Now Playing</h2>
+      <section className="movie-list">
+        {movies.map(movie => (
+          <MovieCard key={movie.id} movie={movie} />
+        ))}
+      </section>
+    </main>
+  );
+};
+
+export default MovieList;

src/index.css

@@ -1,7 +1,7 @@
 body {
   margin: 0;
   font-family: Arial, sans-serif;
-  background-color: #f4f4f4;
+  background-color: #b4b1b1;
 }
 
 button {