package-lock.json

@@ -14,7 +14,8 @@
         "axios": "^1.7.9",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-router-dom": "^7.1.1"
+        "react-router-dom": "^7.1.1",
+        "react-spinners": "^0.15.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.17.0",
@@ -5219,6 +5220,16 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.15.0.tgz",
+      "integrity": "sha512-ZO3/fNB9Qc+kgpG3SfdlMnvTX6LtLmTnOogb3W6sXIaU/kZ1ydEViPfZ06kSOaEsor58C/tzXw2wROGQu3X2pA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

package.json

@@ -16,7 +16,8 @@
     "axios": "^1.7.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.1.1"
+    "react-router-dom": "^7.1.1",
+    "react-spinners": "^0.15.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

src/components/Card.jsx

@@ -1,13 +1,14 @@
 import React from "react";
 
-const Card = ({movie}) => {
-    const { Title, Year, imdbID, Poster } = movie
-    console.log("Card", Title, Year, imdbID, Poster)
+const Card = ({ movie }) => {
+    const { Title, Year, imdbID, Poster } = movie;
     return (
-        <div className="h-16 w-10">
-            <img src={Poster} alt={Title} className="h-12 w-full" />
+        <div className="h-[30vh] w-[10vw] overflow-hidden border rounded-lg border-quadnary">
+            <img src={Poster} alt={Title} className="h-[85%] w-full" />
+            <div className="flex justify-between px-3 pt-1 text-sm">
                 <h6 className="text-quadnary">{Title}</h6>
-            <p className="text-quadnary">{Year}</p>
+                <p className="text-quadnary font-semibold">{Year}</p>
+            </div>
         </div>
     );
 };

src/components/Header.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 const Header = () => {
  return (
-    <header className="fixed w-full h-[5vh] py-3 px-6 bg-secondary">
+    <header className="fixed z-20 w-full h-[5vh] py-3 px-6 bg-secondary">
         <a href="/">DigiFlix</a>
     </header>
 )

src/hooks/useFetch.jsx

@@ -3,22 +3,24 @@ import { useState, useEffect } from "react";
 
 const useFetch = (url) => {
     const [data, setData] = useState({});
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState({})
     useEffect(() => {
         // console.log("Inside fetch")
         const fetch = async () => {
             let response;
             try {
+                setLoading(true);
                 response = await axios.get(url);
-                // console.log("USEFETCH:", response?.data);
                 setData(response?.data);
-            } catch {
-                console.log("Error in useFetch: ");
-                return "Error Fetching Data";
+                setLoading(false);
+            } catch(error) {
+                setError(error)
             }
         };
         fetch();
     }, [url]);
-    return data;
+    return { data, loading, error};
 };
 
 export default useFetch;

src/pages/HomePage.jsx

@@ -1,25 +1,34 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import useFetch from "../hooks/useFetch";
 
+import { Pagination } from "@mui/material";
+import { ClipLoader } from "react-spinners";
+
 import Card from "../components/Card";
 
 const HomePage = () => {
+    const url = import.meta.env.VITE_BASE_URL;
+
     const [inputValue, setInputValue] = useState("");
     const [searchValue, setSearchValue] = useState("");
-    const [data, setData] = useState("");
+    const [page, setPage] = useState(1);
+    const { data, loading, error } = useFetch(
+        url + "&s=" + searchValue + "&page=" + page
+    );
 
-    const url = import.meta.env.VITE_BASE_URL;
-    const response = useFetch(url + "s=" + searchValue);
-    console.log(response)
-    useEffect(() => setData(response), [data]);
+    console.log(page);
+
+    const handlePageChange = (e) => {
+        setPage(e?.target?.textContent);
+    };
     const handleSearch = (event) => {
         event.preventDefault();
         setSearchValue(inputValue);
     };
     return (
-        <div className=" min-h-[90vh] w-full pt-[10vh] bg-primary flex justify-center">
+        <div className=" min-h-[90vh] w-full pt-[10vh] bg-primary flex flex-col items-center ">
             <div>
-                <form className="">
+                <form className="flex gap-3 items-center">
                     <input
                         type="text"
                         name="search"
@@ -32,18 +41,31 @@ const HomePage = () => {
                     />
                     <button
                         type="button"
-                        className="text-quadnary"
+                        className="px-4 h-full border border-quadnary text-quadnary"
                         onClick={handleSearch}
                     >
                         Search
                     </button>
                 </form>
             </div>
-            {data?.Search?.length > 0 && 
-                <div>
-                    {data?.Search?.map((movie) => <Card key={movie?.imdbID} movie={movie}/>)}
+            {data?.Search?.length > 0 && (
+                <div className="flex flex-col items-center m-10">
+                    <ClipLoader color="#fff" loading={loading} size={100} />
+                    <div className="flex flex-wrap gap-4 mb-6 justify-center">
+                        {data?.Search?.map((movie) => (
+                            <Card key={movie?.imdbID} movie={movie} />
+                        ))}
                     </div>
-            }
+                    <Pagination
+                        sx={{ bgcolor: "#fff" }}
+                        onChange={handlePageChange}
+                        page={Number(page)}
+                        count={Math.ceil(data?.totalResults / 10)}
+                        variant="outlined"
+                        shape="rounded"
+                    />
+                </div>
+            )}
         </div>
     );
 };