inital working version

frontend/src/components/layout/AppLayout.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import Header from './Header';
+import ProtectedRoute from './ProtectedRoute';
+
+interface AppLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function AppLayout({ children }: AppLayoutProps) {
+  return (
+    <ProtectedRoute>
+      <div className="min-h-screen theme-bg">
+        <Header />
+        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          {children}
+        </main>
+      </div>
+    </ProtectedRoute>
+  );
+}

frontend/src/components/layout/Header.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '../../contexts/AuthContext';
+import { useTheme } from '../../lib/theme';
+import Button from '../ui/Button';
+
+export default function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const { logout } = useAuth();
+  const { theme, toggleTheme } = useTheme();
+  const router = useRouter();
+
+  const handleLogout = () => {
+    logout();
+    router.push('/login');
+  };
+
+  return (
+    <header className="theme-card theme-shadow border-b theme-border sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          {/* Logo and Brand */}
+          <Link href="/library" className="flex items-center space-x-3">
+            <Image
+              src={theme === 'dark' ? '/logo-dark-medium.png' : '/logo-medium.png'}
+              alt="StoryCove"
+              width={40}
+              height={40}
+              priority
+            />
+            <span className="text-xl font-bold theme-header hidden sm:block">
+              StoryCove
+            </span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center space-x-6">
+            <Link 
+              href="/library" 
+              className="theme-text hover:theme-accent transition-colors font-medium"
+            >
+              Library
+            </Link>
+            <Link 
+              href="/authors" 
+              className="theme-text hover:theme-accent transition-colors font-medium"
+            >
+              Authors
+            </Link>
+            <Link 
+              href="/add-story" 
+              className="theme-text hover:theme-accent transition-colors font-medium"
+            >
+              Add Story
+            </Link>
+          </nav>
+
+          {/* Right side actions */}
+          <div className="flex items-center space-x-4">
+            {/* Theme Toggle */}
+            <button
+              onClick={toggleTheme}
+              className="p-2 rounded-lg theme-text hover:theme-accent transition-colors"
+              aria-label="Toggle theme"
+            >
+              {theme === 'light' ? '🌙' : '☀️'}
+            </button>
+
+            {/* Settings */}
+            <Link
+              href="/settings"
+              className="p-2 rounded-lg theme-text hover:theme-accent transition-colors"
+              aria-label="Settings"
+            >
+              ⚙️
+            </Link>
+
+            {/* Logout */}
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleLogout}
+              className="hidden md:inline-flex"
+            >
+              Logout
+            </Button>
+
+            {/* Mobile menu button */}
+            <button
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+              className="md:hidden p-2 rounded-lg theme-text hover:theme-accent transition-colors"
+              aria-label="Toggle menu"
+            >
+              {isMenuOpen ? '✕' : '☰'}
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile Navigation */}
+        {isMenuOpen && (
+          <div className="md:hidden border-t theme-border py-4">
+            <div className="flex flex-col space-y-3">
+              <Link 
+                href="/library" 
+                className="theme-text hover:theme-accent transition-colors font-medium px-2 py-1"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Library
+              </Link>
+              <Link 
+                href="/authors" 
+                className="theme-text hover:theme-accent transition-colors font-medium px-2 py-1"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Authors
+              </Link>
+              <Link 
+                href="/add-story" 
+                className="theme-text hover:theme-accent transition-colors font-medium px-2 py-1"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Add Story
+              </Link>
+              <Link 
+                href="/settings" 
+                className="theme-text hover:theme-accent transition-colors font-medium px-2 py-1"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Settings
+              </Link>
+              <button 
+                onClick={handleLogout}
+                className="theme-text hover:theme-accent transition-colors font-medium px-2 py-1 text-left"
+              >
+                Logout
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}

frontend/src/components/layout/ProtectedRoute.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '../../contexts/AuthContext';
+import { FullPageSpinner } from '../ui/LoadingSpinner';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+export default function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { isAuthenticated, loading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!loading && !isAuthenticated) {
+      router.push('/login');
+    }
+  }, [isAuthenticated, loading, router]);
+
+  if (loading) {
+    return <FullPageSpinner />;
+  }
+
+  if (!isAuthenticated) {
+    return <FullPageSpinner />;
+  }
+
+  return <>{children}</>;
+}

frontend/src/components/stories/RichTextEditor.tsx

@@ -0,0 +1,184 @@
+'use client';
+
+import { useState, useRef } from 'react';
+import { Textarea } from '../ui/Input';
+import Button from '../ui/Button';
+
+interface RichTextEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  error?: string;
+}
+
+export default function RichTextEditor({ 
+  value, 
+  onChange, 
+  placeholder = 'Write your story here...',
+  error 
+}: RichTextEditorProps) {
+  const [viewMode, setViewMode] = useState<'visual' | 'html'>('visual');
+  const [htmlValue, setHtmlValue] = useState(value);
+  const previewRef = useRef<HTMLDivElement>(null);
+
+  const handleVisualChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const plainText = e.target.value;
+    // Convert plain text to basic HTML paragraphs
+    const htmlContent = plainText
+      .split('\n\n')
+      .filter(paragraph => paragraph.trim())
+      .map(paragraph => `<p>${paragraph.replace(/\n/g, '<br>')}</p>`)
+      .join('\n');
+    
+    onChange(htmlContent);
+    setHtmlValue(htmlContent);
+  };
+
+  const handleHtmlChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const html = e.target.value;
+    setHtmlValue(html);
+    onChange(html);
+  };
+
+  const getPlainText = (html: string): string => {
+    // Simple HTML to plain text conversion
+    return html
+      .replace(/<\/p>/gi, '\n\n')
+      .replace(/<br\s*\/?>/gi, '\n')
+      .replace(/<[^>]*>/g, '')
+      .replace(/\n{3,}/g, '\n\n')
+      .trim();
+  };
+
+  const formatText = (tag: string) => {
+    if (viewMode === 'visual') {
+      // For visual mode, we'll just show formatting helpers
+      // In a real implementation, you'd want a proper WYSIWYG editor
+      return;
+    }
+
+    const textarea = document.querySelector('textarea') as HTMLTextAreaElement;
+    if (!textarea) return;
+
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const selectedText = htmlValue.substring(start, end);
+    
+    if (selectedText) {
+      const beforeText = htmlValue.substring(0, start);
+      const afterText = htmlValue.substring(end);
+      const formattedText = `<${tag}>${selectedText}</${tag}>`;
+      const newValue = beforeText + formattedText + afterText;
+      
+      setHtmlValue(newValue);
+      onChange(newValue);
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between p-2 theme-card border theme-border rounded-t-lg">
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            onClick={() => setViewMode('visual')}
+            className={viewMode === 'visual' ? 'theme-accent-bg text-white' : ''}
+          >
+            Visual
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            onClick={() => setViewMode('html')}
+            className={viewMode === 'html' ? 'theme-accent-bg text-white' : ''}
+          >
+            HTML
+          </Button>
+        </div>
+
+        {viewMode === 'html' && (
+          <div className="flex items-center gap-1">
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              onClick={() => formatText('strong')}
+              title="Bold"
+            >
+              <strong>B</strong>
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              onClick={() => formatText('em')}
+              title="Italic"
+            >
+              <em>I</em>
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              onClick={() => formatText('p')}
+              title="Paragraph"
+            >
+              P
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* Editor */}
+      <div className="border theme-border rounded-b-lg overflow-hidden">
+        {viewMode === 'visual' ? (
+          <Textarea
+            value={getPlainText(value)}
+            onChange={handleVisualChange}
+            placeholder={placeholder}
+            rows={12}
+            className="border-0 rounded-none focus:ring-0"
+          />
+        ) : (
+          <Textarea
+            value={htmlValue}
+            onChange={handleHtmlChange}
+            placeholder="<p>Write your HTML content here...</p>"
+            rows={12}
+            className="border-0 rounded-none focus:ring-0 font-mono text-sm"
+          />
+        )}
+      </div>
+
+      {/* Preview for HTML mode */}
+      {viewMode === 'html' && value && (
+        <div className="space-y-2">
+          <h4 className="text-sm font-medium theme-header">Preview:</h4>
+          <div
+            ref={previewRef}
+            className="p-4 border theme-border rounded-lg theme-card max-h-40 overflow-y-auto"
+            dangerouslySetInnerHTML={{ __html: value }}
+          />
+        </div>
+      )}
+
+      {error && (
+        <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+      )}
+
+      <div className="text-xs theme-text">
+        <p>
+          <strong>Visual mode:</strong> Write in plain text, paragraphs will be automatically formatted.
+        </p>
+        <p>
+          <strong>HTML mode:</strong> Write HTML directly for advanced formatting. 
+          Allowed tags: p, br, strong, em, ul, ol, li, h1-h6, blockquote.
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/components/stories/StoryCard.tsx

@@ -0,0 +1,261 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { Story } from '../../types/api';
+import { storyApi, getImageUrl } from '../../lib/api';
+import Button from '../ui/Button';
+
+interface StoryCardProps {
+  story: Story;
+  viewMode: 'grid' | 'list';
+  onUpdate: () => void;
+}
+
+export default function StoryCard({ story, viewMode, onUpdate }: StoryCardProps) {
+  const [rating, setRating] = useState(story.rating || 0);
+  const [updating, setUpdating] = useState(false);
+
+  const handleRatingClick = async (newRating: number) => {
+    if (updating) return;
+    
+    try {
+      setUpdating(true);
+      await storyApi.updateRating(story.id, newRating);
+      setRating(newRating);
+      onUpdate();
+    } catch (error) {
+      console.error('Failed to update rating:', error);
+    } finally {
+      setUpdating(false);
+    }
+  };
+
+  const formatWordCount = (wordCount: number) => {
+    return wordCount.toLocaleString() + ' words';
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString();
+  };
+
+  if (viewMode === 'list') {
+    return (
+      <div className="theme-card theme-shadow rounded-lg p-4 hover:shadow-lg transition-shadow">
+        <div className="flex gap-4">
+          {/* Cover Image */}
+          <div className="flex-shrink-0">
+            <Link href={`/stories/${story.id}/detail`}>
+              <div className="w-16 h-20 bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
+                {story.coverPath ? (
+                  <Image
+                    src={getImageUrl(story.coverPath)}
+                    alt={story.title}
+                    width={64}
+                    height={80}
+                    className="w-full h-full object-cover"
+                    unoptimized
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center theme-text text-xs">
+                    📖
+                  </div>
+                )}
+              </div>
+            </Link>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-start justify-between">
+              <div className="min-w-0 flex-1">
+                <Link href={`/stories/${story.id}/detail`}>
+                  <h3 className="text-lg font-semibold theme-header hover:theme-accent transition-colors truncate">
+                    {story.title}
+                  </h3>
+                </Link>
+                
+                <Link href={`/authors/${story.authorId}`}>
+                  <p className="theme-text hover:theme-accent transition-colors">
+                    {story.authorName}
+                  </p>
+                </Link>
+
+                <div className="flex items-center gap-4 mt-2 text-sm theme-text">
+                  <span>{formatWordCount(story.wordCount)}</span>
+                  <span>{formatDate(story.createdAt)}</span>
+                  {story.seriesName && (
+                    <span>
+                      {story.seriesName} #{story.volume}
+                    </span>
+                  )}
+                </div>
+
+                {/* Tags */}
+                {Array.isArray(story.tags) && story.tags.length > 0 && (
+                  <div className="flex flex-wrap gap-1 mt-2">
+                    {story.tags.slice(0, 3).map((tag) => (
+                      <span
+                        key={tag.id}
+                        className="px-2 py-1 text-xs rounded theme-accent-bg text-white"
+                      >
+                        {tag.name}
+                      </span>
+                    ))}
+                    {story.tags.length > 3 && (
+                      <span className="px-2 py-1 text-xs theme-text">
+                        +{story.tags.length - 3} more
+                      </span>
+                    )}
+                  </div>
+                )}
+              </div>
+
+              {/* Actions */}
+              <div className="flex flex-col items-end gap-2 ml-4">
+                {/* Rating */}
+                <div className="flex gap-1">
+                  {[1, 2, 3, 4, 5].map((star) => (
+                    <button
+                      key={star}
+                      onClick={() => handleRatingClick(star)}
+                      className={`text-lg ${
+                        star <= rating
+                          ? 'text-yellow-400'
+                          : 'text-gray-300 dark:text-gray-600'
+                      } hover:text-yellow-400 transition-colors ${
+                        updating ? 'cursor-not-allowed' : 'cursor-pointer'
+                      }`}
+                      disabled={updating}
+                    >
+                      ★
+                    </button>
+                  ))}
+                </div>
+
+                {/* Action Buttons */}
+                <div className="flex flex-col gap-2">
+                  <Link href={`/stories/${story.id}`}>
+                    <Button size="sm" className="w-full">
+                      Read
+                    </Button>
+                  </Link>
+                  <Link href={`/stories/${story.id}/edit`}>
+                    <Button size="sm" variant="ghost" className="w-full">
+                      Edit
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Grid view
+  return (
+    <div className="theme-card theme-shadow rounded-lg overflow-hidden hover:shadow-lg transition-shadow group">
+      {/* Cover Image */}
+      <Link href={`/stories/${story.id}`}>
+        <div className="aspect-[3/4] bg-gray-200 dark:bg-gray-700 overflow-hidden">
+          {story.coverPath ? (
+            <Image
+              src={getImageUrl(story.coverPath)}
+              alt={story.title}
+              width={300}
+              height={400}
+              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+              unoptimized
+            />
+          ) : (
+            <div className="w-full h-full flex items-center justify-center theme-text text-6xl">
+              📖
+            </div>
+          )}
+        </div>
+      </Link>
+
+      <div className="p-4">
+        {/* Title and Author */}
+        <Link href={`/stories/${story.id}`}>
+          <h3 className="font-semibold theme-header hover:theme-accent transition-colors line-clamp-2 mb-1">
+            {story.title}
+          </h3>
+        </Link>
+        
+        <Link href={`/authors/${story.authorId}`}>
+          <p className="text-sm theme-text hover:theme-accent transition-colors mb-2">
+            {story.authorName}
+          </p>
+        </Link>
+
+        {/* Rating */}
+        <div className="flex gap-1 mb-2">
+          {[1, 2, 3, 4, 5].map((star) => (
+            <button
+              key={star}
+              onClick={() => handleRatingClick(star)}
+              className={`text-sm ${
+                star <= rating
+                  ? 'text-yellow-400'
+                  : 'text-gray-300 dark:text-gray-600'
+              } hover:text-yellow-400 transition-colors ${
+                updating ? 'cursor-not-allowed' : 'cursor-pointer'
+              }`}
+              disabled={updating}
+            >
+              ★
+            </button>
+          ))}
+        </div>
+
+        {/* Metadata */}
+        <div className="text-xs theme-text space-y-1">
+          <div>{formatWordCount(story.wordCount)}</div>
+          <div>{formatDate(story.createdAt)}</div>
+          {story.seriesName && (
+            <div>
+              {story.seriesName} #{story.volume}
+            </div>
+          )}
+        </div>
+
+        {/* Tags */}
+        {Array.isArray(story.tags) && story.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1 mt-2">
+            {story.tags.slice(0, 2).map((tag) => (
+              <span
+                key={tag.id}
+                className="px-2 py-1 text-xs rounded theme-accent-bg text-white"
+              >
+                {tag.name}
+              </span>
+            ))}
+            {story.tags.length > 2 && (
+              <span className="px-2 py-1 text-xs theme-text">
+                +{story.tags.length - 2}
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex gap-2 mt-4">
+          <Link href={`/stories/${story.id}`} className="flex-1">
+            <Button size="sm" className="w-full">
+              Read
+            </Button>
+          </Link>
+          <Link href={`/stories/${story.id}/edit`}>
+            <Button size="sm" variant="ghost">
+              Edit
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/stories/StoryRating.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useState } from 'react';
+
+interface StoryRatingProps {
+  rating: number;
+  onRatingChange: (rating: number) => void;
+  readonly?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export default function StoryRating({ 
+  rating, 
+  onRatingChange, 
+  readonly = false,
+  size = 'md'
+}: StoryRatingProps) {
+  const [hoveredRating, setHoveredRating] = useState(0);
+  const [updating, setUpdating] = useState(false);
+
+  const sizeClasses = {
+    sm: 'text-sm',
+    md: 'text-lg',
+    lg: 'text-2xl',
+  };
+
+  const handleRatingClick = async (newRating: number) => {
+    if (readonly || updating) return;
+    
+    try {
+      setUpdating(true);
+      await onRatingChange(newRating);
+    } catch (error) {
+      console.error('Failed to update rating:', error);
+    } finally {
+      setUpdating(false);
+    }
+  };
+
+  const displayRating = hoveredRating || rating;
+
+  return (
+    <div className="flex items-center gap-1">
+      {[1, 2, 3, 4, 5].map((star) => (
+        <button
+          key={star}
+          onClick={() => handleRatingClick(star)}
+          onMouseEnter={() => !readonly && setHoveredRating(star)}
+          onMouseLeave={() => !readonly && setHoveredRating(0)}
+          disabled={readonly || updating}
+          className={`${sizeClasses[size]} ${
+            star <= displayRating
+              ? 'text-yellow-400'
+              : 'text-gray-300 dark:text-gray-600'
+          } ${
+            readonly 
+              ? 'cursor-default' 
+              : updating 
+                ? 'cursor-not-allowed' 
+                : 'cursor-pointer hover:text-yellow-400'
+          } transition-colors`}
+          aria-label={`Rate ${star} star${star !== 1 ? 's' : ''}`}
+        >
+          ★
+        </button>
+      ))}
+      
+      {!readonly && (
+        <span className="ml-2 text-sm theme-text">
+          {rating > 0 ? `(${rating}/5)` : 'Rate this story'}
+        </span>
+      )}
+      
+      {updating && (
+        <span className="ml-2 text-sm theme-text">Saving...</span>
+      )}
+    </div>
+  );
+}

frontend/src/components/stories/TagFilter.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Tag } from '../../types/api';
+
+interface TagFilterProps {
+  tags: Tag[];
+  selectedTags: string[];
+  onTagToggle: (tagName: string) => void;
+}
+
+export default function TagFilter({ tags, selectedTags, onTagToggle }: TagFilterProps) {
+  if (!Array.isArray(tags) || tags.length === 0) return null;
+
+  // Sort tags by usage count (descending) and then alphabetically
+  const sortedTags = [...tags].sort((a, b) => {
+    const aCount = a.storyCount || 0;
+    const bCount = b.storyCount || 0;
+    if (bCount !== aCount) {
+      return bCount - aCount;
+    }
+    return a.name.localeCompare(b.name);
+  });
+
+  return (
+    <div className="space-y-2">
+      <h3 className="text-sm font-medium theme-header">Filter by Tags:</h3>
+      <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
+        {sortedTags.map((tag) => {
+          const isSelected = selectedTags.includes(tag.name);
+          
+          return (
+            <button
+              key={tag.id}
+              onClick={() => onTagToggle(tag.name)}
+              className={`px-3 py-1 text-sm rounded-full border transition-colors ${
+                isSelected
+                  ? 'theme-accent-bg text-white border-transparent'
+                  : 'theme-card theme-text theme-border hover:border-gray-400'
+              }`}
+            >
+              {tag.name} ({tag.storyCount || 0})
+            </button>
+          );
+        })}
+      </div>
+      
+      {selectedTags.length > 0 && (
+        <div className="text-sm theme-text">
+          Filtering by: {selectedTags.join(', ')}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/stories/TagInput.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { tagApi } from '../../lib/api';
+
+interface TagInputProps {
+  tags: string[];
+  onChange: (tags: string[]) => void;
+  placeholder?: string;
+}
+
+export default function TagInput({ tags, onChange, placeholder = 'Add tags...' }: TagInputProps) {
+  const [inputValue, setInputValue] = useState('');
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(-1);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const suggestionsRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const fetchSuggestions = async () => {
+      if (inputValue.length > 0) {
+        try {
+          const suggestionList = await tagApi.getTagAutocomplete(inputValue);
+          // Filter out already selected tags
+          const filteredSuggestions = suggestionList.filter(
+            suggestion => !tags.includes(suggestion)
+          );
+          setSuggestions(filteredSuggestions);
+          setShowSuggestions(filteredSuggestions.length > 0);
+        } catch (error) {
+          console.error('Failed to fetch tag suggestions:', error);
+          setSuggestions([]);
+          setShowSuggestions(false);
+        }
+      } else {
+        setSuggestions([]);
+        setShowSuggestions(false);
+      }
+    };
+
+    const debounce = setTimeout(fetchSuggestions, 300);
+    return () => clearTimeout(debounce);
+  }, [inputValue, tags]);
+
+  const addTag = (tag: string) => {
+    const trimmedTag = tag.trim().toLowerCase();
+    if (trimmedTag && !tags.includes(trimmedTag)) {
+      onChange([...tags, trimmedTag]);
+    }
+    setInputValue('');
+    setShowSuggestions(false);
+    setActiveSuggestionIndex(-1);
+  };
+
+  const removeTag = (tagToRemove: string) => {
+    onChange(tags.filter(tag => tag !== tagToRemove));
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    switch (e.key) {
+      case 'Enter':
+      case ',':
+        e.preventDefault();
+        if (activeSuggestionIndex >= 0 && suggestions[activeSuggestionIndex]) {
+          addTag(suggestions[activeSuggestionIndex]);
+        } else if (inputValue.trim()) {
+          addTag(inputValue);
+        }
+        break;
+        
+      case 'Backspace':
+        if (!inputValue && tags.length > 0) {
+          removeTag(tags[tags.length - 1]);
+        }
+        break;
+        
+      case 'ArrowDown':
+        e.preventDefault();
+        setActiveSuggestionIndex(prev => 
+          prev < suggestions.length - 1 ? prev + 1 : prev
+        );
+        break;
+        
+      case 'ArrowUp':
+        e.preventDefault();
+        setActiveSuggestionIndex(prev => prev > 0 ? prev - 1 : -1);
+        break;
+        
+      case 'Escape':
+        setShowSuggestions(false);
+        setActiveSuggestionIndex(-1);
+        break;
+    }
+  };
+
+  const handleSuggestionClick = (suggestion: string) => {
+    addTag(suggestion);
+    inputRef.current?.focus();
+  };
+
+  return (
+    <div className="relative">
+      <div className="min-h-[2.5rem] w-full px-3 py-2 border rounded-lg theme-card theme-text theme-border focus-within:outline-none focus-within:ring-2 focus-within:ring-theme-accent focus-within:border-transparent">
+        <div className="flex flex-wrap gap-2">
+          {/* Existing Tags */}
+          {tags.map((tag) => (
+            <span
+              key={tag}
+              className="inline-flex items-center px-2 py-1 text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded"
+            >
+              {tag}
+              <button
+                type="button"
+                onClick={() => removeTag(tag)}
+                className="ml-1 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100"
+              >
+                ×
+              </button>
+            </span>
+          ))}
+          
+          {/* Input */}
+          <input
+            ref={inputRef}
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onFocus={() => inputValue && setShowSuggestions(suggestions.length > 0)}
+            onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
+            placeholder={tags.length === 0 ? placeholder : ''}
+            className="flex-1 min-w-[120px] bg-transparent outline-none"
+          />
+        </div>
+      </div>
+
+      {/* Suggestions Dropdown */}
+      {showSuggestions && suggestions.length > 0 && (
+        <div
+          ref={suggestionsRef}
+          className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border theme-border rounded-lg shadow-lg max-h-48 overflow-y-auto"
+        >
+          {suggestions.map((suggestion, index) => (
+            <button
+              key={suggestion}
+              type="button"
+              onClick={() => handleSuggestionClick(suggestion)}
+              className={`w-full text-left px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 ${
+                index === activeSuggestionIndex
+                  ? 'bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100'
+                  : 'theme-text'
+              } ${index === 0 ? 'rounded-t-lg' : ''} ${
+                index === suggestions.length - 1 ? 'rounded-b-lg' : ''
+              }`}
+            >
+              {suggestion}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <p className="mt-1 text-xs text-gray-500">
+        Type and press Enter or comma to add tags
+      </p>
+    </div>
+  );
+}

frontend/src/components/ui/Button.tsx

@@ -0,0 +1,57 @@
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+import Link from 'next/link';
+import LoadingSpinner from './LoadingSpinner';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+  size?: 'sm' | 'md' | 'lg';
+  loading?: boolean;
+  href?: string;
+  children: React.ReactNode;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = 'primary', size = 'md', loading = false, href, className = '', children, disabled, ...props }, ref) => {
+    const baseClasses = 'inline-flex items-center justify-center rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
+    
+    const variantClasses = {
+      primary: 'theme-accent-bg text-white hover:theme-accent-bg focus:ring-theme-accent',
+      secondary: 'theme-card theme-text border theme-border hover:bg-opacity-80 focus:ring-theme-accent',
+      ghost: 'theme-text hover:bg-gray-100 dark:hover:bg-gray-800 focus:ring-theme-accent',
+      danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
+    };
+    
+    const sizeClasses = {
+      sm: 'px-3 py-1.5 text-sm',
+      md: 'px-4 py-2 text-sm',
+      lg: 'px-6 py-3 text-base',
+    };
+
+    const combinedClasses = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
+
+    if (href) {
+      return (
+        <Link href={href} className={combinedClasses}>
+          {loading && <LoadingSpinner size="sm" className="mr-2" />}
+          {children}
+        </Link>
+      );
+    }
+
+    return (
+      <button
+        ref={ref}
+        className={combinedClasses}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading && <LoadingSpinner size="sm" className="mr-2" />}
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export default Button;

frontend/src/components/ui/ImageUpload.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import Image from 'next/image';
+
+interface ImageUploadProps {
+  onImageSelect: (file: File | null) => void;
+  accept?: string;
+  maxSizeMB?: number;
+  aspectRatio?: string;
+  placeholder?: string;
+  currentImageUrl?: string;
+}
+
+export default function ImageUpload({
+  onImageSelect,
+  accept = 'image/*',
+  maxSizeMB = 5,
+  aspectRatio = '1:1',
+  placeholder = 'Drop an image here or click to select',
+  currentImageUrl,
+}: ImageUploadProps) {
+  const [preview, setPreview] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const onDrop = useCallback((acceptedFiles: File[], rejectedFiles: any[]) => {
+    setError(null);
+
+    if (rejectedFiles.length > 0) {
+      const rejection = rejectedFiles[0];
+      if (rejection.errors?.[0]?.code === 'file-too-large') {
+        setError(`File is too large. Maximum size is ${maxSizeMB}MB.`);
+      } else if (rejection.errors?.[0]?.code === 'file-invalid-type') {
+        setError('Invalid file type. Please select an image file.');
+      } else {
+        setError('File rejected. Please try another file.');
+      }
+      return;
+    }
+
+    const file = acceptedFiles[0];
+    if (file) {
+      // Create preview
+      const previewUrl = URL.createObjectURL(file);
+      setPreview(previewUrl);
+      onImageSelect(file);
+    }
+  }, [onImageSelect, maxSizeMB]);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      'image/*': accept.split(',').map(type => type.trim()),
+    },
+    maxFiles: 1,
+    maxSize: maxSizeMB * 1024 * 1024, // Convert MB to bytes
+  });
+
+  const clearImage = () => {
+    setPreview(null);
+    setError(null);
+    onImageSelect(null);
+  };
+
+  const aspectRatioClass = {
+    '1:1': 'aspect-square',
+    '3:4': 'aspect-[3/4]',
+    '4:3': 'aspect-[4/3]',
+    '16:9': 'aspect-video',
+  }[aspectRatio] || 'aspect-square';
+
+  const displayImage = preview || currentImageUrl;
+
+  return (
+    <div className="space-y-4">
+      <div
+        {...getRootProps()}
+        className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${
+          isDragActive
+            ? 'border-blue-400 bg-blue-50 dark:bg-blue-900/20'
+            : error
+            ? 'border-red-300 bg-red-50 dark:bg-red-900/20'
+            : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'
+        } ${displayImage ? 'p-0 border-0' : ''}`}
+      >
+        <input {...getInputProps()} />
+        
+        {displayImage ? (
+          <div className={`relative ${aspectRatioClass} rounded-lg overflow-hidden group`}>
+            <Image
+              src={displayImage}
+              alt="Preview"
+              fill
+              className="object-cover"
+            />
+            <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all duration-200 flex items-center justify-center">
+              <div className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 space-x-2">
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    clearImage();
+                  }}
+                  className="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700 transition-colors"
+                >
+                  Remove
+                </button>
+                <span className="text-white text-sm">
+                  or click to change
+                </span>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            <div className="text-4xl theme-text">📸</div>
+            <div className="theme-text">
+              {isDragActive ? (
+                <p>Drop the image here...</p>
+              ) : (
+                <p>{placeholder}</p>
+              )}
+            </div>
+            <p className="text-sm text-gray-500">
+              Supports JPEG, PNG, WebP up to {maxSizeMB}MB
+            </p>
+          </div>
+        )}
+      </div>
+
+      {error && (
+        <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+      )}
+    </div>
+  );
+}

frontend/src/components/ui/Input.tsx

@@ -0,0 +1,66 @@
+import { InputHTMLAttributes, forwardRef, TextareaHTMLAttributes } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: string;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ label, error, className = '', ...props }, ref) => {
+    const baseClasses = 'w-full px-3 py-2 border rounded-lg theme-card theme-text theme-border focus:outline-none focus:ring-2 focus:ring-theme-accent focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed';
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label className="block text-sm font-medium theme-header mb-1">
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          className={`${baseClasses} ${error ? 'border-red-500' : ''} ${className}`}
+          {...props}
+        />
+        {error && (
+          <p className="mt-1 text-sm text-red-600">{error}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ label, error, className = '', rows = 4, ...props }, ref) => {
+    const baseClasses = 'w-full px-3 py-2 border rounded-lg theme-card theme-text theme-border focus:outline-none focus:ring-2 focus:ring-theme-accent focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed resize-vertical';
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label className="block text-sm font-medium theme-header mb-1">
+            {label}
+          </label>
+        )}
+        <textarea
+          ref={ref}
+          rows={rows}
+          className={`${baseClasses} ${error ? 'border-red-500' : ''} ${className}`}
+          {...props}
+        />
+        {error && (
+          <p className="mt-1 text-sm text-red-600">{error}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';
+
+export { Input, Textarea };

frontend/src/components/ui/LoadingSpinner.tsx

@@ -0,0 +1,29 @@
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export default function LoadingSpinner({ size = 'md', className = '' }: LoadingSpinnerProps) {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-8 h-8',
+    lg: 'w-12 h-12',
+  };
+
+  return (
+    <div className={`inline-block ${sizeClasses[size]} ${className}`}>
+      <div className="animate-spin rounded-full border-2 border-gray-300 border-t-theme-accent" />
+    </div>
+  );
+}
+
+export function FullPageSpinner() {
+  return (
+    <div className="min-h-screen flex items-center justify-center theme-bg">
+      <div className="text-center">
+        <LoadingSpinner size="lg" className="mb-4" />
+        <p className="theme-text">Loading StoryCove...</p>
+      </div>
+    </div>
+  );
+}