From c5df714f6dce2de640691c6e3b65780244790d17 Mon Sep 17 00:00:00 2001
From: chaaanuwu <gkchanuwa@gmail.com>
Date: Sun, 5 Apr 2026 20:07:44 +0530
Subject: [PATCH 1/2] feat: Add top-rated movies feature with related API,
 model, and cron job

---
 client/src/api/tmdb.api.js                |  5 ++
 client/src/components/Navbar.jsx          |  4 +-
 client/src/pages/MoviesPage.jsx           | 34 +++++++++----
 server/app.js                             |  2 +
 server/controllers/tmdb.controller.js     | 46 +++++++++++++++++
 server/controllers/trending.controller.js | 21 --------
 server/cron/topRated.cron.js              |  7 +++
 server/cron/trending.cron.js              |  2 +-
 server/models/topRated.model.js           | 10 ++++
 server/routes/tmdb.routes.js              |  4 +-
 server/services/topRated.service.js       | 60 +++++++++++++++++++++++
 server/services/trending.service.js       |  2 +-
 12 files changed, 161 insertions(+), 36 deletions(-)
 create mode 100644 server/controllers/tmdb.controller.js
 delete mode 100644 server/controllers/trending.controller.js
 create mode 100644 server/cron/topRated.cron.js
 create mode 100644 server/models/topRated.model.js
 create mode 100644 server/services/topRated.service.js

diff --git a/client/src/api/tmdb.api.js b/client/src/api/tmdb.api.js
index af88aac..8d2d734 100644
--- a/client/src/api/tmdb.api.js
+++ b/client/src/api/tmdb.api.js
@@ -3,4 +3,9 @@ import axiosInstance from "./axiosInstance";
 export const getTrendingMovies = async () => {
     const res = await axiosInstance.get('/movies/trending');
     return res;
+}
+
+export const getTopRatedMovies = async () => {
+    const res = await axiosInstance.get('/movies/top-rated');
+    return res;
 }
\ No newline at end of file
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
index 3966e48..bc43600 100644
--- a/client/src/components/Navbar.jsx
+++ b/client/src/components/Navbar.jsx
@@ -26,7 +26,7 @@ export default function Navbar() {
   return (
     <nav className="fixed top-0 left-0 right-0 z-50 flex justify-center p-4 pointer-events-none">
       {/* GLASS CONTAINER */}
-      <div className="w-full max-w-6xl bg-white/80 backdrop-blur-xl border border-white/40 shadow-[0_8px_32px_0_rgba(0,0,0,0.1)] rounded-3xl px-4 md:px-8 py-2 flex justify-between items-center pointer-events-auto transition-all duration-500">
+      <div className="w-full max-w-6xl bg-white/40 backdrop-blur-xl border border-white/80 shadow-[0_8px_32px_0_rgba(0,0,0,0.1)] rounded-3xl px-4 md:px-8 py-2 flex justify-between items-center pointer-events-auto transition-all duration-500">
 
         {/* LOGO */}
         <Link to="/" className="flex items-center gap-2.5 group shrink-0">
@@ -71,7 +71,7 @@ export default function Navbar() {
                     </div>
                   )}
                 </div>
-                <span className="hidden xl:block text-xs font-black uppercase tracking-widest text-stone-600">
+                <span className="hidden xl:block text-xs font-black uppercase tracking-widest text-stone-800">
                   {user?.user?.firstName || user?.firstName}
                 </span>
               </Link>
diff --git a/client/src/pages/MoviesPage.jsx b/client/src/pages/MoviesPage.jsx
index 5e6095f..6e9da4f 100644
--- a/client/src/pages/MoviesPage.jsx
+++ b/client/src/pages/MoviesPage.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from "react";
 import { motion } from "framer-motion";
-import { getTrendingMovies } from "../api/tmdb.api";
+import { getTopRatedMovies, getTrendingMovies } from "../api/tmdb.api";
 import MovieCard from "../components/ui/MovieCard";
 import Loader from "../components/ui/Loader";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
@@ -8,16 +8,22 @@ import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 export default function MoviesPage() {
     const [loading, setLoading] = useState(true);
     const [trendingMovies, setTrendingMovies] = useState([]);
+    const [topRatedMovies, setTopRatedMovies] = useState([]);
     const [featuredMovie, setFeaturedMovie] = useState(null);
 
     useEffect(() => {
-        const fetchTrending = async () => {
+        const fetchData = async () => {
             try {
-                const res = await getTrendingMovies();
-                const movies = res.data || [];
+                const trendingRes = await getTrendingMovies();
+                const movies = trendingRes.data || [];
                 setTrendingMovies(movies);
 
+                const topRatedRes = await getTopRatedMovies();
+                const topRatedMovies = topRatedRes.data || [];
+                setTopRatedMovies(topRatedMovies);
+
                 if (movies.length > 0) {
+                    setFeaturedMovie(null);
                     const randomIndex = Math.floor(Math.random() * movies.length);
                     setFeaturedMovie(movies[randomIndex]);
                 }
@@ -28,10 +34,10 @@ export default function MoviesPage() {
             }
         };
 
-        fetchTrending();
+        fetchData();
     }, []);
 
-    if (loading) return <Loader />;
+    if (loading || !featuredMovie) return <Loader />;
 
     return (
         <div className="min-h-screen bg-stone-50 font-sans text-stone-900 selection:bg-amber-200">
@@ -58,9 +64,11 @@ export default function MoviesPage() {
                         <h3 className="text-[10px] font-black uppercase tracking-[0.4em] text-amber-500 mb-4">
                             Featured Spotlight
                         </h3>
-                        <h1 className="text-4xl md:text-7xl font-black text-stone-900 tracking-tighter mb-4 leading-none">
-                            {featuredMovie?.title || featuredMovie?.name}
-                        </h1>
+                        <a href={`/movies/${featuredMovie?._id}`}>
+                            <h1 className="text-4xl md:text-7xl font-black text-stone-900 tracking-tighter mb-4 leading-none">
+                                {featuredMovie?.title}
+                            </h1>
+                        </a>
                         <p className="text-stone-600 text-sm md:text-lg font-serif italic line-clamp-3 max-w-xl">
                             {featuredMovie?.overview}
                         </p>
@@ -75,6 +83,12 @@ export default function MoviesPage() {
                     subtitle="Global Cinema"
                     movies={trendingMovies}
                 />
+
+                <MovieSlider
+                    title="Top Rated"
+                    subtitle="Critically Acclaimed"
+                    movies={topRatedMovies}
+                />
             </main>
         </div>
     );
@@ -96,7 +110,7 @@ function MovieSlider({ title, subtitle, movies }) {
 
     return (
         <section className="relative">
-            <div className="flex items-end justify-between mb-8 px-2">
+            <div className="flex items-end justify-between mb-8 px-2 mt-8">
                 <div>
                     <div className="flex items-center gap-3 mb-2">
                         <div className="h-0.5 w-6 bg-amber-500/40" />
diff --git a/server/app.js b/server/app.js
index e2d5b0a..8c9e2be 100644
--- a/server/app.js
+++ b/server/app.js
@@ -15,6 +15,7 @@ import movieRouter from './routes/movie.route.js';
 import tmdbRouter from './routes/tmdb.routes.js';
 import "./cron/trending.cron.js";
 import { fetchAndStoreTrending } from './services/trending.service.js';
+import { fetchAndStoreTopRated } from './services/topRated.service.js';
 
 const app = express();
 
@@ -29,6 +30,7 @@ app.use(express.urlencoded({ extended: false}));
 
 // Remove this line when deployed, as the cron will handle it
 fetchAndStoreTrending().then(() => console.log("🔥 Initial trending fetched"));
+fetchAndStoreTopRated().then(() => console.log("🔥 Initial top rated fetched"));
 
 app.use(`${BASE_URL}/auth`, authRouter);
 app.use(`${BASE_URL}/user`, userRouter);
diff --git a/server/controllers/tmdb.controller.js b/server/controllers/tmdb.controller.js
new file mode 100644
index 0000000..4a58ac3
--- /dev/null
+++ b/server/controllers/tmdb.controller.js
@@ -0,0 +1,46 @@
+import TopRatedMovies from "../models/TopRated.model.js";
+import TrendingMovies from "../models/trending.model.js";
+
+// Controller to fetch trending movies
+export const getTrendingMovies = async (req, res) => {
+  try {
+    const today = new Date().toISOString().split("T")[0];
+
+    let trending = await TrendingMovies.findOne({ date: today })
+      .populate("movies");
+
+    // fallback if today not available
+    if (!trending) {
+      trending = await TrendingMovies.findOne()
+        .sort({ createdAt: -1 })
+        .populate("movies");
+    }
+
+    return res.status(200).json(trending?.movies || []);
+
+  } catch (error) {
+    return res.status(500).json({ message: error.message });
+  }
+};
+
+// Controller to fetch top-rated movies
+export const getTopRatedMovies = async (req, res) => {
+  try {
+    const today = new Date().toISOString().split("T")[0];
+
+    let topRated = await TopRatedMovies.findOne({ date: today })
+      .populate("movies");
+
+    // fallback if today not available
+    if (!topRated) {
+      topRated = await TopRatedMovies.findOne()
+        .sort({ createdAt: -1 })
+        .populate("movies");
+    }
+
+    return res.status(200).json(topRated?.movies || []);
+
+  } catch (error) {
+    return res.status(500).json({ message: error.message });
+  }
+}
\ No newline at end of file
diff --git a/server/controllers/trending.controller.js b/server/controllers/trending.controller.js
deleted file mode 100644
index 8e58b60..0000000
--- a/server/controllers/trending.controller.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import TrendingMovies from "../models/trending.model.js";
-
-export const getTrendingMovies = async (req, res) => {
-  try {
-    const today = new Date().toISOString().split("T")[0];
-
-    let trending = await TrendingMovies.findOne({ date: today })
-      .populate("movies");
-
-    // 🔥 fallback if today not available
-    if (!trending) {
-      trending = await TrendingMovies.findOne()
-        .sort({ createdAt: -1 })
-        .populate("movies");
-    }
-
-    return res.status(200).json(trending?.movies || []);
-  } catch (err) {
-    return res.status(500).json({ message: err.message });
-  }
-};
\ No newline at end of file
diff --git a/server/cron/topRated.cron.js b/server/cron/topRated.cron.js
new file mode 100644
index 0000000..652c97d
--- /dev/null
+++ b/server/cron/topRated.cron.js
@@ -0,0 +1,7 @@
+import cron from "node-cron";
+import { fetchAndStoreTopRated } from "../services/topRated.service";
+
+cron.schedule("0 0 * * *", async () => {
+    console.log("⏳ Running top rated cron...");
+    await fetchAndStoreTopRated();
+});
\ No newline at end of file
diff --git a/server/cron/trending.cron.js b/server/cron/trending.cron.js
index c44be76..6c8a5ac 100644
--- a/server/cron/trending.cron.js
+++ b/server/cron/trending.cron.js
@@ -1,7 +1,7 @@
 import cron from "node-cron";
 import { fetchAndStoreTrending } from "../services/trending.service.js";
 
-// runs every day at midnight
+// runs everyday at midnight
 cron.schedule("0 0 * * *", async () => {
   console.log("⏳ Running trending cron...");
   await fetchAndStoreTrending();
diff --git a/server/models/topRated.model.js b/server/models/topRated.model.js
new file mode 100644
index 0000000..359c244
--- /dev/null
+++ b/server/models/topRated.model.js
@@ -0,0 +1,10 @@
+import mongoose from 'mongoose';
+
+const topRatedMoviesSchema = new mongoose.Schema({
+    movies: [
+        { type: mongoose.Schema.Types.ObjectId, ref: "Movie" }
+    ],
+    date: { type: String, required: true, unique: true }
+}, { timestamps: true });
+
+export default mongoose.model("TopRatedMovies", topRatedMoviesSchema);
\ No newline at end of file
diff --git a/server/routes/tmdb.routes.js b/server/routes/tmdb.routes.js
index 02b2702..7591624 100644
--- a/server/routes/tmdb.routes.js
+++ b/server/routes/tmdb.routes.js
@@ -1,9 +1,11 @@
 import { Router } from 'express';
 import authorize from '../middlewares/auth.middleware.js';
-import { getTrendingMovies } from '../controllers/trending.controller.js';
+import { getTopRatedMovies, getTrendingMovies } from '../controllers/tmdb.controller.js';
 
 const tmdbRouter = Router();
 
 tmdbRouter.get('/trending', authorize, getTrendingMovies);
 
+tmdbRouter.get('/top-rated', authorize, getTopRatedMovies);
+
 export default tmdbRouter;
\ No newline at end of file
diff --git a/server/services/topRated.service.js b/server/services/topRated.service.js
new file mode 100644
index 0000000..10d776a
--- /dev/null
+++ b/server/services/topRated.service.js
@@ -0,0 +1,60 @@
+import axios from "axios";
+import TopRatedMovies from "../models/TopRated.model.js";
+import { TMDB_BASE_URL, TMDB_KEY } from "../config/env.js";
+import Movie from "../models/movie.model.js";
+import { genreMap } from "../utils/movieGenre.utils.js";
+
+export const fetchAndStoreTopRated = async () => {
+    try {
+        const today = new Date().toISOString().split('T')[0];
+
+        const existing = await TopRatedMovies.findOne({ date: today });
+        if (existing) return;
+
+        const res = await axios.get(`${TMDB_BASE_URL}/movie/top_rated`, {
+            params: { api_key: TMDB_KEY }
+        });
+
+        const movieFromTMDB = res.data.results;
+
+        // console.log(moviesFromTMDB);
+
+        const movieDocs = [];
+
+        for (const movie of movieFromTMDB) {
+            const doc = await Movie.findOneAndUpdate(
+                { movieId: movie.id },
+                {
+                    movieId: movie.id,
+                    adult: movie.adult,
+                    backdropPath: movie.backdrop_path,
+                    genreIds: movie.genre_ids,
+                    genreNames: movie.genre_ids.map(id => genreMap[id]),
+                    originalLanguage: movie.original_language,
+                    originalTitle: movie.original_title,
+                    overview: movie.overview,
+                    popularity: movie.popularity,
+                    posterPath: movie.poster_path,
+                    releaseDate: movie.release_date,
+                    title: movie.title,
+                    video: movie.video,
+                    voteAverage: movie.vote_average,
+                    voteCount: movie.vote_count
+                },
+                { upsert: true, returnDocument: 'after' }
+            );
+
+            movieDocs.push(doc._id);
+        }
+
+        await TopRatedMovies.create({
+            movies: movieDocs,
+            date: today
+        });
+
+        console.log("✅ Top rated movies updated");
+
+    } catch (error) {
+        console.error("Top rated cron failed: ", error.message);
+    }
+}
\ No newline at end of file
diff --git a/server/services/trending.service.js b/server/services/trending.service.js
index cd8b50a..da27783 100644
--- a/server/services/trending.service.js
+++ b/server/services/trending.service.js
@@ -17,7 +17,7 @@ export const fetchAndStoreTrending = async () => {
 
         const moviesFromTMDB = res.data.results;
 
-        console.log(moviesFromTMDB);
+        // console.log(moviesFromTMDB);
 
         const moviesDocs = [];
 

From 4df566e1b9c7418042a13c60542d95503a7fd472 Mon Sep 17 00:00:00 2001
From: chaaanuwu <gkchanuwa@gmail.com>
Date: Wed, 8 Apr 2026 04:16:01 +0530
Subject: [PATCH 2/2] feat: Implement search functionality for users and
 movies; add SearchResultPage component and update Navbar and SearchBar

---
 client/src/App.jsx                     |  12 +-
 client/src/api/user.api.js             |   5 +
 client/src/components/Navbar.jsx       |  14 ++-
 client/src/components/ui/SearchBar.jsx |  17 ++-
 client/src/pages/MoviesPage.jsx        |  35 ++++--
 client/src/pages/SearchResultPage.jsx  | 164 +++++++++++++++++++++++++
 server/controllers/user.controller.js  |  29 ++++-
 server/routes/user.route.js            |   4 +-
 8 files changed, 261 insertions(+), 19 deletions(-)
 create mode 100644 client/src/pages/SearchResultPage.jsx

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 3968464..8ed8745 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -9,6 +9,7 @@ import useAuthLoader from "./hooks/useAuthLoader";
 import MoviePage from "./pages/MoviePage";
 import Navbar from "./components/Navbar";
 import TmdbMovie from "./pages/MoviesPage";
+import SearchResultPage from "./pages/SearchResultPage";
 
 function isTokenExpired(token) {
     if (!token) return true;
@@ -37,7 +38,7 @@ export default function App() {
 
     return (
         <BrowserRouter>
-                  <Navbar />
+            <Navbar />
 
             <Routes>
 
@@ -98,6 +99,15 @@ export default function App() {
                     }
                 />
 
+                <Route
+                    path="/search"
+                    element={
+                        token && !isExpired
+                            ? <SearchResultPage />
+                            : <Navigate to="/login" />
+                    }
+                />
+
             </Routes>
         </BrowserRouter>
     );
diff --git a/client/src/api/user.api.js b/client/src/api/user.api.js
index 645c920..a7fec1d 100644
--- a/client/src/api/user.api.js
+++ b/client/src/api/user.api.js
@@ -11,5 +11,10 @@ export const setProfileCover = async (backdrop) => {
         cover: backdrop
     });
 
+    return res.data;
+}
+
+export const searchUsers = async (query) => {
+    const res = await axiosInstance.get(`/user/search?q=${query}`);
     return res.data;
 }
\ No newline at end of file
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
index bc43600..6bb7349 100644
--- a/client/src/components/Navbar.jsx
+++ b/client/src/components/Navbar.jsx
@@ -1,4 +1,4 @@
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { useState } from "react";
 import useUserStore from "../store/userStore";
 import Modal from "./ui/Modal";
@@ -21,6 +21,12 @@ export default function Navbar() {
     return (userData.firstName[0] + (userData.lastName?.[0] || "")).toUpperCase();
   };
 
+  const navigate = useNavigate();
+
+  const handleSearch = (query) => {
+    navigate(`/search?q=${query}`);
+  };
+
   const isActive = (path) => location.pathname === path;
 
   return (
@@ -46,7 +52,7 @@ export default function Navbar() {
           </div>
 
           <div className="flex-1">
-            <SearchBar />
+            <SearchBar onSearch={handleSearch} />
           </div>
         </div>
 
@@ -138,8 +144,8 @@ function NavLink({ to, active, icon, label }) {
     <Link
       to={to}
       className={`flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest transition-all ${active
-          ? "bg-white text-amber-600 shadow-sm"
-          : "text-stone-400 hover:text-stone-900"
+        ? "bg-white text-amber-600 shadow-sm"
+        : "text-stone-400 hover:text-stone-900"
         }`}
     >
       {icon}
diff --git a/client/src/components/ui/SearchBar.jsx b/client/src/components/ui/SearchBar.jsx
index dd1f5ca..dbd684f 100644
--- a/client/src/components/ui/SearchBar.jsx
+++ b/client/src/components/ui/SearchBar.jsx
@@ -2,7 +2,10 @@ import { useState, useEffect, useRef } from "react";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { AnimatePresence, motion } from "framer-motion";
 
-export default function SearchBar({ placeholder = "Search..." }) {
+export default function SearchBar({
+    placeholder = "Search...",
+    onSearch
+}) {
     const [query, setQuery] = useState("");
     const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef(null);
@@ -46,6 +49,13 @@ export default function SearchBar({ placeholder = "Search..." }) {
                     onFocus={() => setIsFocused(true)}
                     onBlur={() => setIsFocused(false)}
                     onChange={(e) => setQuery(e.target.value)}
+                    onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                            const trimmed = query.trim();
+                            if (!trimmed) return;
+                            onSearch?.(trimmed);
+                        }
+                    }}
                     className="w-full bg-transparent border-none px-4 py-4 text-stone-800 placeholder-stone-400 focus:ring-0 text-sm md:text-base font-medium outline-none"
                 />
 
@@ -73,7 +83,10 @@ export default function SearchBar({ placeholder = "Search..." }) {
                     <motion.button
                         initial={{ opacity: 0, x: 10 }}
                         animate={{ opacity: 1, x: 0 }}
-                        onClick={() => setQuery("")}
+                        onClick={() => {
+                            setQuery("");
+                            onSearch?.("");
+                        }}
                         className="pr-4 text-xs font-bold text-amber-600 hover:text-amber-700 transition-colors"
                     >
                         Clear
diff --git a/client/src/pages/MoviesPage.jsx b/client/src/pages/MoviesPage.jsx
index 6e9da4f..d9d416b 100644
--- a/client/src/pages/MoviesPage.jsx
+++ b/client/src/pages/MoviesPage.jsx
@@ -7,20 +7,37 @@ import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 
 export default function MoviesPage() {
     const [loading, setLoading] = useState(true);
-    const [trendingMovies, setTrendingMovies] = useState([]);
-    const [topRatedMovies, setTopRatedMovies] = useState([]);
+
+    const [trendingMovies, setTrendingMovies] = useState(() => {
+        const cached = sessionStorage.getItem("trendingMovies");
+        return cached ? JSON.parse(cached) : [];
+    });
+
+    const [topRatedMovies, setTopRatedMovies] = useState(() => {
+        const cached = sessionStorage.getItem("topRatedMovies");
+        return cached ? JSON.parse(cached) : [];
+    });
+
     const [featuredMovie, setFeaturedMovie] = useState(null);
 
     useEffect(() => {
         const fetchData = async () => {
             try {
-                const trendingRes = await getTrendingMovies();
-                const movies = trendingRes.data || [];
-                setTrendingMovies(movies);
+                if (trendingMovies.length === 0) {
+                    const res = await getTrendingMovies();
+                    const movies = res.data || [];
+                    setTrendingMovies(movies);
+                    sessionStorage.setItem("trendingMovies", JSON.stringify(movies));
+                }
+
+                if (topRatedMovies.length === 0) {
+                    const res = await getTopRatedMovies();
+                    const movies = res.data || [];
+                    setTopRatedMovies(movies);
+                    sessionStorage.setItem("topRatedMovies", JSON.stringify(movies));
+                }
 
-                const topRatedRes = await getTopRatedMovies();
-                const topRatedMovies = topRatedRes.data || [];
-                setTopRatedMovies(topRatedMovies);
+                const movies = trendingMovies;
 
                 if (movies.length > 0) {
                     setFeaturedMovie(null);
@@ -146,7 +163,7 @@ function MovieSlider({ title, subtitle, movies }) {
             >
                 {movies.map((movie) => (
                     <div
-                        key={movie.id}
+                        key={movie._id}
                         className="min-w-40 sm:min-w-50 md:min-w-55 snap-start"
                     >
                         <MovieCard
diff --git a/client/src/pages/SearchResultPage.jsx b/client/src/pages/SearchResultPage.jsx
new file mode 100644
index 0000000..37a0b03
--- /dev/null
+++ b/client/src/pages/SearchResultPage.jsx
@@ -0,0 +1,164 @@
+import { useLocation, Link } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { MagnifyingGlassIcon, UserGroupIcon, FilmIcon } from "@heroicons/react/24/outline";
+
+import MovieCard from "../components/ui/MovieCard";
+import { searchUsers } from "../api/user.api";
+import Loader from "../components/ui/Loader";
+// import { searchMovies } from "../api/movie.api"; 
+
+export default function SearchResultPage() {
+    const [movies, setMovies] = useState([]);
+    const [users, setUsers] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [activeTab, setActiveTab] = useState("all"); // 'all' | 'movies' | 'users'
+
+    const location = useLocation();
+    const searchQuery = new URLSearchParams(location.search).get("q");
+
+    useEffect(() => {
+        const fetchResults = async () => {
+            if (!searchQuery) return;
+            setLoading(true);
+            try {
+                const [usersRes] = await Promise.all([
+                    searchUsers(searchQuery),
+                    // searchMovies(searchQuery),
+                ]);
+
+                setUsers(usersRes.users || []);
+                setMovies([]);
+            } catch (error) {
+                console.error("Search error:", error);
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchResults();
+    }, [searchQuery]);
+
+    if (loading) return <Loader
+    //  text={`Searching the archives for "${searchQuery}"`}
+      />;
+
+    return (
+        <div className="min-h-screen bg-stone-50 pt-28 pb-20">
+            <div className="max-w-7xl mx-auto px-6 md:px-12">
+                
+                {/* 1. SEARCH HEADER */}
+                <header className="mb-12">
+                    <div className="flex items-center gap-3 mb-4">
+                        <div className="h-[2px] w-8 bg-amber-500/40" />
+                        <h5 className="text-[10px] font-black uppercase tracking-[0.4em] text-stone-400">Search Results</h5>
+                    </div>
+                    <h1 className="text-4xl md:text-6xl font-black text-stone-900 tracking-tighter">
+                        Showing results for <span className="text-amber-600">"{searchQuery}"</span>
+                    </h1>
+
+                    {/* Filter Pills */}
+                    <div className="flex gap-2 mt-8">
+                        {["all", "movies", "users"].map((tab) => (
+                            <button
+                                key={tab}
+                                onClick={() => setActiveTab(tab)}
+                                className={`px-6 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${
+                                    activeTab === tab 
+                                    ? "bg-stone-900 text-white shadow-lg" 
+                                    : "bg-white border border-stone-200 text-stone-400 hover:text-stone-900"
+                                }`}
+                            >
+                                {tab}
+                            </button>
+                        ))}
+                    </div>
+                </header>
+
+                <main className="space-y-20">
+                    {/* 2. MOVIES SECTION */}
+                    {(activeTab === "all" || activeTab === "movies") && (
+                        <section>
+                            <SectionHeader title="Movies" count={movies.length} icon={<FilmIcon className="size-5" />} />
+                            {movies.length > 0 ? (
+                                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-8">
+                                    {movies.map((m) => (
+                                        <MovieCard key={m.id} title={m.title} poster={m.posterPath} rating={m.voteAverage} releaseDate={m.releaseDate} />
+                                    ))}
+                                </div>
+                            ) : (
+                                <EmptyResult message="No movies found matching your request." />
+                            )}
+                        </section>
+                    )}
+
+                    {/* 3. USERS SECTION */}
+                    {(activeTab === "all" || activeTab === "users") && (
+                        <section>
+                            <SectionHeader title="Community" count={users.length} icon={<UserGroupIcon className="size-5" />} />
+                            {users.length > 0 ? (
+                                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                                    {users.map((u) => (
+                                        <UserResultCard key={u._id} user={u} />
+                                    ))}
+                                </div>
+                            ) : (
+                                <EmptyResult message="No critics or members found with that name." />
+                            )}
+                        </section>
+                    )}
+                </main>
+            </div>
+        </div>
+    );
+}
+
+/** * UI SUB-COMPONENTS 
+ */
+
+function SectionHeader({ title, count, icon }) {
+    return (
+        <div className="flex items-center gap-4 mb-8 border-b border-stone-200 pb-4">
+            <div className="text-amber-600">{icon}</div>
+            <h2 className="text-2xl font-black tracking-tight text-stone-900">{title}</h2>
+            <span className="bg-stone-200 text-stone-600 text-[10px] font-black px-2 py-0.5 rounded-md">
+                {count}
+            </span>
+        </div>
+    );
+}
+
+function UserResultCard({ user }) {
+    return (
+        <Link to={`/user/${user._id}`}>
+            <motion.div 
+                whileHover={{ y: -4 }}
+                className="flex items-center gap-4 p-4 bg-white rounded-2xl border border-stone-100 shadow-sm hover:shadow-md transition-all group"
+            >
+                <img 
+                    src={user.pfp} 
+                    className="w-14 h-14 rounded-xl object-cover grayscale group-hover:grayscale-0 transition-all duration-500" 
+                    alt={user.firstName}
+                />
+                <div className="flex-1">
+                    <h4 className="font-black text-stone-900 tracking-tight">
+                        {user.firstName} {user.lastName}
+                    </h4>
+                    <p className="text-[10px] font-bold text-stone-400 uppercase tracking-widest mt-0.5">
+                        {user.followersCount || 0} Followers
+                    </p>
+                </div>
+                <div className="w-8 h-8 rounded-lg bg-stone-50 flex items-center justify-center text-stone-300 group-hover:bg-amber-50 group-hover:text-amber-600 transition-colors">
+                    <MagnifyingGlassIcon className="size-4" />
+                </div>
+            </motion.div>
+        </Link>
+    );
+}
+
+function EmptyResult({ message }) {
+    return (
+        <div className="py-12 px-8 rounded-3xl border-2 border-dashed border-stone-200 text-center">
+            <p className="text-stone-400 font-serif italic">{message}</p>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/server/controllers/user.controller.js b/server/controllers/user.controller.js
index bf5f80e..8f1c727 100644
--- a/server/controllers/user.controller.js
+++ b/server/controllers/user.controller.js
@@ -22,7 +22,7 @@ export const getUserMe = async (req, res) => {
         }
 
         res.status(200).json({ success: true, user });
-        
+
     } catch (error) {
         console.error("getUserMe controller error:", error);
         res.status(500).json({
@@ -80,4 +80,29 @@ export const getUser = async (req, res) => {
         console.error(error);
         res.status(500).json({ success: false, error: "Server error" });
     }
-} 
\ No newline at end of file
+}
+
+export const searchUsers = async (req, res) => {
+    try {
+        const query = req.query.q;
+
+        if (!query || query.trim() === "") {
+            return res.status(400).json({ success: false, error: "Query parameter 'q' is required" });
+        }
+
+        const regex = new RegExp(query, 'i');
+        const users = await User.find({
+            $or: [
+                { firstName: regex },
+                { lastName: regex },
+                { about: regex }
+            ]
+        }).select('-password');
+
+        res.status(200).json({ success: true, users });
+
+    } catch (error) {
+        console.error(error);
+        res.status(500).json({ success: false, error: "Server error" });
+    }
+}
\ No newline at end of file
diff --git a/server/routes/user.route.js b/server/routes/user.route.js
index b6a287a..65fc621 100644
--- a/server/routes/user.route.js
+++ b/server/routes/user.route.js
@@ -1,7 +1,7 @@
 import { Router } from "express";
 
 import authorize from "../middlewares/auth.middleware.js";
-import { getUserMe, editProfile, getUser } from "../controllers/user.controller.js";
+import { getUserMe, editProfile, getUser, searchUsers } from "../controllers/user.controller.js";
 
 const userRouter = Router();
 
@@ -9,6 +9,8 @@ userRouter.get('/me', authorize, getUserMe);
 
 userRouter.put('/me', authorize, editProfile);
 
+userRouter.get('/search', authorize, searchUsers);
+
 userRouter.get('/:userId', authorize, getUser);
 
 export default userRouter;
\ No newline at end of file