auto-claude: subtask-2-2 - Manual browser verification

Created comprehensive test page at src/app/test-localstorage/page.tsx to verify useLocalStorage hook functionality in the browser.

Test Coverage:
- String values (basic get/set)
- Complex objects (nested properties)
- Arrays (add/remove items)
- Numbers (increment/decrement)
- Remove functionality
- State persistence across page refreshes
- Real-time localStorage updates visible in DevTools

Verification Guide:
A detailed manual verification guide has been created at .auto-claude/specs/004-add-uselocalstorage-custom-hook/MANUAL_VERIFICATION.md with step-by-step instructions for browser testing.

Manual Verification Checklist:
- [ ] No hydration errors in console
- [ ] localStorage updates visible in DevTools
- [ ] State persists across page refresh
- [ ] No TypeScript errors (verified with npx tsc --noEmit)

TypeScript compilation verified with no errors.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/app/[locale]/blog/page.tsx

@@ -5,7 +5,6 @@ import Link from 'next/link';
 import Image from 'next/image';
 import type { Metadata } from 'next';
 import { getAllBlogPosts, BlogPost } from '@/lib/blog';
-import { legacyBlogPosts } from '@/data/legacyBlogPosts';
 
 const POSTS_PER_PAGE = 12;
 
@@ -14,6 +13,232 @@ type Props = {
   searchParams: Promise<{ page?: string }>;
 };
 
+// Legacy blog posts with translations (these have manual translations)
+const legacyBlogPosts: Record<string, BlogPost[]> = {
+  de: [
+    {
+      slug: 'n8n-automatisierung-tutorial',
+      title: 'n8n Tutorial: Workflows automatisieren ohne Code - Schritt für Schritt',
+      date: '2026-01-18',
+      excerpt: 'Lernen Sie, wie Sie mit n8n leistungsstarke Automatisierungen erstellen. Von der Installation bis zum ersten produktiven Workflow - inklusive Best Practices.',
+      category: 'Automatisierung',
+      tags: ['n8n', 'Tutorial', 'Automatisierung', 'Workflow', 'No-Code', 'Self-Hosted'],
+      coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
+    },
+    {
+      slug: 'geo-generative-engine-optimization',
+      title: 'GEO: Generative Engine Optimization - SEO für die KI-Ära',
+      date: '2026-01-17',
+      excerpt: 'Wie Sie Ihre Inhalte für ChatGPT, Perplexity und andere KI-Suchmaschinen optimieren. Der neue Standard nach klassischem SEO.',
+      category: 'Marketing',
+      tags: ['GEO', 'SEO', 'KI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
+      coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
+    },
+    {
+      slug: 'gpt-api-integration-praxisguide',
+      title: 'GPT API Integration: Vom API-Key zur produktionsreifen Anwendung',
+      date: '2026-01-16',
+      excerpt: 'Praktische Anleitung zur Integration von OpenAI GPT-4 in Ihre Anwendungen. Token-Optimierung, Fehlerbehandlung und Best Practices.',
+      category: 'KI-Entwicklung',
+      tags: ['GPT-4', 'OpenAI', 'API', 'Integration', 'Python', 'LLM', 'Prompt Engineering'],
+      coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
+    },
+    {
+      slug: 'ki-agenten-unternehmen-guide',
+      title: 'KI-Agenten für Unternehmen: Der ultimative Praxisguide 2026',
+      date: '2026-01-15',
+      excerpt: 'Wie Unternehmen KI-Agenten einsetzen können, um Prozesse zu automatisieren, Kosten zu senken und Wettbewerbsvorteile zu gewinnen.',
+      category: 'KI-Entwicklung',
+      tags: ['KI-Agenten', 'Automatisierung', 'GPT-4', 'Claude', 'LLM', 'Unternehmen'],
+      coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
+    },
+    {
+      slug: 'n8n-make-zapier-vergleich',
+      title: 'n8n vs Make vs Zapier: Welches Automatisierungstool passt zu Ihnen?',
+      date: '2026-01-10',
+      excerpt: 'Ein detaillierter Vergleich der führenden Workflow-Automatisierungstools mit Vor- und Nachteilen für verschiedene Anwendungsfälle.',
+      category: 'Automatisierung',
+      tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automatisierung', 'No-Code'],
+      coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
+    },
+    {
+      slug: 'voice-ai-kundenservice-trends',
+      title: 'Voice AI im Kundenservice: Trends und Best Practices 2026',
+      date: '2026-01-05',
+      excerpt: 'Wie Voice AI den Kundenservice revolutioniert und welche Technologien Sie für Ihr Unternehmen evaluieren sollten.',
+      category: 'Voice AI',
+      tags: ['Voice AI', 'Sprachassistent', 'Kundenservice', 'NLP', 'Chatbot', 'Vapi'],
+      coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
+    },
+    {
+      slug: 'saas-mvp-entwicklung-4-wochen',
+      title: 'SaaS MVP in 4 Wochen: Von der Idee zum Launch',
+      date: '2025-12-20',
+      excerpt: 'Schritt-für-Schritt Anleitung zur schnellen Entwicklung eines SaaS MVP mit Next.js, Prisma und modernen Cloud-Diensten.',
+      category: 'SaaS-Entwicklung',
+      tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Produktentwicklung', 'React'],
+      coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
+    },
+    {
+      slug: 'erp-integration-breuninger',
+      title: 'ApparelMagic und TradeByte: Analyse komplexer Integrationen',
+      date: '2024-02-09',
+      excerpt: 'Detaillierte Analyse einer E-Commerce-Integration zwischen Apparel Magic und Breuninger via TradeByte',
+      category: 'System Integration',
+      tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integration', 'Python', 'MariaDB'],
+      coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
+    },
+  ],
+  en: [
+    {
+      slug: 'n8n-automatisierung-tutorial',
+      title: 'n8n Tutorial: Automate Workflows Without Code - Step by Step',
+      date: '2026-01-18',
+      excerpt: 'Learn how to create powerful automations with n8n. From installation to your first production workflow - including best practices.',
+      category: 'Automation',
+      tags: ['n8n', 'Tutorial', 'Automation', 'Workflow', 'No-Code', 'Self-Hosted'],
+      coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
+    },
+    {
+      slug: 'geo-generative-engine-optimization',
+      title: 'GEO: Generative Engine Optimization - SEO for the AI Era',
+      date: '2026-01-17',
+      excerpt: 'How to optimize your content for ChatGPT, Perplexity and other AI search engines. The new standard after traditional SEO.',
+      category: 'Marketing',
+      tags: ['GEO', 'SEO', 'AI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
+      coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
+    },
+    {
+      slug: 'gpt-api-integration-praxisguide',
+      title: 'GPT API Integration: From API Key to Production-Ready Application',
+      date: '2026-01-16',
+      excerpt: 'Practical guide to integrating OpenAI GPT-4 into your applications. Token optimization, error handling and best practices.',
+      category: 'AI Development',
+      tags: ['GPT-4', 'OpenAI', 'API', 'Integration', 'Python', 'LLM', 'Prompt Engineering'],
+      coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
+    },
+    {
+      slug: 'ki-agenten-unternehmen-guide',
+      title: 'AI Agents for Business: The Ultimate Practical Guide 2026',
+      date: '2026-01-15',
+      excerpt: 'How companies can use AI agents to automate processes, reduce costs and gain competitive advantages.',
+      category: 'AI Development',
+      tags: ['AI Agents', 'Automation', 'GPT-4', 'Claude', 'LLM', 'Enterprise'],
+      coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
+    },
+    {
+      slug: 'n8n-make-zapier-vergleich',
+      title: 'n8n vs Make vs Zapier: Which Automation Tool is Right for You?',
+      date: '2026-01-10',
+      excerpt: 'A detailed comparison of leading workflow automation tools with pros and cons for different use cases.',
+      category: 'Automation',
+      tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automation', 'No-Code'],
+      coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
+    },
+    {
+      slug: 'voice-ai-kundenservice-trends',
+      title: 'Voice AI in Customer Service: Trends and Best Practices 2026',
+      date: '2026-01-05',
+      excerpt: 'How Voice AI is revolutionizing customer service and which technologies you should evaluate for your business.',
+      category: 'Voice AI',
+      tags: ['Voice AI', 'Voice Assistant', 'Customer Service', 'NLP', 'Chatbot', 'Vapi'],
+      coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
+    },
+    {
+      slug: 'saas-mvp-entwicklung-4-wochen',
+      title: 'SaaS MVP in 4 Weeks: From Idea to Launch',
+      date: '2025-12-20',
+      excerpt: 'Step-by-step guide to quickly developing a SaaS MVP with Next.js, Prisma and modern cloud services.',
+      category: 'SaaS Development',
+      tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Product Development', 'React'],
+      coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
+    },
+    {
+      slug: 'erp-integration-breuninger',
+      title: 'ApparelMagic and TradeByte: Complex Integration Analysis',
+      date: '2024-02-09',
+      excerpt: 'Detailed analysis of an e-commerce integration between Apparel Magic and Breuninger via TradeByte',
+      category: 'System Integration',
+      tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integration', 'Python', 'MariaDB'],
+      coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
+    },
+  ],
+  sr: [
+    {
+      slug: 'n8n-automatisierung-tutorial',
+      title: 'n8n Tutorial: Automatizujte Radne Tokove Bez Koda - Korak po Korak',
+      date: '2026-01-18',
+      excerpt: 'Naučite kako da kreirate moćne automatizacije sa n8n. Od instalacije do prvog produktivnog radnog toka - uključujući najbolje prakse.',
+      category: 'Automatizacija',
+      tags: ['n8n', 'Tutorial', 'Automatizacija', 'Workflow', 'No-Code', 'Self-Hosted'],
+      coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
+    },
+    {
+      slug: 'geo-generative-engine-optimization',
+      title: 'GEO: Generative Engine Optimization - SEO za AI Eru',
+      date: '2026-01-17',
+      excerpt: 'Kako da optimizujete sadržaj za ChatGPT, Perplexity i druge AI pretraživače. Novi standard posle klasičnog SEO-a.',
+      category: 'Marketing',
+      tags: ['GEO', 'SEO', 'AI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
+      coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
+    },
+    {
+      slug: 'gpt-api-integration-praxisguide',
+      title: 'GPT API Integracija: Od API Ključa do Produkcione Aplikacije',
+      date: '2026-01-16',
+      excerpt: 'Praktični vodič za integraciju OpenAI GPT-4 u vaše aplikacije. Optimizacija tokena, rukovanje greškama i najbolje prakse.',
+      category: 'AI Razvoj',
+      tags: ['GPT-4', 'OpenAI', 'API', 'Integracija', 'Python', 'LLM', 'Prompt Engineering'],
+      coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
+    },
+    {
+      slug: 'ki-agenten-unternehmen-guide',
+      title: 'AI Agenti za Preduzeća: Ultimativni Praktični Vodič 2026',
+      date: '2026-01-15',
+      excerpt: 'Kako kompanije mogu koristiti AI agente za automatizaciju procesa, smanjenje troškova i sticanje konkurentskih prednosti.',
+      category: 'AI Razvoj',
+      tags: ['AI Agenti', 'Automatizacija', 'GPT-4', 'Claude', 'LLM', 'Preduzeća'],
+      coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
+    },
+    {
+      slug: 'n8n-make-zapier-vergleich',
+      title: 'n8n vs Make vs Zapier: Koji Alat za Automatizaciju je Pravi za Vas?',
+      date: '2026-01-10',
+      excerpt: 'Detaljna uporedna analiza vodećih alata za automatizaciju radnih tokova sa prednostima i manama za različite slučajeve upotrebe.',
+      category: 'Automatizacija',
+      tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automatizacija', 'No-Code'],
+      coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
+    },
+    {
+      slug: 'voice-ai-kundenservice-trends',
+      title: 'Voice AI u Korisničkoj Službi: Trendovi i Najbolje Prakse 2026',
+      date: '2026-01-05',
+      excerpt: 'Kako Voice AI revolucioniše korisničku službu i koje tehnologije treba da evaluirate za vaš posao.',
+      category: 'Voice AI',
+      tags: ['Voice AI', 'Glasovni Asistent', 'Korisnička Služba', 'NLP', 'Chatbot', 'Vapi'],
+      coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
+    },
+    {
+      slug: 'saas-mvp-entwicklung-4-wochen',
+      title: 'SaaS MVP za 4 Nedelje: Od Ideje do Lansiranja',
+      date: '2025-12-20',
+      excerpt: 'Korak-po-korak vodič za brz razvoj SaaS MVP-a sa Next.js, Prisma i modernim cloud servisima.',
+      category: 'SaaS Razvoj',
+      tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Razvoj Proizvoda', 'React'],
+      coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
+    },
+    {
+      slug: 'erp-integration-breuninger',
+      title: 'ApparelMagic i TradeByte: Analiza kompleksnih integracija',
+      date: '2024-02-09',
+      excerpt: 'Detaljna analiza e-commerce integracije izmedu Apparel Magic i Breuninger putem TradeByte',
+      category: 'Sistemska Integracija',
+      tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integracija', 'Python', 'MariaDB'],
+      coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
+    },
+  ],
+};
+
 const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://damjan-savic.com';
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {

src/app/test-localstorage/page.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { useState } from 'react';
+
+interface UserSettings {
+  theme: 'light' | 'dark';
+  notifications: boolean;
+  language: string;
+}
+
+export default function TestLocalStoragePage() {
+  // Test 1: Simple string value
+  const [name, setName, removeName] = useLocalStorage('test-name', 'Guest');
+
+  // Test 2: Complex object
+  const [settings, setSettings, removeSettings] = useLocalStorage<UserSettings>(
+    'test-settings',
+    {
+      theme: 'light',
+      notifications: true,
+      language: 'en',
+    }
+  );
+
+  // Test 3: Array
+  const [items, setItems, removeItems] = useLocalStorage<string[]>('test-items', []);
+
+  // Test 4: Number
+  const [count, setCount, removeCount] = useLocalStorage('test-count', 0);
+
+  const [newItem, setNewItem] = useState('');
+
+  return (
+    <div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
+      <h1>useLocalStorage Hook Test Page</h1>
+      <p style={{ color: '#666', marginBottom: '2rem' }}>
+        Open DevTools (F12) → Application → Local Storage to see values update in real-time.
+        Refresh the page to verify persistence.
+      </p>
+
+      {/* Test 1: String */}
+      <div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+        <h2>Test 1: String Value</h2>
+        <p>Current Name: <strong>{name}</strong></p>
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="Enter your name"
+          style={{ padding: '0.5rem', marginRight: '0.5rem' }}
+        />
+        <button onClick={() => removeName()} style={{ padding: '0.5rem' }}>
+          Reset
+        </button>
+        <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
+          localStorage key: <code>test-name</code>
+        </p>
+      </div>
+
+      {/* Test 2: Complex Object */}
+      <div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+        <h2>Test 2: Complex Object</h2>
+        <div style={{ marginBottom: '1rem' }}>
+          <p>Theme: <strong>{settings.theme}</strong></p>
+          <button
+            onClick={() => setSettings((prev) => ({ ...prev, theme: prev.theme === 'light' ? 'dark' : 'light' }))}
+            style={{ padding: '0.5rem', marginRight: '0.5rem' }}
+          >
+            Toggle Theme
+          </button>
+        </div>
+        <div style={{ marginBottom: '1rem' }}>
+          <label>
+            <input
+              type="checkbox"
+              checked={settings.notifications}
+              onChange={(e) => setSettings((prev) => ({ ...prev, notifications: e.target.checked }))}
+            />
+            {' '}Enable Notifications
+          </label>
+        </div>
+        <div style={{ marginBottom: '1rem' }}>
+          <label>Language: </label>
+          <select
+            value={settings.language}
+            onChange={(e) => setSettings((prev) => ({ ...prev, language: e.target.value }))}
+            style={{ padding: '0.5rem' }}
+          >
+            <option value="en">English</option>
+            <option value="de">German</option>
+            <option value="es">Spanish</option>
+          </select>
+        </div>
+        <button onClick={() => removeSettings()} style={{ padding: '0.5rem' }}>
+          Reset Settings
+        </button>
+        <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
+          localStorage key: <code>test-settings</code>
+        </p>
+      </div>
+
+      {/* Test 3: Array */}
+      <div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+        <h2>Test 3: Array Value</h2>
+        <p>Items ({items.length}):</p>
+        <ul style={{ minHeight: '60px' }}>
+          {items.map((item, index) => (
+            <li key={index}>
+              {item}{' '}
+              <button
+                onClick={() => setItems((prev) => prev.filter((_, i) => i !== index))}
+                style={{ padding: '0.25rem 0.5rem', fontSize: '0.875rem' }}
+              >
+                Remove
+              </button>
+            </li>
+          ))}
+        </ul>
+        <div>
+          <input
+            type="text"
+            value={newItem}
+            onChange={(e) => setNewItem(e.target.value)}
+            onKeyPress={(e) => {
+              if (e.key === 'Enter' && newItem.trim()) {
+                setItems((prev) => [...prev, newItem.trim()]);
+                setNewItem('');
+              }
+            }}
+            placeholder="Add new item"
+            style={{ padding: '0.5rem', marginRight: '0.5rem' }}
+          />
+          <button
+            onClick={() => {
+              if (newItem.trim()) {
+                setItems((prev) => [...prev, newItem.trim()]);
+                setNewItem('');
+              }
+            }}
+            style={{ padding: '0.5rem', marginRight: '0.5rem' }}
+          >
+            Add Item
+          </button>
+          <button onClick={() => removeItems()} style={{ padding: '0.5rem' }}>
+            Clear All
+          </button>
+        </div>
+        <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
+          localStorage key: <code>test-items</code>
+        </p>
+      </div>
+
+      {/* Test 4: Number */}
+      <div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+        <h2>Test 4: Number Value</h2>
+        <p>Count: <strong>{count}</strong></p>
+        <button onClick={() => setCount((prev) => prev + 1)} style={{ padding: '0.5rem', marginRight: '0.5rem' }}>
+          Increment
+        </button>
+        <button onClick={() => setCount((prev) => prev - 1)} style={{ padding: '0.5rem', marginRight: '0.5rem' }}>
+          Decrement
+        </button>
+        <button onClick={() => removeCount()} style={{ padding: '0.5rem' }}>
+          Reset
+        </button>
+        <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
+          localStorage key: <code>test-count</code>
+        </p>
+      </div>
+
+      {/* Instructions */}
+      <div style={{ marginTop: '2rem', padding: '1rem', backgroundColor: '#f0f9ff', borderRadius: '8px' }}>
+        <h3>Verification Checklist:</h3>
+        <ul>
+          <li>✓ Open DevTools → Application → Local Storage → http://localhost:3000</li>
+          <li>✓ Interact with the controls above and watch localStorage update in real-time</li>
+          <li>✓ Refresh the page (F5) - all values should persist</li>
+          <li>✓ Check Console for hydration errors (there should be none)</li>
+          <li>✓ Check Console for any errors (there should be none)</li>
+          <li>✓ Verify TypeScript has no errors in your editor</li>
+        </ul>
+      </div>
+    </div>
+  );
+}

src/data/legacyBlogPosts.ts

@@ -1,228 +0,0 @@
-import type { BlogPost } from '@/lib/blog';
-
-export type LegacyBlogPostsData = Record<string, BlogPost[]>;
-
-export const legacyBlogPosts: LegacyBlogPostsData = {
-  de: [
-    {
-      slug: 'n8n-automatisierung-tutorial',
-      title: 'n8n Tutorial: Workflows automatisieren ohne Code - Schritt für Schritt',
-      date: '2026-01-18',
-      excerpt: 'Lernen Sie, wie Sie mit n8n leistungsstarke Automatisierungen erstellen. Von der Installation bis zum ersten produktiven Workflow - inklusive Best Practices.',
-      category: 'Automatisierung',
-      tags: ['n8n', 'Tutorial', 'Automatisierung', 'Workflow', 'No-Code', 'Self-Hosted'],
-      coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
-    },
-    {
-      slug: 'geo-generative-engine-optimization',
-      title: 'GEO: Generative Engine Optimization - SEO für die KI-Ära',
-      date: '2026-01-17',
-      excerpt: 'Wie Sie Ihre Inhalte für ChatGPT, Perplexity und andere KI-Suchmaschinen optimieren. Der neue Standard nach klassischem SEO.',
-      category: 'Marketing',
-      tags: ['GEO', 'SEO', 'KI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
-      coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
-    },
-    {
-      slug: 'gpt-api-integration-praxisguide',
-      title: 'GPT API Integration: Vom API-Key zur produktionsreifen Anwendung',
-      date: '2026-01-16',
-      excerpt: 'Praktische Anleitung zur Integration von OpenAI GPT-4 in Ihre Anwendungen. Token-Optimierung, Fehlerbehandlung und Best Practices.',
-      category: 'KI-Entwicklung',
-      tags: ['GPT-4', 'OpenAI', 'API', 'Integration', 'Python', 'LLM', 'Prompt Engineering'],
-      coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
-    },
-    {
-      slug: 'ki-agenten-unternehmen-guide',
-      title: 'KI-Agenten für Unternehmen: Der ultimative Praxisguide 2026',
-      date: '2026-01-15',
-      excerpt: 'Wie Unternehmen KI-Agenten einsetzen können, um Prozesse zu automatisieren, Kosten zu senken und Wettbewerbsvorteile zu gewinnen.',
-      category: 'KI-Entwicklung',
-      tags: ['KI-Agenten', 'Automatisierung', 'GPT-4', 'Claude', 'LLM', 'Unternehmen'],
-      coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
-    },
-    {
-      slug: 'n8n-make-zapier-vergleich',
-      title: 'n8n vs Make vs Zapier: Welches Automatisierungstool passt zu Ihnen?',
-      date: '2026-01-10',
-      excerpt: 'Ein detaillierter Vergleich der führenden Workflow-Automatisierungstools mit Vor- und Nachteilen für verschiedene Anwendungsfälle.',
-      category: 'Automatisierung',
-      tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automatisierung', 'No-Code'],
-      coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
-    },
-    {
-      slug: 'voice-ai-kundenservice-trends',
-      title: 'Voice AI im Kundenservice: Trends und Best Practices 2026',
-      date: '2026-01-05',
-      excerpt: 'Wie Voice AI den Kundenservice revolutioniert und welche Technologien Sie für Ihr Unternehmen evaluieren sollten.',
-      category: 'Voice AI',
-      tags: ['Voice AI', 'Sprachassistent', 'Kundenservice', 'NLP', 'Chatbot', 'Vapi'],
-      coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
-    },
-    {
-      slug: 'saas-mvp-entwicklung-4-wochen',
-      title: 'SaaS MVP in 4 Wochen: Von der Idee zum Launch',
-      date: '2025-12-20',
-      excerpt: 'Schritt-für-Schritt Anleitung zur schnellen Entwicklung eines SaaS MVP mit Next.js, Prisma und modernen Cloud-Diensten.',
-      category: 'SaaS-Entwicklung',
-      tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Produktentwicklung', 'React'],
-      coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
-    },
-    {
-      slug: 'erp-integration-breuninger',
-      title: 'ApparelMagic und TradeByte: Analyse komplexer Integrationen',
-      date: '2024-02-09',
-      excerpt: 'Detaillierte Analyse einer E-Commerce-Integration zwischen Apparel Magic und Breuninger via TradeByte',
-      category: 'System Integration',
-      tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integration', 'Python', 'MariaDB'],
-      coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
-    },
-  ],
-  en: [
-    {
-      slug: 'n8n-automatisierung-tutorial',
-      title: 'n8n Tutorial: Automate Workflows Without Code - Step by Step',
-      date: '2026-01-18',
-      excerpt: 'Learn how to create powerful automations with n8n. From installation to your first production workflow - including best practices.',
-      category: 'Automation',
-      tags: ['n8n', 'Tutorial', 'Automation', 'Workflow', 'No-Code', 'Self-Hosted'],
-      coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
-    },
-    {
-      slug: 'geo-generative-engine-optimization',
-      title: 'GEO: Generative Engine Optimization - SEO for the AI Era',
-      date: '2026-01-17',
-      excerpt: 'How to optimize your content for ChatGPT, Perplexity and other AI search engines. The new standard after traditional SEO.',
-      category: 'Marketing',
-      tags: ['GEO', 'SEO', 'AI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
-      coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
-    },
-    {
-      slug: 'gpt-api-integration-praxisguide',
-      title: 'GPT API Integration: From API Key to Production-Ready Application',
-      date: '2026-01-16',
-      excerpt: 'Practical guide to integrating OpenAI GPT-4 into your applications. Token optimization, error handling and best practices.',
-      category: 'AI Development',
-      tags: ['GPT-4', 'OpenAI', 'API', 'Integration', 'Python', 'LLM', 'Prompt Engineering'],
-      coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
-    },
-    {
-      slug: 'ki-agenten-unternehmen-guide',
-      title: 'AI Agents for Business: The Ultimate Practical Guide 2026',
-      date: '2026-01-15',
-      excerpt: 'How companies can use AI agents to automate processes, reduce costs and gain competitive advantages.',
-      category: 'AI Development',
-      tags: ['AI Agents', 'Automation', 'GPT-4', 'Claude', 'LLM', 'Enterprise'],
-      coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
-    },
-    {
-      slug: 'n8n-make-zapier-vergleich',
-      title: 'n8n vs Make vs Zapier: Which Automation Tool is Right for You?',
-      date: '2026-01-10',
-      excerpt: 'A detailed comparison of leading workflow automation tools with pros and cons for different use cases.',
-      category: 'Automation',
-      tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automation', 'No-Code'],
-      coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
-    },
-    {
-      slug: 'voice-ai-kundenservice-trends',
-      title: 'Voice AI in Customer Service: Trends and Best Practices 2026',
-      date: '2026-01-05',
-      excerpt: 'How Voice AI is revolutionizing customer service and which technologies you should evaluate for your business.',
-      category: 'Voice AI',
-      tags: ['Voice AI', 'Voice Assistant', 'Customer Service', 'NLP', 'Chatbot', 'Vapi'],
-      coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
-    },
-    {
-      slug: 'saas-mvp-entwicklung-4-wochen',
-      title: 'SaaS MVP in 4 Weeks: From Idea to Launch',
-      date: '2025-12-20',
-      excerpt: 'Step-by-step guide to quickly developing a SaaS MVP with Next.js, Prisma and modern cloud services.',
-      category: 'SaaS Development',
-      tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Product Development', 'React'],
-      coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
-    },
-    {
-      slug: 'erp-integration-breuninger',
-      title: 'ApparelMagic and TradeByte: Complex Integration Analysis',
-      date: '2024-02-09',
-      excerpt: 'Detailed analysis of an e-commerce integration between Apparel Magic and Breuninger via TradeByte',
-      category: 'System Integration',
-      tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integration', 'Python', 'MariaDB'],
-      coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
-    },
-  ],
-  sr: [
-    {
-      slug: 'n8n-automatisierung-tutorial',
-      title: 'n8n Tutorial: Automatizujte Radne Tokove Bez Koda - Korak po Korak',
-      date: '2026-01-18',
-      excerpt: 'Naučite kako da kreirate moćne automatizacije sa n8n. Od instalacije do prvog produktivnog radnog toka - uključujući najbolje prakse.',
-      category: 'Automatizacija',
-      tags: ['n8n', 'Tutorial', 'Automatizacija', 'Workflow', 'No-Code', 'Self-Hosted'],
-      coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
-    },
-    {
-      slug: 'geo-generative-engine-optimization',
-      title: 'GEO: Generative Engine Optimization - SEO za AI Eru',
-      date: '2026-01-17',
-      excerpt: 'Kako da optimizujete sadržaj za ChatGPT, Perplexity i druge AI pretraživače. Novi standard posle klasičnog SEO-a.',
-      category: 'Marketing',
-      tags: ['GEO', 'SEO', 'AI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
-      coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
-    },
-    {
-      slug: 'gpt-api-integration-praxisguide',
-      title: 'GPT API Integracija: Od API Ključa do Produkcione Aplikacije',
-      date: '2026-01-16',
-      excerpt: 'Praktični vodič za integraciju OpenAI GPT-4 u vaše aplikacije. Optimizacija tokena, rukovanje greškama i najbolje prakse.',
-      category: 'AI Razvoj',
-      tags: ['GPT-4', 'OpenAI', 'API', 'Integracija', 'Python', 'LLM', 'Prompt Engineering'],
-      coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
-    },
-    {
-      slug: 'ki-agenten-unternehmen-guide',
-      title: 'AI Agenti za Preduzeća: Ultimativni Praktični Vodič 2026',
-      date: '2026-01-15',
-      excerpt: 'Kako kompanije mogu koristiti AI agente za automatizaciju procesa, smanjenje troškova i sticanje konkurentskih prednosti.',
-      category: 'AI Razvoj',
-      tags: ['AI Agenti', 'Automatizacija', 'GPT-4', 'Claude', 'LLM', 'Preduzeća'],
-      coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
-    },
-    {
-      slug: 'n8n-make-zapier-vergleich',
-      title: 'n8n vs Make vs Zapier: Koji Alat za Automatizaciju je Pravi za Vas?',
-      date: '2026-01-10',
-      excerpt: 'Detaljna uporedna analiza vodećih alata za automatizaciju radnih tokova sa prednostima i manama za različite slučajeve upotrebe.',
-      category: 'Automatizacija',
-      tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automatizacija', 'No-Code'],
-      coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
-    },
-    {
-      slug: 'voice-ai-kundenservice-trends',
-      title: 'Voice AI u Korisničkoj Službi: Trendovi i Najbolje Prakse 2026',
-      date: '2026-01-05',
-      excerpt: 'Kako Voice AI revolucioniše korisničku službu i koje tehnologije treba da evaluirate za vaš posao.',
-      category: 'Voice AI',
-      tags: ['Voice AI', 'Glasovni Asistent', 'Korisnička Služba', 'NLP', 'Chatbot', 'Vapi'],
-      coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
-    },
-    {
-      slug: 'saas-mvp-entwicklung-4-wochen',
-      title: 'SaaS MVP za 4 Nedelje: Od Ideje do Lansiranja',
-      date: '2025-12-20',
-      excerpt: 'Korak-po-korak vodič za brz razvoj SaaS MVP-a sa Next.js, Prisma i modernim cloud servisima.',
-      category: 'SaaS Razvoj',
-      tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Razvoj Proizvoda', 'React'],
-      coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
-    },
-    {
-      slug: 'erp-integration-breuninger',
-      title: 'ApparelMagic i TradeByte: Analiza kompleksnih integracija',
-      date: '2024-02-09',
-      excerpt: 'Detaljna analiza e-commerce integracije izmedu Apparel Magic i Breuninger putem TradeByte',
-      category: 'Sistemska Integracija',
-      tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integracija', 'Python', 'MariaDB'],
-      coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
-    },
-  ],
-};

src/hooks/useLocalStorage.test.ts

@@ -0,0 +1,235 @@
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { useLocalStorage } from './useLocalStorage';
+
+// Mock the error handling utility
+vi.mock('../utils/errorHandling', () => ({
+  handleError: vi.fn()
+}));
+
+// Mock localStorage
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+
+  return {
+    getItem: (key: string) => store[key] || null,
+    setItem: (key: string, value: string) => {
+      store[key] = value.toString();
+    },
+    removeItem: (key: string) => {
+      delete store[key];
+    },
+    clear: () => {
+      store = {};
+    }
+  };
+})();
+
+describe('useLocalStorage', () => {
+  beforeEach(() => {
+    // Setup localStorage mock
+    Object.defineProperty(window, 'localStorage', {
+      value: localStorageMock,
+      writable: true
+    });
+    localStorageMock.clear();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return initial value when localStorage is empty', () => {
+    const { result } = renderHook(() => useLocalStorage('test-key', 'initial-value'));
+    const [value] = result.current;
+
+    expect(value).toBe('initial-value');
+  });
+
+  it('should return initial value from function when localStorage is empty', () => {
+    const initializer = vi.fn(() => 'computed-value');
+    const { result } = renderHook(() => useLocalStorage('test-key', initializer));
+    const [value] = result.current;
+
+    expect(value).toBe('computed-value');
+    expect(initializer).toHaveBeenCalled();
+  });
+
+  it('should set value in localStorage', () => {
+    const { result } = renderHook(() => useLocalStorage('test-key', 'initial'));
+
+    act(() => {
+      const [, setValue] = result.current;
+      setValue('new-value');
+    });
+
+    const [value] = result.current;
+    expect(value).toBe('new-value');
+    expect(JSON.parse(localStorage.getItem('test-key')!)).toBe('new-value');
+  });
+
+  it('should handle updater function in setValue', () => {
+    const { result } = renderHook(() => useLocalStorage('test-key', 10));
+
+    act(() => {
+      const [, setValue] = result.current;
+      setValue((prev) => prev + 5);
+    });
+
+    const [value] = result.current;
+    expect(value).toBe(15);
+  });
+
+  it('should read existing value from localStorage', () => {
+    localStorage.setItem('test-key', JSON.stringify('existing-value'));
+
+    const { result } = renderHook(() => useLocalStorage('test-key', 'initial-value'));
+    const [value] = result.current;
+
+    expect(value).toBe('existing-value');
+  });
+
+  it('should handle complex objects', () => {
+    const complexObject = { name: 'John', age: 30, hobbies: ['reading', 'coding'] };
+    const { result } = renderHook(() => useLocalStorage('test-key', complexObject));
+
+    act(() => {
+      const [, setValue] = result.current;
+      setValue({ ...complexObject, age: 31 });
+    });
+
+    const [value] = result.current;
+    expect(value).toEqual({ name: 'John', age: 31, hobbies: ['reading', 'coding'] });
+  });
+
+  it('should remove value from localStorage', () => {
+    localStorage.setItem('test-key', JSON.stringify('existing-value'));
+
+    const { result } = renderHook(() => useLocalStorage('test-key', 'initial-value'));
+
+    act(() => {
+      const [, , removeValue] = result.current;
+      removeValue();
+    });
+
+    const [value] = result.current;
+    expect(value).toBe('initial-value');
+    expect(localStorage.getItem('test-key')).toBeNull();
+  });
+
+  it('should handle invalid JSON in localStorage', () => {
+    localStorage.setItem('test-key', 'invalid-json{');
+
+    const { result } = renderHook(() => useLocalStorage('test-key', 'fallback-value'));
+    const [value] = result.current;
+
+    expect(value).toBe('fallback-value');
+  });
+
+  it('should be SSR-safe (no window)', () => {
+    const originalWindow = global.window;
+    // @ts-ignore - Temporarily remove window for SSR test
+    delete global.window;
+
+    const { result } = renderHook(() => useLocalStorage('test-key', 'ssr-value'));
+    const [value] = result.current;
+
+    expect(value).toBe('ssr-value');
+
+    // Restore window
+    global.window = originalWindow;
+  });
+
+  it('should handle localStorage quota exceeded', () => {
+    const { handleError } = require('../utils/errorHandling');
+
+    // Mock setItem to throw quota exceeded error
+    const originalSetItem = localStorage.setItem;
+    localStorage.setItem = vi.fn(() => {
+      throw new DOMException('QuotaExceededError');
+    });
+
+    const { result } = renderHook(() => useLocalStorage('test-key', 'initial'));
+
+    act(() => {
+      const [, setValue] = result.current;
+      setValue('new-value');
+    });
+
+    expect(handleError).toHaveBeenCalled();
+
+    // Restore original setItem
+    localStorage.setItem = originalSetItem;
+  });
+
+  it('should serialize and deserialize arrays', () => {
+    const initialArray = [1, 2, 3, 4, 5];
+    const { result } = renderHook(() => useLocalStorage('test-key', initialArray));
+
+    act(() => {
+      const [, setValue] = result.current;
+      setValue([...initialArray, 6]);
+    });
+
+    const [value] = result.current;
+    expect(value).toEqual([1, 2, 3, 4, 5, 6]);
+    expect(JSON.parse(localStorage.getItem('test-key')!)).toEqual([1, 2, 3, 4, 5, 6]);
+  });
+
+  it('should handle boolean values', () => {
+    const { result } = renderHook(() => useLocalStorage('test-key', false));
+
+    act(() => {
+      const [, setValue] = result.current;
+      setValue(true);
+    });
+
+    const [value] = result.current;
+    expect(value).toBe(true);
+    expect(JSON.parse(localStorage.getItem('test-key')!)).toBe(true);
+  });
+
+  it('should handle number values', () => {
+    const { result } = renderHook(() => useLocalStorage('test-key', 0));
+
+    act(() => {
+      const [, setValue] = result.current;
+      setValue(42);
+    });
+
+    const [value] = result.current;
+    expect(value).toBe(42);
+    expect(JSON.parse(localStorage.getItem('test-key')!)).toBe(42);
+  });
+
+  it('should handle null values', () => {
+    const { result } = renderHook(() => useLocalStorage<string | null>('test-key', null));
+
+    const [value] = result.current;
+    expect(value).toBe(null);
+  });
+
+  it('should update localStorage when key changes', () => {
+    const { result, rerender } = renderHook(
+      ({ key, value }) => useLocalStorage(key, value),
+      { initialProps: { key: 'key1', value: 'value1' } }
+    );
+
+    act(() => {
+      const [, setValue] = result.current;
+      setValue('updated-value1');
+    });
+
+    expect(localStorage.getItem('key1')).toBe(JSON.stringify('updated-value1'));
+
+    // Change the key
+    rerender({ key: 'key2', value: 'value2' });
+
+    act(() => {
+      const [, setValue] = result.current;
+      setValue('updated-value2');
+    });
+
+    expect(localStorage.getItem('key2')).toBe(JSON.stringify('updated-value2'));
+  });
+});

src/hooks/useLocalStorage.ts

@@ -0,0 +1,99 @@
+import { useState, useEffect, useCallback } from 'react';
+import { handleError } from '../utils/errorHandling';
+
+/**
+ * Function type for updating the stored value
+ * @template T - The type of the stored value
+ * @param value - Either a new value of type T or an updater function that takes the current value and returns a new value
+ */
+type SetValue<T> = (value: T | ((val: T) => T)) => void;
+
+/**
+ * Custom hook for managing state in localStorage with automatic serialization
+ *
+ * @template T - The type of the stored value
+ * @param {string} key - The localStorage key to use
+ * @param {T | (() => T)} initialValue - The initial value or a function that returns the initial value
+ * @returns {[T, SetValue<T>, () => void]} A tuple containing:
+ *   - The current stored value
+ *   - A function to update the stored value
+ *   - A function to remove the value from storage
+ *
+ * @example
+ * ```tsx
+ * const [theme, setTheme, removeTheme] = useLocalStorage('theme', 'light');
+ * setTheme('dark'); // Updates both state and localStorage
+ * removeTheme(); // Removes from localStorage and resets to initial value
+ * ```
+ *
+ * @remarks
+ * - SSR-safe: Returns initial value during server-side rendering
+ * - Automatically serializes/deserializes JSON
+ * - Handles localStorage quota exceeded errors
+ * - Handles invalid JSON gracefully
+ */
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T | (() => T)
+): [T, SetValue<T>, () => void] {
+  // Get initial value - SSR safe
+  const getInitialValue = useCallback((): T => {
+    // Check if we're in a browser environment
+    if (typeof window === 'undefined') {
+      return initialValue instanceof Function ? initialValue() : initialValue;
+    }
+
+    try {
+      const item = window.localStorage.getItem(key);
+      if (item) {
+        return JSON.parse(item) as T;
+      }
+    } catch (error) {
+      handleError(error, `LocalStorage Read (key: ${key})`);
+    }
+
+    return initialValue instanceof Function ? initialValue() : initialValue;
+  }, [key, initialValue]);
+
+  const [storedValue, setStoredValue] = useState<T>(getInitialValue);
+
+  // Update localStorage whenever storedValue changes
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    try {
+      window.localStorage.setItem(key, JSON.stringify(storedValue));
+    } catch (error) {
+      handleError(error, `LocalStorage Write (key: ${key})`);
+    }
+  }, [key, storedValue]);
+
+  // Set value function that supports both direct values and updater functions
+  const setValue: SetValue<T> = useCallback((value) => {
+    try {
+      setStoredValue((prevValue) => {
+        const newValue = value instanceof Function ? value(prevValue) : value;
+        return newValue;
+      });
+    } catch (error) {
+      handleError(error, `LocalStorage Update (key: ${key})`);
+    }
+  }, [key]);
+
+  // Remove value from localStorage and reset to initial value
+  const removeValue = useCallback(() => {
+    try {
+      if (typeof window !== 'undefined') {
+        window.localStorage.removeItem(key);
+      }
+      const resetValue = initialValue instanceof Function ? initialValue() : initialValue;
+      setStoredValue(resetValue);
+    } catch (error) {
+      handleError(error, `LocalStorage Remove (key: ${key})`);
+    }
+  }, [key, initialValue]);
+
+  return [storedValue, setValue, removeValue];
+}

src/lib/blog.ts

@@ -1,6 +1,5 @@
 import fs from 'fs';
 import path from 'path';
-import { cache } from '@/utils/cache';
 
 export interface BlogPost {
   slug: string;
@@ -131,14 +130,6 @@ function parseMarkdownPost(filename: string, content: string): BlogPost | null {
 }
 
 export function getAllBlogPosts(): BlogPost[] {
-  const cacheKey = 'blog:all-posts';
-
-  // Check cache first
-  const cachedPosts = cache.get<BlogPost[]>(cacheKey);
-  if (cachedPosts) {
-    return cachedPosts;
-  }
-
   if (!fs.existsSync(BLOG_POSTS_DIR)) {
     console.warn('Blog posts directory not found:', BLOG_POSTS_DIR);
     return [];
@@ -160,12 +151,7 @@ export function getAllBlogPosts(): BlogPost[] {
   }
 
   // Sort by date descending (newest first)
-  const sortedPosts = posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+  return posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
-
-  // Cache the results
-  cache.set(cacheKey, sortedPosts);
-
-  return sortedPosts;
 }
 
 export function getBlogPostBySlug(slug: string): BlogPost | null {