+ {page === 'detail' && selectedCollectionId && (
+ setPage('upload')}
+ />
+ )}
+
+ );
+}
+
+export default App;
\ No newline at end of file
diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/frontend/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/components/CollectionCard.css b/frontend/src/components/CollectionCard.css
new file mode 100644
index 0000000..da3e3c5
--- /dev/null
+++ b/frontend/src/components/CollectionCard.css
@@ -0,0 +1,68 @@
+.collection-card {
+ display: flex;
+ gap: 24px;
+ padding: 20px;
+ border: 2px solid #333;
+ border-radius: 12px;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+.collection-card:hover {
+ background-color: #f5f5f5;
+}
+
+.card-thumbnail {
+ flex-shrink: 0;
+ width: 180px;
+ height: 240px;
+ overflow: hidden;
+ border-radius: 8px;
+}
+
+.card-thumbnail img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+.card-info {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.card-title {
+ margin: 0;
+ padding: 8px 12px;
+ font-size: 18px;
+ border: 1px solid #333;
+ border-radius: 4px;
+}
+
+.card-artist {
+ margin: 0;
+ padding: 8px 12px;
+ font-size: 14px;
+ color: #666;
+ border: 1px solid #333;
+ border-radius: 4px;
+ width: fit-content;
+}
+
+.card-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ padding: 12px;
+ border: 1px solid #333;
+ border-radius: 4px;
+}
+
+.tag {
+ padding: 4px 12px;
+ font-size: 12px;
+ background-color: #e0e0e0;
+ border-radius: 16px;
+}
\ No newline at end of file
diff --git a/frontend/src/components/CollectionCard.tsx b/frontend/src/components/CollectionCard.tsx
new file mode 100644
index 0000000..c40fde3
--- /dev/null
+++ b/frontend/src/components/CollectionCard.tsx
@@ -0,0 +1,34 @@
+import type { ImageCollection } from '../types';
+import './CollectionCard.css';
+
+const API_BASE = 'http://localhost:8080';
+
+interface CollectionCardProps {
+ collection: ImageCollection;
+ onClick?: (collection: ImageCollection) => void;
+}
+
+export function CollectionCard({ collection, onClick }: CollectionCardProps) {
+ const handleClick = () => {
+ onClick?.(collection);
+ };
+
+ const thumbnailUrl = `${API_BASE}${collection.thumbnailUrl}`;
+
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/SearchBar.css b/frontend/src/components/SearchBar.css
new file mode 100644
index 0000000..a6155ee
--- /dev/null
+++ b/frontend/src/components/SearchBar.css
@@ -0,0 +1,19 @@
+.search-bar {
+ width: 100%;
+ padding: 16px;
+ box-sizing: border-box;
+}
+
+.search-input {
+ width: 100%;
+ padding: 12px 16px;
+ font-size: 16px;
+ border: 2px solid #333;
+ border-radius: 8px;
+ outline: none;
+ box-sizing: border-box;
+}
+
+.search-input:focus {
+ border-color: #007bff;
+}
\ No newline at end of file
diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx
new file mode 100644
index 0000000..3194ee0
--- /dev/null
+++ b/frontend/src/components/SearchBar.tsx
@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import './SearchBar.css';
+
+interface SearchBarProps {
+ onSearch: (query: string) => void;
+}
+
+export function SearchBar({ onSearch }: SearchBarProps) {
+ const [query, setQuery] = useState('');
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ onSearch(query);
+ };
+
+ const handleChange = (e: React.ChangeEvent
+ 
+
+
+
+ {collection.title}
+{collection.artist}
+
+ {collection.tags.map((tag, index) => (
+ {tag}
+ ))}
+
+ Loading...
;
+ if (error) return Error: {error}
;
+ if (!details) return Collection not found
;
+
+ return (
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/CollectionList.css b/frontend/src/pages/CollectionList.css
new file mode 100644
index 0000000..69d1d27
--- /dev/null
+++ b/frontend/src/pages/CollectionList.css
@@ -0,0 +1,49 @@
+.collection-list-page {
+ max-width: 1000px;
+ margin: 0 auto;
+ padding: 24px;
+}
+
+.list-header {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.list-header .search-bar {
+ flex: 1;
+}
+
+.upload-button {
+ padding: 10px 20px;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-size: 14px;
+ cursor: pointer;
+ white-space: nowrap;
+}
+
+.upload-button:hover {
+ background-color: #0056b3;
+}
+
+.collection-list {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.loading,
+.error,
+.no-results {
+ text-align: center;
+ padding: 40px;
+ color: #666;
+}
+
+.error {
+ color: #d32f2f;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/CollectionList.tsx b/frontend/src/pages/CollectionList.tsx
new file mode 100644
index 0000000..19ac884
--- /dev/null
+++ b/frontend/src/pages/CollectionList.tsx
@@ -0,0 +1,84 @@
+import { useState, useEffect } from 'react';
+import { SearchBar } from '../components/SearchBar';
+import { CollectionCard } from '../components/CollectionCard';
+import type { ImageCollection } from '../types';
+import './CollectionList.css';
+
+const API_BASE = 'http://localhost:8080';
+
+type Props = {
+ onSelectCollection: (id: string) => void;
+ onUploadClick: () => void;
+};
+
+export function CollectionList({ onSelectCollection, onUploadClick }: Props) {
+ const [collections, setCollections] = useState
+
+
+
+ 
+
+
+
+
+
+ {details.title}
+{details.artist}
+
+ {details.tags.map((tag, index) => (
+ {tag}
+ ))}
+
+ {details.description && (
+ {details.description}
+ )} +{details.fileCount} images
+ +
+
+
+ {viewerIndex !== null && (
+
+ {details.images.map((imageUrl, index) => (
+
+ setViewerIndex(index)}
+ >
+ 
+
+ ))}
+ setViewerIndex(null)}>
+
+ )}
+
+ {showDeleteConfirm && (
+ e.stopPropagation()}>
+
+
+
+ 
+
+
+
+ {viewerIndex + 1} / {details.images.length}
+
+ setShowDeleteConfirm(false)}>
+
+ )}
+ e.stopPropagation()}>
+
+ Delete Collection?
+Are you sure you want to delete "{details.title}"?
+This action cannot be undone.
+
+
+
+
+ Loading...
;
+ if (error) return Error: {error}
;
+
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/UploadCollection.css b/frontend/src/pages/UploadCollection.css
new file mode 100644
index 0000000..725d768
--- /dev/null
+++ b/frontend/src/pages/UploadCollection.css
@@ -0,0 +1,99 @@
+.upload-page {
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 24px;
+}
+
+.upload-header {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin-bottom: 24px;
+}
+
+.upload-header h1 {
+ margin: 0;
+ font-size: 24px;
+}
+
+.back-button {
+ background: none;
+ border: 1px solid #ddd;
+ padding: 8px 16px;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+}
+
+.back-button:hover {
+ background-color: #f5f5f5;
+}
+
+.upload-form {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.form-group {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.form-group label {
+ font-weight: 500;
+ font-size: 14px;
+ color: #333;
+}
+
+.form-group input[type="text"],
+.form-group textarea {
+ padding: 12px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 14px;
+ font-family: inherit;
+}
+
+.form-group input[type="text"]:focus,
+.form-group textarea:focus {
+ outline: none;
+ border-color: #007bff;
+}
+
+.form-group input[type="file"] {
+ padding: 8px 0;
+}
+
+.file-info {
+ font-size: 12px;
+ color: #666;
+}
+
+.error-message {
+ color: #d32f2f;
+ font-size: 14px;
+ padding: 12px;
+ background-color: #ffebee;
+ border-radius: 4px;
+}
+
+.submit-button {
+ padding: 14px 24px;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-size: 16px;
+ cursor: pointer;
+}
+
+.submit-button:hover:not(:disabled) {
+ background-color: #0056b3;
+}
+
+.submit-button:disabled {
+ background-color: #ccc;
+ cursor: not-allowed;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/UploadCollection.tsx b/frontend/src/pages/UploadCollection.tsx
new file mode 100644
index 0000000..e38f0ac
--- /dev/null
+++ b/frontend/src/pages/UploadCollection.tsx
@@ -0,0 +1,182 @@
+import { useState, useRef } from 'react';
+import './UploadCollection.css';
+
+const API_BASE = 'http://localhost:8080';
+
+type Props = {
+ onBack: () => void;
+ onSuccess: () => void;
+};
+
+export function UploadCollection({ onBack, onSuccess }: Props) {
+ const [title, setTitle] = useState('');
+ const [artist, setArtist] = useState('');
+ const [tags, setTags] = useState('');
+ const [description, setDescription] = useState('');
+ const [images, setImages] = useState
+
+
+ {filteredCollections.map((collection) => (
+
+ No collections found
+ )}
+
+
+
+
+
+