diff --git a/js/learnings/.gitignore b/js/learnings/.gitignore
index 4d29575..532eddc 100644
--- a/js/learnings/.gitignore
+++ b/js/learnings/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env
\ No newline at end of file
diff --git a/js/learnings/package-lock.json b/js/learnings/package-lock.json
index b8bbd65..ba46716 100644
--- a/js/learnings/package-lock.json
+++ b/js/learnings/package-lock.json
@@ -14,7 +14,10 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
+        "react-redux": "^9.0.5",
+        "react-router-dom": "5.3.4",
         "react-scripts": "5.0.1",
+        "redux": "^5.0.0",
         "web-vitals": "^2.1.4"
       }
     },
@@ -3873,6 +3876,12 @@
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
       "license": "MIT"
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -8821,6 +8830,35 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -13899,6 +13937,29 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "license": "MIT"
     },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -13908,6 +13969,65 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
+      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
+      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.3.4",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/react-router/node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-router/node_modules/path-to-regexp": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz",
+      "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==",
+      "license": "MIT",
+      "dependencies": {
+        "isarray": "0.0.1"
+      }
+    },
+    "node_modules/react-router/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -14041,6 +14161,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -14247,6 +14373,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==",
+      "license": "MIT"
+    },
     "node_modules/resolve-url-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -16074,6 +16206,18 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "license": "MIT"
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+      "license": "MIT"
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -16517,6 +16661,15 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -16582,6 +16735,12 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "license": "MIT"
     },
+    "node_modules/value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==",
+      "license": "MIT"
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/js/learnings/package.json b/js/learnings/package.json
index 18d2200..df1f096 100644
--- a/js/learnings/package.json
+++ b/js/learnings/package.json
@@ -10,7 +10,10 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "react-router-dom": "5.3.4",
+    "web-vitals": "^2.1.4",
+    "redux": "^5.0.0",
+    "react-redux": "^9.0.5"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -36,4 +39,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/js/learnings/public/index.html b/js/learnings/public/index.html
index 4e3afa6..a25d574 100644
--- a/js/learnings/public/index.html
+++ b/js/learnings/public/index.html
@@ -28,13 +28,6 @@
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
-
-  <div
-    style="height: 100vh; width: 100vw; background-color: red; display: flex; justify-content: center; align-items: center;">
-    <div
-      style="height: 10vh; width: 10vw; background-color: blue; display: flex; justify-content: center; align-items: center;">
-      child </div>
-  </div>
   <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/js/learnings/src/App.js b/js/learnings/src/App.js
index 7f63d62..0ede663 100644
--- a/js/learnings/src/App.js
+++ b/js/learnings/src/App.js
@@ -1,11 +1,40 @@
-import logo from './logo.svg';
 import './App.css';
-import Counter from "./Counter"
-import Movies from './Movies';
+import { BrowserRouter, Route, Switch } from "react-router-dom"
+import DetailsPage from './Pages/DetailsPage';
+import HomePage from './Pages/HomePage';
+import NotFoundPage from './Pages/NotFoundPage';
+import { useState } from 'react';
+import { MovieContext } from './Context/MovieContext';
+import WatchListPage from './Pages/WatchListPage';
+import NavBar from './NavBar';
 
 function App() {
+  const [watchList, setWatchList] = useState(localStorage.getItem("watchList") ? JSON.parse(localStorage.getItem("watchList")) : []);
+  console.log("watchList", watchList)
+  function addToWatchList(movie) {
+    setWatchList(prevList => [...prevList, movie.id]);
+    localStorage.setItem("watchList", JSON.stringify([...watchList, movie.id]));
+  }
+
+  function removeFromWatchList(movie) {
+    setWatchList(prevList => prevList.filter(m => m !== movie.id));
+    localStorage.setItem("watchList", JSON.stringify(watchList.filter(m => m !== movie.id)));
+  }
+
   return (
-    <Movies />
+    <BrowserRouter>
+      <MovieContext.Provider value={{ watchList, addToWatchList, removeFromWatchList }}>
+        <NavBar />
+        <Switch>
+          <Route path="/" exact={true} component={HomePage} />
+          {/* render gives you ability to pass props, we made prop drilling better with context*/}
+          {/* <Route path="/" exact={true} render={() => <HomePage watchList={watchList} addToWatchList={addToWatchList} removeFromWatchList={removeFromWatchList} />} /> */}
+          <Route path="/details/:id" exact={true} render={() => <DetailsPage />} />
+          <Route path="/watchlist" exact={true} render={() => <WatchListPage />} />
+          <Route component={NotFoundPage} />
+        </Switch>
+      </MovieContext.Provider>
+    </BrowserRouter>
   );
 }
 
diff --git a/js/learnings/src/Banner/Banner.css b/js/learnings/src/Banner/Banner.css
new file mode 100644
index 0000000..4dcb5c9
--- /dev/null
+++ b/js/learnings/src/Banner/Banner.css
@@ -0,0 +1,28 @@
+.banner {
+    position: relative;
+    color: white;
+}
+
+.film-poster {
+    img {
+        width: 100%;
+        height: 400px;
+        border-radius: 10px;
+        object-fit: cover;
+    }
+}
+
+.film-details {
+    padding: 20px;
+    color: black;
+    color: white;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 100%;
+
+
+}
\ No newline at end of file
diff --git a/js/learnings/src/Banner/Banner.js b/js/learnings/src/Banner/Banner.js
new file mode 100644
index 0000000..f3f780c
--- /dev/null
+++ b/js/learnings/src/Banner/Banner.js
@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+import './Banner.css';
+
+function Banner() {
+    const [film, setFilm] = useState(null);
+
+    useEffect(() => {
+        fetch(`https://api.themoviedb.org/3/trending/movie/week?language=en-US&api_key=${process.env.REACT_APP_API_KEY}`)
+            .then(response => response.json())
+            .then(data => {
+                let id = Math.floor(Math.random() * data.results.length);
+                setFilm(data.results[id]);
+                console.log(film); // this gives no result as film is not set just after setFilm it gets set after the re-render.
+            })
+            .catch(error => console.error(error));
+    }, []);
+    console.log(film);
+
+
+    return (
+        <div className="banner">
+            <h1>Welcome to Movie App</h1>
+            {film && (
+                <>
+                    <div className="film-poster">
+                        <img src={`https://image.tmdb.org/t/p/original${film.backdrop_path}`} alt={film.title} />
+                    </div>
+                    <div className="film-details">
+                        <h2>{film.title}</h2>
+                        <p>{film.overview}</p>
+                    </div>
+                </>
+            )}
+        </div>
+    );
+}
+export default Banner;
\ No newline at end of file
diff --git a/js/learnings/src/Banner/index.js b/js/learnings/src/Banner/index.js
new file mode 100644
index 0000000..b927b80
--- /dev/null
+++ b/js/learnings/src/Banner/index.js
@@ -0,0 +1 @@
+export { default } from './Banner';
diff --git a/js/learnings/src/Callbacks/Callbacks.js b/js/learnings/src/Callbacks/Callbacks.js
new file mode 100644
index 0000000..4be8532
--- /dev/null
+++ b/js/learnings/src/Callbacks/Callbacks.js
@@ -0,0 +1,9 @@
+
+
+function Callbacks() {
+    return (
+        <></>
+    )
+}
+
+export default Callbacks;
\ No newline at end of file
diff --git a/js/learnings/src/Callbacks/index.js b/js/learnings/src/Callbacks/index.js
new file mode 100644
index 0000000..90b6e4b
--- /dev/null
+++ b/js/learnings/src/Callbacks/index.js
@@ -0,0 +1 @@
+export { default } from './Callbacks';
\ No newline at end of file
diff --git a/js/learnings/src/Card/Card.css b/js/learnings/src/Card/Card.css
new file mode 100644
index 0000000..aae0b90
--- /dev/null
+++ b/js/learnings/src/Card/Card.css
@@ -0,0 +1,7 @@
+.card {
+    img {
+        width: 200px;
+        height: 300px;
+        border-radius: 10px;
+    }
+}
\ No newline at end of file
diff --git a/js/learnings/src/Card/Card.jsx b/js/learnings/src/Card/Card.jsx
new file mode 100644
index 0000000..aa7ee3f
--- /dev/null
+++ b/js/learnings/src/Card/Card.jsx
@@ -0,0 +1,17 @@
+import "./Card.css";
+
+
+function Card({ member }) {
+    return (
+        <div className="card">
+            <div className="card-image">
+                <img src={`https://image.tmdb.org/t/p/original/${member.profile_path}`} alt={member.name} />
+            </div>
+            <div className="card-header">{member.name}</div>
+            <div className="card-character">{member.character}</div>
+            {/* Additional member details can be displayed here */}
+        </div>
+    );
+}
+
+export default Card;
\ No newline at end of file
diff --git a/js/learnings/src/Card/index.js b/js/learnings/src/Card/index.js
new file mode 100644
index 0000000..6e2872d
--- /dev/null
+++ b/js/learnings/src/Card/index.js
@@ -0,0 +1 @@
+export { default } from './Card';
\ No newline at end of file
diff --git a/js/learnings/src/Cast/Cast.css b/js/learnings/src/Cast/Cast.css
new file mode 100644
index 0000000..bfab5a3
--- /dev/null
+++ b/js/learnings/src/Cast/Cast.css
@@ -0,0 +1,5 @@
+.cast {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+}
\ No newline at end of file
diff --git a/js/learnings/src/Cast/Cast.jsx b/js/learnings/src/Cast/Cast.jsx
new file mode 100644
index 0000000..88826d8
--- /dev/null
+++ b/js/learnings/src/Cast/Cast.jsx
@@ -0,0 +1,16 @@
+import Card from "../Card";
+import "./Cast.css";
+
+function Cast({ cast }) {
+    return (
+        <div className="cast">
+            {cast.map(member => (
+                <>
+                    <Card key={member.id} member={member} />
+                </>
+            ))}
+        </div>
+    );
+}
+
+export default Cast;
\ No newline at end of file
diff --git a/js/learnings/src/Cast/index.js b/js/learnings/src/Cast/index.js
new file mode 100644
index 0000000..0c93bca
--- /dev/null
+++ b/js/learnings/src/Cast/index.js
@@ -0,0 +1 @@
+export { default } from './Cast';
\ No newline at end of file
diff --git a/js/learnings/src/Context/MovieContext.js b/js/learnings/src/Context/MovieContext.js
new file mode 100644
index 0000000..95a49a0
--- /dev/null
+++ b/js/learnings/src/Context/MovieContext.js
@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+export const MovieContext = createContext({
+    watchList: [],
+    addToWatchList: () => { },
+    removeFromWatchList: () => { }
+});
\ No newline at end of file
diff --git a/js/learnings/src/Details/Details.css b/js/learnings/src/Details/Details.css
new file mode 100644
index 0000000..e69de29
diff --git a/js/learnings/src/Details/Details.jsx b/js/learnings/src/Details/Details.jsx
new file mode 100644
index 0000000..f81f615
--- /dev/null
+++ b/js/learnings/src/Details/Details.jsx
@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import Cast from "../Cast";
+import DetailsBanner from "../DetailsBanner";
+
+function Details() {
+    const [details, setDetails] = useState(null);
+    const { id } = useParams();
+
+    useEffect(() => {
+        // Fetch movie details using the movie ID
+        fetch(`https://api.themoviedb.org/3/movie/${id}?language=en-US&api_key=${process.env.REACT_APP_API_KEY}&append_to_response=credits,videos`)
+            .then(response => response.json())
+            .then(data => {
+                // Handle movie details data
+                console.log("DATA", data);
+                setDetails(data);
+            })
+            .catch(error => console.error(error));
+    }, [id]);
+    return (
+        <div>
+            {details && <DetailsBanner details={details} />}
+            {details && <Cast cast={details?.credits?.cast} />}
+        </div>
+    );
+}
+
+export default Details;
diff --git a/js/learnings/src/Details/index.js b/js/learnings/src/Details/index.js
new file mode 100644
index 0000000..8344cc9
--- /dev/null
+++ b/js/learnings/src/Details/index.js
@@ -0,0 +1,2 @@
+export { default } from './Details';
+
diff --git a/js/learnings/src/DetailsBanner/DetailsBanner.css b/js/learnings/src/DetailsBanner/DetailsBanner.css
new file mode 100644
index 0000000..b3761cf
--- /dev/null
+++ b/js/learnings/src/DetailsBanner/DetailsBanner.css
@@ -0,0 +1,30 @@
+.details-banner-content {
+    color: white;
+    padding: 20px;
+    position: absolute;
+    z-index: 1;
+    top: 100%;
+    left: 50%;
+    transform: translate(-50%, -100%);
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 100%;
+}
+
+.details-banner {
+    position: relative;
+    color: white;
+
+    img {
+        width: 100%;
+        height: 400px;
+        object-fit: cover;
+    }
+
+    a {
+        color: white;
+        text-decoration: none;
+        background-color: rgba(255, 0, 0, 0.9);
+        padding: 5px 10px;
+        border-radius: 5px;
+    }
+}
\ No newline at end of file
diff --git a/js/learnings/src/DetailsBanner/DetailsBanner.jsx b/js/learnings/src/DetailsBanner/DetailsBanner.jsx
new file mode 100644
index 0000000..c27d2c3
--- /dev/null
+++ b/js/learnings/src/DetailsBanner/DetailsBanner.jsx
@@ -0,0 +1,18 @@
+
+import "./DetailsBanner.css";
+function DetailsBanner({ details: movie }) {
+
+    const baseUrl = "https://image.tmdb.org/t/p/original";
+    return (
+        <div className="details-banner">
+            <img src={`${baseUrl}${movie.backdrop_path}`} alt={movie.title} />
+            <div className="details-banner-content">
+                <h1>{movie.title}</h1>
+                <p>{movie.overview}</p>
+                {movie && <a href={`https://www.youtube.com/watch?v=${movie.videos.results[1].key}`} target="_blank" rel="noopener noreferrer">Watch trailer</a>}
+            </div>
+        </div>
+    );
+}
+
+export default DetailsBanner;
\ No newline at end of file
diff --git a/js/learnings/src/DetailsBanner/index.js b/js/learnings/src/DetailsBanner/index.js
new file mode 100644
index 0000000..25f7061
--- /dev/null
+++ b/js/learnings/src/DetailsBanner/index.js
@@ -0,0 +1 @@
+export { default } from './DetailsBanner';
diff --git a/js/learnings/src/MovieCard/MovieCard.css b/js/learnings/src/MovieCard/MovieCard.css
index 65bcfd1..edbcb94 100644
--- a/js/learnings/src/MovieCard/MovieCard.css
+++ b/js/learnings/src/MovieCard/MovieCard.css
@@ -4,7 +4,7 @@
     position: relative;
 }
 
-.movie-card-image img{
+.movie-card-image img {
     width: 300px;
     height: 200px;
 }
@@ -22,3 +22,43 @@
     justify-content: center;
     transform: translate(-50%, -50%);
 }
+
+.movie-card-actions {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    a {
+        color: white;
+        text-decoration: none;
+        background-color: blue;
+        padding: 5px;
+        border-radius: 10000000000000px;
+        margin-bottom: 5px;
+    }
+
+}
+
+
+.movie-card-footer {
+    position: absolute;
+    bottom: 0px;
+    left: 50%;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transform: translateX(-50%);
+    padding: 0px 10px;
+
+    button {
+        color: white;
+        cursor: pointer;
+        background-color: red;
+        border: none;
+        border-radius: 3px;
+        padding: 5px;
+        font-weight: bold;
+    }
+
+}
\ No newline at end of file
diff --git a/js/learnings/src/MovieCard/MovieCard.jsx b/js/learnings/src/MovieCard/MovieCard.jsx
index 38d3eb0..7fd2924 100644
--- a/js/learnings/src/MovieCard/MovieCard.jsx
+++ b/js/learnings/src/MovieCard/MovieCard.jsx
@@ -1,18 +1,57 @@
 import "./MovieCard.css";
 
+import { Link } from "react-router-dom";
+import { MovieContext } from "../Context/MovieContext";
+import { useContext } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
 function MovieCard({ movie }) {
 
+    const dispatch = useDispatch();
+    const watchList = useSelector(state => state.watchList);
+
+    // const { watchList, addToWatchList, removeFromWatchList } = useContext(MovieContext);
+
     const baseUrl = "https://image.tmdb.org/t/p/original";
     const posterUrl = `${baseUrl}${movie.backdrop_path}`;
 
+    function doesContain() {
+        return watchList.includes(movie.id);
+    }
+
+    function handleAddToWatchList() {
+        // removeFromWatchList(movie)
+        dispatch({ type: 'ADD_TO_WATCHLIST', payload: movie });
+    }
+
+    function handleRemoveFromWatchList() {
+        // addToWatchList(movie)
+        console.log("movie", watchList);
+
+        dispatch({ type: 'REMOVE_FROM_WATCHLIST', payload: movie });
+    }
 
     return (
         <div className="movie-card" >
             <div className="movie-card-image">
                 <img src={posterUrl} alt={movie.title} />
             </div>
+
             <div className="movie-card-content">
-            <h2>{movie.title}</h2>
+                <h2>{movie.title}</h2>
+
+            </div>
+            <div className="movie-card-footer">
+                <div className="movie-card-actions">
+                    {/* <a href={`/details/${movie.id}`}>i-href</a> */}
+                    <Link to={`/details/${movie.id}`}>i</Link>
+                </div>
+                {doesContain() ? (
+                    <button onClick={handleRemoveFromWatchList}>Remove from Watchlist</button>
+                ) : (
+                    <button onClick={handleAddToWatchList}>Add to Watchlist</button>
+                )}
+
             </div>
         </div>
     );
diff --git a/js/learnings/src/Movies/Movies.jsx b/js/learnings/src/Movies/Movies.jsx
index 56e517f..1914026 100644
--- a/js/learnings/src/Movies/Movies.jsx
+++ b/js/learnings/src/Movies/Movies.jsx
@@ -2,30 +2,45 @@
 import { useEffect, useState } from 'react';
 import MovieCard from '../MovieCard';
 import "./Movies.css";
+import Pagination from '../Pagination';
+import { memo } from 'react';
 
 function Movies() {
     const [movies, setMovies] = useState([]);
+    const [pageNo, setPageNo] = useState(1);
 
     useEffect(() => {
-        fetch("https://api.themoviedb.org/3/trending/movie/week?language=en-US&api_key=135f939e0c7197a54788410a99af6f0b")
+        fetch(`https://api.themoviedb.org/3/trending/movie/week?language=en-US&api_key=${process.env.REACT_APP_API_KEY}&page=${pageNo}`)
             .then(response => response.json())
             .then(data => setMovies(data.results))
             .catch(error => console.error(error));
-    }, []);
+    }, [pageNo]);
     console.log(movies);
 
+    const handleNextPage = () => {
+        if (pageNo >= 500) return;
+        setPageNo(prev => prev + 1);
+    }
+
+    const handlePreviousPage = () => {
+        if (pageNo <= 1) return;
+        setPageNo(prev => prev - 1);
+    }
 
     return (
         <div>
             <h1>Trending Movies</h1>
             <div className="movies-container">
-            {movies.map(movie => (
-                <MovieCard key={movie.id} movie={movie} />
-            ))}
+                {movies.map(movie => (
+                    <MovieCard key={movie.id} movie={movie} />
+                ))}
             </div>
+            <Pagination pageNumber={pageNo}
+                nextPageFunc={handleNextPage}
+                previousPageFunc={handlePreviousPage} />
         </div>
     );
 }
 
 
-export default Movies;
\ No newline at end of file
+export default memo(Movies);
\ No newline at end of file
diff --git a/js/learnings/src/NavBar/NavBar.css b/js/learnings/src/NavBar/NavBar.css
new file mode 100644
index 0000000..e8bccbc
--- /dev/null
+++ b/js/learnings/src/NavBar/NavBar.css
@@ -0,0 +1,23 @@
+.navbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    background-color: #f8f8f8;
+    border-bottom: 1px solid #eee;
+    font-weight: bold;
+    font-size: x-large;
+}
+
+.navbar-item {
+    text-decoration: none;
+    color: #333;
+}
+
+.navbar-item:hover {
+    color: #FF0000;
+}
+
+.navbar-logo {
+    width: 50px;
+    height: 100px;
+}
\ No newline at end of file
diff --git a/js/learnings/src/NavBar/NavBar.jsx b/js/learnings/src/NavBar/NavBar.jsx
new file mode 100644
index 0000000..82bd11d
--- /dev/null
+++ b/js/learnings/src/NavBar/NavBar.jsx
@@ -0,0 +1,21 @@
+import { Link } from "react-router-dom/cjs/react-router-dom.min";
+import { ReactComponent as Logo } from "../assets/Watch Movie Icon.svg"
+import "./NavBar.css"
+
+
+
+function NavBar() {
+    return (
+        <nav>
+            <div className="navbar">
+                <Link className="navbar-item" to="/"><Logo className="navbar-logo" fill="#FF0000" /></Link>
+
+                <Link className="navbar-item" to="/">Movies</Link>
+                <Link className="navbar-item" to="/watchlist">Watchlist</Link>
+            </div>
+
+        </nav >
+    );
+}
+
+export default NavBar;
\ No newline at end of file
diff --git a/js/learnings/src/NavBar/index.js b/js/learnings/src/NavBar/index.js
new file mode 100644
index 0000000..3ab07fb
--- /dev/null
+++ b/js/learnings/src/NavBar/index.js
@@ -0,0 +1 @@
+export { default } from "./NavBar";
diff --git a/js/learnings/src/Pages/DetailsPage/DetailsPage.jsx b/js/learnings/src/Pages/DetailsPage/DetailsPage.jsx
new file mode 100644
index 0000000..42e315b
--- /dev/null
+++ b/js/learnings/src/Pages/DetailsPage/DetailsPage.jsx
@@ -0,0 +1,14 @@
+import Details from "../../Details";
+import DetailsBanner from "../../DetailsBanner";
+import Cast from "../../Cast";
+
+function DetailsPage() {
+    return (
+        <div>
+            <h1>Movie Details</h1>
+            <Details />
+        </div>
+    );
+}
+
+export default DetailsPage;
\ No newline at end of file
diff --git a/js/learnings/src/Pages/DetailsPage/index.js b/js/learnings/src/Pages/DetailsPage/index.js
new file mode 100644
index 0000000..deae690
--- /dev/null
+++ b/js/learnings/src/Pages/DetailsPage/index.js
@@ -0,0 +1 @@
+export { default } from './DetailsPage';
diff --git a/js/learnings/src/Pages/HomePage/HomePage.jsx b/js/learnings/src/Pages/HomePage/HomePage.jsx
new file mode 100644
index 0000000..514b4e1
--- /dev/null
+++ b/js/learnings/src/Pages/HomePage/HomePage.jsx
@@ -0,0 +1,14 @@
+import Banner from "../../Banner";
+import Movies from "../../Movies";
+
+function HomePage() {
+    return (
+        <div>
+            <h1>Home Page</h1>
+            <Banner />
+            <Movies />
+        </div>
+    );
+}
+
+export default HomePage;
\ No newline at end of file
diff --git a/js/learnings/src/Pages/HomePage/index.js b/js/learnings/src/Pages/HomePage/index.js
new file mode 100644
index 0000000..bf97a3e
--- /dev/null
+++ b/js/learnings/src/Pages/HomePage/index.js
@@ -0,0 +1 @@
+export { default } from './HomePage';
diff --git a/js/learnings/src/Pages/NotFoundPage/NotFoundPage.jsx b/js/learnings/src/Pages/NotFoundPage/NotFoundPage.jsx
new file mode 100644
index 0000000..82ac302
--- /dev/null
+++ b/js/learnings/src/Pages/NotFoundPage/NotFoundPage.jsx
@@ -0,0 +1,10 @@
+function NotFoundPage() {
+    return (
+        <div>
+            <h1>404 - Not Found</h1>
+            You seem lost. The page you are looking for does not exist.
+        </div>
+    );
+}
+
+export default NotFoundPage;
diff --git a/js/learnings/src/Pages/NotFoundPage/index.js b/js/learnings/src/Pages/NotFoundPage/index.js
new file mode 100644
index 0000000..35f02dc
--- /dev/null
+++ b/js/learnings/src/Pages/NotFoundPage/index.js
@@ -0,0 +1 @@
+export { default } from './NotFoundPage';
diff --git a/js/learnings/src/Pages/WatchListPage/WatchListPage.jsx b/js/learnings/src/Pages/WatchListPage/WatchListPage.jsx
new file mode 100644
index 0000000..d660e01
--- /dev/null
+++ b/js/learnings/src/Pages/WatchListPage/WatchListPage.jsx
@@ -0,0 +1,12 @@
+import WatchList from "../../WatchList";
+
+function WatchListPage() {
+    return (
+        <div>
+            <h1>My Watch List</h1>
+            <WatchList />
+        </div>
+    );
+}
+
+export default WatchListPage;
\ No newline at end of file
diff --git a/js/learnings/src/Pages/WatchListPage/index.js b/js/learnings/src/Pages/WatchListPage/index.js
new file mode 100644
index 0000000..192e136
--- /dev/null
+++ b/js/learnings/src/Pages/WatchListPage/index.js
@@ -0,0 +1 @@
+export { default } from './WatchListPage';
\ No newline at end of file
diff --git a/js/learnings/src/Pagination/Pagination.css b/js/learnings/src/Pagination/Pagination.css
new file mode 100644
index 0000000..8e3f2d4
--- /dev/null
+++ b/js/learnings/src/Pagination/Pagination.css
@@ -0,0 +1,22 @@
+.pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 20px 0;
+}
+
+.pagination button {
+    margin: 0 10px;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    background-color: #007bff;
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.pagination button:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+}
\ No newline at end of file
diff --git a/js/learnings/src/Pagination/Pagination.jsx b/js/learnings/src/Pagination/Pagination.jsx
new file mode 100644
index 0000000..ea0d6b7
--- /dev/null
+++ b/js/learnings/src/Pagination/Pagination.jsx
@@ -0,0 +1,14 @@
+import "./Pagination.css";
+
+
+function Pagination({ pageNumber, nextPageFunc, previousPageFunc }) {
+    return (
+        <div className="pagination">
+            <button className="pagination-previous" onClick={previousPageFunc}>Previous</button>
+            <div>{pageNumber}</div>
+            <button className="pagination-next" onClick={nextPageFunc}>Next</button>
+        </div>
+    )
+}
+
+export default Pagination;
\ No newline at end of file
diff --git a/js/learnings/src/Pagination/index.js b/js/learnings/src/Pagination/index.js
new file mode 100644
index 0000000..29c341d
--- /dev/null
+++ b/js/learnings/src/Pagination/index.js
@@ -0,0 +1 @@
+export { default } from './Pagination';
\ No newline at end of file
diff --git a/js/learnings/src/WatchList/WatchList.jsx b/js/learnings/src/WatchList/WatchList.jsx
new file mode 100644
index 0000000..4dac044
--- /dev/null
+++ b/js/learnings/src/WatchList/WatchList.jsx
@@ -0,0 +1,79 @@
+import { useContext, useEffect, useState } from "react";
+
+import { MovieContext } from "../Context/MovieContext";
+import WatchListCard from "../WatchListCard";
+import { useSelector, useDispatch } from "react-redux";
+
+
+function WatchList() {
+    const [search, setSearch] = useState("");
+    const dispatch = useDispatch();
+    const watchList = useSelector(state => state.watchList);
+    // const { watchList, removeFromWatchList } = useContext(MovieContext);
+    const [details, setDetails] = useState([]);
+
+    // below renders twice as react mounts twice in dev mode to check side effects
+    // useEffect(() => {
+    //     setDetails([]);
+    //     watchList.forEach(id => {
+    //         fetch(`https://api.themoviedb.org/3/movie/${id}?language=en-US&api_key=${process.env.REACT_APP_API_KEY}&append_to_response=credits,videos`)
+    //             .then(response => response.json())
+    //             .then(data => {
+    //                 // Handle movie details data
+    //                 setDetails(prevDetails => [...prevDetails, data]);
+    //             })
+    //             .catch(error => console.error(error));
+    //     });
+    // }, [watchList]);
+
+    useEffect(() => {
+        const controller = new AbortController();
+        const signal = controller.signal;
+        const uniqueIds = [...new Set(watchList)];
+
+        Promise.all(
+            uniqueIds.map(id =>
+                fetch(`https://api.themoviedb.org/3/movie/${id}?language=en-US&api_key=${process.env.REACT_APP_API_KEY}&append_to_response=credits,videos`, { signal })
+                    .then(res => res.json())
+            )
+        )
+            .then(data => !signal.aborted && setDetails(data))
+            .catch(err => {
+                if (err.name !== "AbortError") console.error(err);
+            });
+
+        return () => controller.abort();
+    }, [watchList]);
+
+    function handleSortAscending() {
+        const sorted = [...details].sort((a, b) => a.vote_average - b.vote_average);
+        setDetails(sorted);
+    }
+
+    function handleSortDescending() {
+        const sorted = [...details].sort((a, b) => b.vote_average - a.vote_average);
+        setDetails(sorted);
+    }
+
+    return (
+        <div>
+            <input
+                type="text"
+                placeholder="Search..."
+                value={search}
+                onChange={e => setSearch(e.target.value)}
+            />
+            <div className="watchlist-sort-buttons">
+                <button onClick={handleSortAscending}>Sort Ascending</button>
+                <button onClick={handleSortDescending}>Sort Descending</button>
+            </div>
+            {details
+                .filter(movie => movie.original_title.toLowerCase().includes(search.toLowerCase()))
+                .map(movie => (
+                    <WatchListCard key={movie.id} movie={movie} removeFromWatchList={() => dispatch({ type: 'REMOVE_FROM_WATCHLIST', payload: movie })} />
+                ))}
+        </div>
+    );
+}
+
+export default WatchList;
\ No newline at end of file
diff --git a/js/learnings/src/WatchList/index.js b/js/learnings/src/WatchList/index.js
new file mode 100644
index 0000000..620caed
--- /dev/null
+++ b/js/learnings/src/WatchList/index.js
@@ -0,0 +1 @@
+export { default } from './WatchList';
\ No newline at end of file
diff --git a/js/learnings/src/WatchListCard/WatchListCard.css b/js/learnings/src/WatchListCard/WatchListCard.css
new file mode 100644
index 0000000..660b1b6
--- /dev/null
+++ b/js/learnings/src/WatchListCard/WatchListCard.css
@@ -0,0 +1,46 @@
+.watchlist-card {
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 16px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.poster-container {
+    flex-shrink: 0;
+    width: 100px;
+    height: 150px;
+    overflow: hidden;
+    border-radius: 4px;
+}
+
+.poster-container img {
+    width: 100%;
+    height: auto;
+}
+
+h2 {
+    font-size: 1.5rem;
+    margin: 8px 0;
+}
+
+.rating {
+    font-size: 1rem;
+    color: #666;
+}
+
+.remove-button {
+    background-color: #FF0000;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 8px 12px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.remove-button:hover {
+    background-color: darkred;
+}
\ No newline at end of file
diff --git a/js/learnings/src/WatchListCard/WatchListCard.jsx b/js/learnings/src/WatchListCard/WatchListCard.jsx
new file mode 100644
index 0000000..57d4223
--- /dev/null
+++ b/js/learnings/src/WatchListCard/WatchListCard.jsx
@@ -0,0 +1,17 @@
+
+import "./WatchListCard.css";
+
+function WatchListCard({ movie, removeFromWatchList }) {
+
+    return (
+        <div className="watchlist-card">
+            <div className="poster-container">
+                <img src={`https://image.tmdb.org/t/p/original/${movie?.poster_path}`} alt={movie?.title} />
+            </div>
+            <h2>{movie?.original_title}</h2>
+            <div className="rating">{movie?.vote_average}</div>
+            <button className="remove-button" onClick={() => removeFromWatchList(movie)}>Delete</button>
+        </div>
+    );
+}
+export default WatchListCard;
\ No newline at end of file
diff --git a/js/learnings/src/WatchListCard/index.js b/js/learnings/src/WatchListCard/index.js
new file mode 100644
index 0000000..e63d3ea
--- /dev/null
+++ b/js/learnings/src/WatchListCard/index.js
@@ -0,0 +1 @@
+export { default } from './WatchListCard';
\ No newline at end of file
diff --git a/js/learnings/src/assets/Clapperboard Movie Icon.png b/js/learnings/src/assets/Clapperboard Movie Icon.png
new file mode 100644
index 0000000..b0dc53f
Binary files /dev/null and b/js/learnings/src/assets/Clapperboard Movie Icon.png differ
diff --git a/js/learnings/src/assets/Watch Movie Icon.svg b/js/learnings/src/assets/Watch Movie Icon.svg
new file mode 100644
index 0000000..2ecaac0
--- /dev/null
+++ b/js/learnings/src/assets/Watch Movie Icon.svg	
@@ -0,0 +1,8 @@
+<svg id="svg" fill="#000000" stroke="#000000" width="200px" height="200px" version="1.1" viewBox="144 144 512 512" xmlns="http://www.w3.org/2000/svg">
+    <g id="IconSvg_bgCarrier" stroke-width="0"></g>
+    <g id="IconSvg_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC"></g>
+     <g id="IconSvg_iconCarrier">
+      <path xmlns="http://www.w3.org/2000/svg" d="m620.41 163.84h-440.83c-4.1758 0-8.1797 1.6602-11.133 4.6133s-4.6133 6.957-4.6133 11.133v440.83c0 4.1758 1.6602 8.1797 4.6133 11.133s6.957 4.6133 11.133 4.6133h440.83c4.1758 0 8.1797-1.6602 11.133-4.6133s4.6133-6.957 4.6133-11.133v-440.83c0-4.1758-1.6602-8.1797-4.6133-11.133s-6.957-4.6133-11.133-4.6133zm-393.6 440.84h-31.488v-31.488h31.488zm0-62.977h-31.488v-31.488h31.488zm0-62.977h-31.488v-31.488h31.488zm0-62.977h-31.488v-31.488h31.488zm0-62.977h-31.488v-31.488h31.488zm0-62.977h-31.488v-31.488h31.488zm0-62.977h-31.488v-31.488h31.488zm244.04 186.88-125.95 72.578v0.003906c-4.8711 2.8125-10.871 2.8125-15.746 0-4.8398-2.7969-7.8359-7.9492-7.8711-13.543v-145.47c0.035156-5.5898 3.0312-10.746 7.8711-13.539 2.3945-1.3828 5.1094-2.1094 7.875-2.1094 2.7617 0 5.4766 0.72656 7.8711 2.1094l125.95 72.578c3.2461 1.8398 5.7305 4.7734 7.0156 8.2734 1.2852 3.5039 1.2852 7.3477 0 10.848-1.2852 3.5039-3.7695 6.4336-7.0156 8.2734zm133.82 190.98h-31.488v-31.488h31.488zm0-62.977h-31.488v-31.488h31.488zm0-62.977h-31.488v-31.488h31.488zm0-62.977h-31.488v-31.488h31.488zm0-62.977h-31.488v-31.488h31.488zm0-62.977h-31.488v-31.488h31.488zm0-62.977h-31.488v-31.488h31.488z"></path>
+
+      </g>
+      </svg>
\ No newline at end of file
diff --git a/js/learnings/src/index.js b/js/learnings/src/index.js
index d563c0f..b7f0bcb 100644
--- a/js/learnings/src/index.js
+++ b/js/learnings/src/index.js
@@ -3,15 +3,18 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { Provider } from 'react-redux';
+
+import store from './store';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
diff --git a/js/learnings/src/store.js b/js/learnings/src/store.js
new file mode 100644
index 0000000..e3ddef6
--- /dev/null
+++ b/js/learnings/src/store.js
@@ -0,0 +1,26 @@
+import { createStore } from "redux";
+
+let watchList = JSON.parse(localStorage.getItem("watchList")) || [];
+
+function watchListReducer(state = { watchList }, action) {
+    switch (action.type) {
+        case 'ADD_TO_WATCHLIST': {
+            const newWatchList = [...state.watchList, action.payload.id];
+            localStorage.setItem("watchList", JSON.stringify(newWatchList));
+            return { ...state, watchList: newWatchList };
+        }
+        case 'REMOVE_FROM_WATCHLIST': {
+            const filteredMovies = state.watchList.filter(id => id !== action.payload.id);
+            localStorage.setItem("watchList", JSON.stringify(filteredMovies));
+            return { ...state, watchList: filteredMovies };
+        }
+        default:
+            return state;
+    }
+}
+
+
+
+const store = createStore(watchListReducer);
+
+export default store;
\ No newline at end of file