From 6b575784c3a41c3e3e9bd38dd97c43600a0df60d Mon Sep 17 00:00:00 2001
From: Ronja <ronjalh@stud.ntnu.no>
Date: Wed, 16 Sep 2026 14:11:40 +0200
Subject: [PATCH 1/4] feat(routes): add favourites page

---
 t29-project-1/package-lock.json        | 60 +++++++++++++++++++++++++-
 t29-project-1/package.json             |  3 +-
 t29-project-1/src/App.tsx              |  2 +
 t29-project-1/src/main.tsx             |  9 +++-
 t29-project-1/src/pages/Favourites.tsx |  8 ++++
 5 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 t29-project-1/src/pages/Favourites.tsx

diff --git a/t29-project-1/package-lock.json b/t29-project-1/package-lock.json
index 997e31d..cdafae6 100644
--- a/t29-project-1/package-lock.json
+++ b/t29-project-1/package-lock.json
@@ -13,7 +13,8 @@
         "dotenv": "^17.4.2",
         "express": "^5.2.1",
         "react": "^19.2.8",
-        "react-dom": "^19.2.8"
+        "react-dom": "^19.2.8",
+        "react-router-dom": "^7.18.4"
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
@@ -3758,6 +3759,57 @@
         "react": "^19.2.8"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.18.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.4.tgz",
+      "integrity": "sha512-PUPQcMhMGRAslLcvtlPz/kmzBEWPhLdgLFrL7pLNepBL6dX0lWj4WD2cUYVgYCuT3jxvghYFg81cDTj44DhetQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.18.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.4.tgz",
+      "integrity": "sha512-yrfmJHIpDG7taCpqKjT1G5B6q3O2K+RN8/fgNf0lTjCwiPbQ0ei6vXX9ZjQR+7ld8Tr7Z5xmyMnZ8YJrphWQUw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.18.4"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-router/node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -3898,6 +3950,12 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
diff --git a/t29-project-1/package.json b/t29-project-1/package.json
index 19bf385..36cd6ac 100644
--- a/t29-project-1/package.json
+++ b/t29-project-1/package.json
@@ -30,7 +30,8 @@
     "dotenv": "^17.4.2",
     "express": "^5.2.1",
     "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.4"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
diff --git a/t29-project-1/src/App.tsx b/t29-project-1/src/App.tsx
index d9b3191..6b4b7f2 100644
--- a/t29-project-1/src/App.tsx
+++ b/t29-project-1/src/App.tsx
@@ -1,6 +1,7 @@
 import { useCatNavigation } from './hooks/useCatNavigation';
 import { NavPrevious, NavNext } from './components/ActionButtons';
 import { CatCard } from './components/CatCard';
+import { Link } from 'react-router-dom';
 import './App.css';
 
 export default function App() {
@@ -15,6 +16,7 @@ export default function App() {
 
   return (
     <main className="app-container">
+      <Link to="/favourites">Favourites</Link>
       <nav className="nav-layout" aria-label="Main content navigation">
         <NavPrevious
           onClick={handlePrevious}
diff --git a/t29-project-1/src/main.tsx b/t29-project-1/src/main.tsx
index 8aff03e..33c0a4b 100644
--- a/t29-project-1/src/main.tsx
+++ b/t29-project-1/src/main.tsx
@@ -1,8 +1,10 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import './index.css';
 import App from './App.tsx';
+import Favourites from './pages/Favourites.tsx';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -16,7 +18,12 @@ const queryClient = new QueryClient({
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <App />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<App />} />
+          <Route path="/favourites" element={<Favourites />} />
+        </Routes>
+      </BrowserRouter>
     </QueryClientProvider>
   </StrictMode>
 );
diff --git a/t29-project-1/src/pages/Favourites.tsx b/t29-project-1/src/pages/Favourites.tsx
new file mode 100644
index 0000000..b5ce125
--- /dev/null
+++ b/t29-project-1/src/pages/Favourites.tsx
@@ -0,0 +1,8 @@
+export default function Favorites() {
+  return (
+    <main>
+      <h1>Favorites</h1>
+      <p>Your favorite cats will appear here.</p>
+    </main>
+  );
+}

From ffe0f533ac0033f12047f7991766975ee8155d66 Mon Sep 17 00:00:00 2001
From: Ronja <ronjalh@stud.ntnu.no>
Date: Wed, 16 Sep 2026 14:54:09 +0200
Subject: [PATCH 2/4] chore: rename favourites page to FavoritePage

---
 t29-project-1/src/App.tsx                                    | 3 +--
 t29-project-1/src/main.tsx                                   | 4 ++--
 t29-project-1/src/pages/{Favourites.tsx => FavoritePage.tsx} | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)
 rename t29-project-1/src/pages/{Favourites.tsx => FavoritePage.tsx} (73%)

diff --git a/t29-project-1/src/App.tsx b/t29-project-1/src/App.tsx
index 6b4b7f2..bef254e 100644
--- a/t29-project-1/src/App.tsx
+++ b/t29-project-1/src/App.tsx
@@ -13,10 +13,9 @@ export default function App() {
     handleNext,
     handlePrevious,
   } = useCatNavigation();
-
   return (
     <main className="app-container">
-      <Link to="/favourites">Favourites</Link>
+      <Link to="/favorite">Favorite</Link>
       <nav className="nav-layout" aria-label="Main content navigation">
         <NavPrevious
           onClick={handlePrevious}
diff --git a/t29-project-1/src/main.tsx b/t29-project-1/src/main.tsx
index 33c0a4b..d919520 100644
--- a/t29-project-1/src/main.tsx
+++ b/t29-project-1/src/main.tsx
@@ -4,7 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import './index.css';
 import App from './App.tsx';
-import Favourites from './pages/Favourites.tsx';
+import FavoritePage from './pages/FavoritePage.tsx';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -21,7 +21,7 @@ createRoot(document.getElementById('root')!).render(
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<App />} />
-          <Route path="/favourites" element={<Favourites />} />
+          <Route path="/favorite" element={<FavoritePage />} />
         </Routes>
       </BrowserRouter>
     </QueryClientProvider>
diff --git a/t29-project-1/src/pages/Favourites.tsx b/t29-project-1/src/pages/FavoritePage.tsx
similarity index 73%
rename from t29-project-1/src/pages/Favourites.tsx
rename to t29-project-1/src/pages/FavoritePage.tsx
index b5ce125..40689f8 100644
--- a/t29-project-1/src/pages/Favourites.tsx
+++ b/t29-project-1/src/pages/FavoritePage.tsx
@@ -1,4 +1,4 @@
-export default function Favorites() {
+export default function FavoritePage() {
   return (
     <main>
       <h1>Favorites</h1>

From f01bf07a13fb94d6c99e2232f40b98dd0e03bd93 Mon Sep 17 00:00:00 2001
From: Ronja <ronjalh@stud.ntnu.no>
Date: Wed, 16 Sep 2026 14:54:34 +0200
Subject: [PATCH 3/4] feat: make favorite star toggle saved state

---
 t29-project-1/src/App.tsx                  | 10 +++++++-
 t29-project-1/src/components/Favorites.css |  5 ++++
 t29-project-1/src/components/Favorites.tsx |  4 +--
 t29-project-1/src/hooks/useFavoriteCat.ts  | 29 ++++++++++++++++++++++
 4 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 t29-project-1/src/hooks/useFavoriteCat.ts

diff --git a/t29-project-1/src/App.tsx b/t29-project-1/src/App.tsx
index bef254e..0fe05bb 100644
--- a/t29-project-1/src/App.tsx
+++ b/t29-project-1/src/App.tsx
@@ -1,4 +1,5 @@
 import { useCatNavigation } from './hooks/useCatNavigation';
+import { useFavoriteCat } from './hooks/useFavoriteCat';
 import { NavPrevious, NavNext } from './components/ActionButtons';
 import { CatCard } from './components/CatCard';
 import { Link } from 'react-router-dom';
@@ -13,6 +14,7 @@ export default function App() {
     handleNext,
     handlePrevious,
   } = useCatNavigation();
+  const { isFavorite, toggleFavorite } = useFavoriteCat(currentCat);
   return (
     <main className="app-container">
       <Link to="/favorite">Favorite</Link>
@@ -22,7 +24,13 @@ export default function App() {
           disabled={!canGoPrevious || isLoading}
         />
 
-        <CatCard cat={currentCat} isLoading={isLoading} error={error} />
+        <CatCard
+          cat={currentCat}
+          isFavorite={isFavorite}
+          isLoading={isLoading}
+          error={error}
+          onToggleFavorite={toggleFavorite}
+        />
 
         <NavNext onClick={handleNext} disabled={isLoading} />
       </nav>
diff --git a/t29-project-1/src/components/Favorites.css b/t29-project-1/src/components/Favorites.css
index cf958f5..5073468 100644
--- a/t29-project-1/src/components/Favorites.css
+++ b/t29-project-1/src/components/Favorites.css
@@ -34,6 +34,11 @@
     stroke 0.15s ease;
 }
 
+.star-svg.is-active {
+  fill: #7d5d75;
+  stroke: #fff4c8;
+}
+
 /* Invert colors on BOTH hover and keyboard focus */
 .star-btn:hover .star-svg,
 .star-btn:focus-visible .star-svg {
diff --git a/t29-project-1/src/components/Favorites.tsx b/t29-project-1/src/components/Favorites.tsx
index c97bcb6..e6c7f48 100644
--- a/t29-project-1/src/components/Favorites.tsx
+++ b/t29-project-1/src/components/Favorites.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import './Favorites.css';
 
 interface FavoritesProps {
-  onToggleFavorites: () => void;
+  onToggleFavorites?: () => void;
   isViewingFavorites?: boolean;
 }
 
@@ -16,7 +16,7 @@ export const Favorites: React.FC<FavoritesProps> = ({
       className="star-btn"
       onClick={onToggleFavorites}
       aria-label={
-        isViewingFavorites ? 'Return to cat browsing' : 'Go to favorites'
+        isViewingFavorites ? 'Remove from favorites' : 'Add to favorites'
       }
       aria-pressed={isViewingFavorites}
     >
diff --git a/t29-project-1/src/hooks/useFavoriteCat.ts b/t29-project-1/src/hooks/useFavoriteCat.ts
new file mode 100644
index 0000000..ad94baa
--- /dev/null
+++ b/t29-project-1/src/hooks/useFavoriteCat.ts
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import type { CatData } from '../api/catApi';
+import {
+  addFavoriteCat,
+  getFavoriteCats,
+  removeFavoriteCat,
+} from '../utils/favorites';
+
+export function useFavoriteCat(currentCat: CatData | null) {
+  const [favoriteCats, setFavoriteCats] = useState(getFavoriteCats);
+  const isFavorite = Boolean(
+    currentCat?.id &&
+    favoriteCats.some((favorite) => favorite.id === currentCat.id)
+  );
+
+  const toggleFavorite = () => {
+    if (!currentCat?.id) return;
+
+    if (isFavorite) {
+      removeFavoriteCat(currentCat.id);
+    } else {
+      addFavoriteCat(currentCat);
+    }
+
+    setFavoriteCats(getFavoriteCats());
+  };
+
+  return { isFavorite, toggleFavorite };
+}

From be0f95c12256c8df5950f2ba72865f9f617dff24 Mon Sep 17 00:00:00 2001
From: Ronja <ronjalh@stud.ntnu.no>
Date: Wed, 16 Sep 2026 14:54:45 +0200
Subject: [PATCH 4/4] feat: display favorites in a grid

---
 t29-project-1/src/App.css                |  6 +++++
 t29-project-1/src/pages/FavoritePage.tsx | 31 +++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/t29-project-1/src/App.css b/t29-project-1/src/App.css
index cd03c39..77f6b53 100644
--- a/t29-project-1/src/App.css
+++ b/t29-project-1/src/App.css
@@ -40,6 +40,12 @@
   flex-shrink: 0;
 }
 
+.favorite-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
 /* Mobile Responsive Adjustments */
 @media (max-width: 600px) {
   .nav-layout {
diff --git a/t29-project-1/src/pages/FavoritePage.tsx b/t29-project-1/src/pages/FavoritePage.tsx
index 40689f8..edf8218 100644
--- a/t29-project-1/src/pages/FavoritePage.tsx
+++ b/t29-project-1/src/pages/FavoritePage.tsx
@@ -1,8 +1,37 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { CatCard } from '../components/CatCard';
+import { getFavoriteCats, removeFavoriteCat } from '../utils/favorites';
+import '../App.css';
+
 export default function FavoritePage() {
+  const [favoriteCats, setFavoriteCats] = useState(getFavoriteCats);
+
+  const handleRemove = (catId?: string) => {
+    if (!catId) return;
+
+    removeFavoriteCat(catId);
+    setFavoriteCats(getFavoriteCats());
+  };
+
   return (
     <main>
+      <Link to="/">Back to cats</Link>
       <h1>Favorites</h1>
-      <p>Your favorite cats will appear here.</p>
+      {favoriteCats.length === 0 ? (
+        <p>No favorite cats yet.</p>
+      ) : (
+        <section className="favorite-grid" aria-label="Favorite cats">
+          {favoriteCats.map((cat) => (
+            <CatCard
+              key={cat.id ?? cat.url}
+              cat={cat}
+              isFavorite
+              onToggleFavorite={() => handleRemove(cat.id)}
+            />
+          ))}
+        </section>
+      )}
     </main>
   );
 }