fix: resolve hydration mismatch error and improve project setup

- Fix React hydration mismatch in ThemeProvider with mounted state check
- Update layout.tsx to use light theme by default instead of system
- Optimize photo filtering with useMemo in page.tsx
- Add Express mock API for development
- Update CLAUDE.md with comprehensive project documentation
- Create backend/ and admin/ directories for future development

frontend/app/page.tsx

@@ -15,7 +15,6 @@ import { useToast } from "@/components/ui/use-toast"
 export default function HomePage() {
   const { data: photos = [], isLoading, error } = usePhotos()
   const { toast } = useToast()
-  const [filteredPhotos, setFilteredPhotos] = useState<Photo[]>([])
   const [selectedPhoto, setSelectedPhoto] = useState<Photo | null>(null)
   const [activeCategory, setActiveCategory] = useState("all")
   const [activeTab, setActiveTab] = useState("gallery")
@@ -30,17 +29,15 @@ export default function HomePage() {
     }
   }, [error, toast])
 
-  useEffect(() => {
-    setFilteredPhotos(photos)
-  }, [photos])
+  const filteredPhotos = useMemo(() => {
+    if (activeCategory === "all") {
+      return photos
+    }
+    return photos.filter((photo) => photo.category === activeCategory)
+  }, [photos, activeCategory])
 
   const handleFilter = (category: string) => {
     setActiveCategory(category)
-    if (category === "all") {
-      setFilteredPhotos(photos)
-    } else {
-      setFilteredPhotos(photos.filter((photo) => photo.category === category))
-    }
   }
 
   const handlePhotoClick = (photo: any) => {
@@ -72,7 +69,6 @@ export default function HomePage() {
     // Reset filters when switching tabs
     if (tab === "timeline") {
       setActiveCategory("all")
-      setFilteredPhotos(photos)
     }
   }