feat: setup frontend project with bun and dynamic data fetching

- Create new frontend project directory with Next.js 15 + React 19
- Migrate from pnpm to bun for faster package management
- Add TanStack Query + Axios for dynamic data fetching
- Create comprehensive Makefile with development commands
- Setup API layer with query hooks and error handling
- Configure environment variables and bun settings
- Add TypeScript type checking and project documentation
- Update CLAUDE.md with bun-specific development workflow

frontend/components/filter-bar.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+
+interface FilterBarProps {
+  activeCategory: string
+  onFilter: (category: string) => void
+}
+
+export function FilterBar({ activeCategory, onFilter }: FilterBarProps) {
+  const categories = [
+    { id: "all", name: "全部作品" },
+    { id: "urban", name: "城市风光" },
+    { id: "nature", name: "自然风景" },
+    { id: "portrait", name: "人像摄影" },
+    { id: "street", name: "街头摄影" },
+    { id: "architecture", name: "建筑摄影" },
+    { id: "macro", name: "微距摄影" },
+  ]
+
+  return (
+    <div className="flex flex-wrap justify-center gap-2 mb-12">
+      {categories.map((category) => (
+        <Button
+          key={category.id}
+          variant={activeCategory === category.id ? "default" : "outline"}
+          size="sm"
+          onClick={() => onFilter(category.id)}
+          className="transition-all duration-200 hover:scale-105"
+        >
+          {category.name}
+        </Button>
+      ))}
+    </div>
+  )
+}