You are an expert AI full-stack developer tasked with creating a single-page application (SPA) for a platform called 'Kayıp Miras' (Lost Heritage). This platform aims to discover, restore, and make accessible lost or forgotten digital content like films, music, and documents. The user problem stems from the difficulty in finding and accessing rare or historical digital artifacts, as exemplified by the Hacker News post about lost Doctor Who episodes being found. This application will serve as a central hub for users to upload, tag, discuss, and even begin the restoration process for such content.
## 1. PROJECT OVERVIEW:
**Goal:** To build a web application that allows users to upload, discover, catalog, and initiate the restoration of lost or forgotten digital content.
**Problem Solved:** Addresses the fragmentation and inaccessibility of historical digital media, making it easier for users to find, preserve, and engage with cultural heritage.
**Value Proposition:** 'Kayıp Miras' empowers users to become digital archivists, fostering a community around the preservation and rediscovery of lost media, offering tools for both discovery and basic restoration.
## 2. TECH STACK:
- **Frontend Framework:** React (using Vite for fast development)
- **Styling:** Tailwind CSS for rapid UI development and utility-first styling.
- **State Management:** Zustand for efficient and simple global state management.
- **Routing:** React Router DOM for navigation within the SPA.
- **API Interaction:** Axios for making HTTP requests to a potential backend (though MVP will focus on local storage/mock data).
- **Animation Library:** Framer Motion for smooth and engaging UI animations.
- **Form Handling:** React Hook Form for efficient and validated form management.
- **Icons:** React Icons for a wide variety of icons.
## 3. CORE FEATURES:
- **Content Discovery & Upload:**
- **User Flow:** Users can access a main dashboard displaying recent uploads, trending items, and search functionality. A prominent 'Upload' button leads to a form where users can submit digital files (video, audio, image, document formats). They fill in metadata (title, description, year, tags, content type). Initially, uploads will be mocked or stored locally. The system will allow users to flag content as 'lost' or 'forgotten'.
- **Details:** Search bar with filtering options (content type, year, tags). A browse page with sortable columns. Upload form with file input and metadata fields.
- **Community Curation & Discussion:**
- **User Flow:** Each uploaded content item has a dedicated page showing its details, metadata, and user-submitted tags. Below this, there's a comment section for discussion, additional information, and collaboration. A voting system (upvote/downvote) allows the community to prioritize content for restoration or attention.
- **Details:** Commenting system with user authentication (mocked for MVP), upvote/downvote buttons, displayed vote counts.
- **Basic Restoration Tools (MVP Focus):**
- **User Flow:** For specific content types (e.g., old videos), a 'Restore' button is available. Clicking this opens a modal or a dedicated section with simple tools like 'Auto Enhance Color', 'Noise Reduction'. Users can apply these with a single click. A preview of the 'restored' version is shown alongside the original.
- **Details:** Simple sliders or buttons for restoration options. Real-time or near-real-time preview. This will heavily rely on client-side image/video manipulation libraries (e.g., simple filters) or mock results for MVP.
- **Content Preview & Access:**
- **User Flow:** Users can preview uploaded content directly on the platform (e.g., video player, audio player, image viewer). If content is deemed 'restored' or accessible, a download link or button may be provided (subject to content rights, handled via metadata).
- **Details:** Integrated media players. Clear display of content status (original, restored, preview). Placeholder for download functionality.
## 4. UI/UX DESIGN:
- **Layout:** A clean, modern, and intuitive single-page application layout. A persistent navigation sidebar (collapsible on smaller screens) for main sections (Discover, Upload, My Archive, About). The main content area will adapt dynamically. A clear header with the app logo and search bar.
- **Color Palette:** Primary: Deep Navy Blue (#0A192F) - evokes depth, history, mystery. Secondary: Muted Gold (#DAA520) - suggests value, discovery, heritage. Accent: Off-White (#F5F5DC) for background elements and text. Subtle grays for borders and secondary text. Use of dark mode by default.
- **Typography:** Main Headings: 'Poppins' (Bold, Semibold). Body Text: 'Inter' (Regular, Medium). Ensure high readability and accessibility.
- **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on mobile. Content cards stack vertically. Forms and media players are optimized for smaller screens. Use of Tailwind CSS's responsive modifiers (sm:, md:, lg:).
- **Interactions:** Subtle hover effects on buttons and links. Smooth transitions between page states and sections using Framer Motion. Loading spinners and skeleton screens for data fetching.
## 5. DATA MODEL (Mock Data & State Structure):
- **Content Item Structure:**
```json
{
"id": "string",
"title": "string",
"description": "string",
"year": "number | null",
"tags": ["string"],
"contentType": "video" | "audio" | "document" | "image",
"sourceUrl": "string | null", // URL to the original/uploaded file
"restoredUrl": "string | null", // URL to the processed file
"status": "original" | "processing" | "restored" | "lost",
"uploadDate": "string (ISO Date)",
"votes": {
"up": "number",
"down": "number"
},
"comments": [
{
"id": "string",
"userId": "string", // Mock user ID
"username": "string",
"text": "string",
"timestamp": "string (ISO Date)"
}
]
}
```
- **Global State (Zustand):**
- `contentStore`: Holds the array of `contentItems`, `isLoading`, `error` states.
- `selectedContent`: Holds the currently viewed content item.
- `currentUser`: Mock user data for authentication simulation.
- `uiState`: For modal visibility, sidebar state, etc.
- **Local Storage:** Used for persisting user preferences (e.g., theme choice, sidebar state) and potentially caching some fetched data for offline access simulation.
## 6. COMPONENT BREAKDOWN:
- **`App.jsx`:** Main application component, sets up routing and global layout.
- **`Layout.jsx`:** Wrapper component including Header, Sidebar, and main content area.
- **`Header.jsx`:** Contains logo, search bar, user profile/login button.
- **`Sidebar.jsx`:** Navigation links (Discover, Upload, My Archive, etc.).
- Props: `isOpen`, `onClose`
- **`DiscoverPage.jsx`:** Main content page displaying content cards.
- Props: None (fetches data from `contentStore`)
- **`ContentCard.jsx`:** Displays a summary of a content item.
- Props: `item` (Content Item Object)
- **`ContentDetailPage.jsx`:** Displays full details of a content item, including player, metadata, comments, and restoration options.
- Props: `contentId`
- **`MediaPlayer.jsx`:** Generic media player component (handles video, audio).
- Props: `url`, `contentType`
- **`UploadForm.jsx`:** Form for uploading new content and entering metadata.
- Props: `onSubmit`
- **`CommentSection.jsx`:** Displays and handles comments for a content item.
- Props: `comments`, `contentId`
- **`RestoreModal.jsx`:** Modal for applying basic restoration tools.
- Props: `item`, `onApplyRestore`
- **`SearchBar.jsx`:** Input component for searching content.
- Props: `onSearch`
- **`Button.jsx`:** Reusable custom button component.
- Props: `children`, `onClick`, `variant`, `isLoading`
- **`Modal.jsx`:** Generic modal component.
- Props: `isOpen`, `onClose`, `children`
## 7. ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Smooth fade-in/fade-out or slide transitions between pages using `AnimatePresence` from Framer Motion.
- **Button Hovers:** Subtle scale or background color change on interactive elements.
- **Loading States:** Use of `react-spinners` or custom SVG loaders within buttons and content cards while data is being fetched. Skeleton screens for list items.
- **Upload Progress:** Visual progress bar or indicator during file upload (simulated for MVP).
- **Micro-interactions:** Hovering over votes shows the count change; clicking 'Restore' triggers a brief animation or status update.
- **Sidebar Toggle:** Smooth sliding animation for the sidebar.
## 8. EDGE CASES:
- **Empty States:** Display user-friendly messages and clear calls to action when lists are empty (e.g., "No content found. Be the first to upload!").
- **Error Handling:** Global error boundary component. Specific error messages for failed uploads, API requests, or restoration processes. Displaying clear error states in UI.
- **Validation:** Input validation on the upload form (required fields, year format, file type restrictions). Client-side and potentially server-side validation if an API is introduced.
- **Accessibility (a11y):** Semantic HTML elements, ARIA attributes where necessary, keyboard navigation support, sufficient color contrast ratios, focus indicators.
- **File Size Limits:** Display clear limits and error messages if a user attempts to upload excessively large files (simulated).
- **Restoration Failure:** Graceful handling if a restoration process (even simulated) fails, providing feedback to the user.
## 9. SAMPLE DATA:
```json
[
{
"id": "doc-wh-001",
"title": "Doctor Who: The Nightmare Begins (Found Master)",
"description": "The first recovered episode of The Daleks' Master Plan arc, featuring William Hartnell. Believed lost for decades.",
"year": 1965,
"tags": ["doctor who", "scifi", "daleks", "bbc", "lost tv", "william hartnell"],
"contentType": "video",
"sourceUrl": "/mock/videos/dw_nightmare_original.mp4",
"restoredUrl": "/mock/videos/dw_nightmare_restored.mp4",
"status": "restored",
"uploadDate": "2024-03-10T10:00:00Z",
"votes": {"up": 296, "down": 5},
"comments": [
{
"id": "c-001",
"userId": "user-123",
"username": "SciFiFanatic",
"text": "Incredible find! This is a huge piece of TV history.",
"timestamp": "2024-03-10T11:30:00Z"
},
{
"id": "c-002",
"userId": "user-456",
"username": "DalekCollector",
"text": "Does anyone know the status of 'Day of Armageddon'?",
"timestamp": "2024-03-10T12:00:00Z"
}
]
},
{
"id": "audio-jazz-001",
"title": "The Lost Sessions - Duke Ellington Trio (1948)",
"description": "Previously unheard recordings from a private jazz session in Paris.",
"year": 1948,
"tags": ["jazz", "duke ellington", "live", "paris", "lost music"],
"contentType": "audio",
"sourceUrl": "/mock/audio/ellington_lost_session.mp3",
"restoredUrl": null,
"status": "original",
"uploadDate": "2024-03-11T09:15:00Z",
"votes": {"up": 150, "down": 2},
"comments": []
},
{
"id": "img-photo-001",
"title": "Berlin Street Scene - Unidentified Photographer (1930s)",
"description": "A striking black and white photograph capturing daily life in pre-war Berlin.",
"year": 1935,
"tags": ["photography", "berlin", "vintage", "street photography", "history"],
"contentType": "image",
"sourceUrl": "/mock/images/berlin_street_1930s.jpg",
"restoredUrl": null,
"status": "original",
"uploadDate": "2024-03-11T14:00:00Z",
"votes": {"up": 75, "down": 0},
"comments": []
},
{
"id": "doc-misc-001",
"title": "Personal Letters of Ada Lovelace - Transcripts",
"description": "Digitized transcripts of correspondence detailing early computational concepts.",
"year": 1840,
"tags": ["ada lovelace", "computing history", "letters", "transcripts", "science"],
"contentType": "document",
"sourceUrl": "/mock/docs/ada_lovelace_letters.pdf",
"restoredUrl": null,
"status": "original",
"uploadDate": "2024-03-12T11:05:00Z",
"votes": {"up": 210, "down": 3},
"comments": [
{
"id": "c-003",
"userId": "user-789",
"username": "HistoryBuff",
"text": "Vital for understanding the early days of programming.",
"timestamp": "2024-03-12T11:15:00Z"
}
]
},
{
"id": "vid-lost-002",
"title": "The Silent Starlet - Short Film (1920s, Fragment)",
"description": "A rare surviving fragment of an early silent film. Potential for restoration.",
"year": 1925,
"tags": ["silent film", "hollywood", "lost media", "archive", "movie fragment"],
"contentType": "video",
"sourceUrl": "/mock/videos/silent_starlet_fragment.mp4",
"restoredUrl": null,
"status": "original",
"uploadDate": "2024-03-13T08:30:00Z",
"votes": {"up": 110, "down": 1},
"comments": []
}
]
```
## 10. DEPLOYMENT NOTES:
- **Build Tool:** Vite (`npm run build`) configured for production optimization (code splitting, minification).
- **Environment Variables:** Use of `.env` files for managing API keys (if applicable later), base URLs, etc. `VITE_API_URL`, `VITE_MOCK_DATA_ENABLED=true`.
- **Hosting:** Suggesting static hosting platforms like Vercel, Netlify, or GitHub Pages for the frontend SPA. The initial phase focuses on client-side functionality.
- **Performance Optimizations:** Code splitting with React.lazy and Suspense. Image optimization (using appropriate formats and sizes). Lazy loading of components and media. Memoization of expensive calculations or components (`React.memo`, `useMemo`, `useCallback`).
- **Mock Server:** For initial development without a backend, consider using `msw` (Mock Service Worker) to intercept API calls and return mock data, providing a more realistic backend simulation.
- **CDN:** For larger mock files (videos, audio), consider using a CDN if self-hosting or linking to external mock file services.
- **Accessibility Audit:** Post-development, run accessibility audits using tools like Lighthouse or WAVE.