PROJECT OVERVIEW:
The application, tentatively named 'AnıTozu' (meaning 'Memory Dust' in Turkish), is a digital platform designed to preserve and share the memories, stories, and digital legacy of departed loved ones. In a world where digital footprints are increasingly common but often scattered and lost, AnıTozu provides a structured, respectful, and accessible way for users to curate and relive these precious moments. It addresses the emotional need to keep memories alive and allows for the creation of a lasting digital memorial that can be passed down through generations. The core value proposition is to transform scattered digital remnants and fading memories into a cohesive, interactive, and enduring legacy, offering comfort and connection to those grieving and a rich historical record for future family members.
TECH STACK:
- Frontend Framework: React (using Create React App or Vite for faster development)
- Styling: Tailwind CSS for utility-first styling and rapid UI development.
- State Management: Zustand for its simplicity and performance in managing global and local component states.
- Routing: React Router DOM for client-side navigation.
- UI Components: Potentially headless UI components or custom-built components styled with Tailwind.
- Icons: Heroicons or Font Awesome.
- Date Handling: date-fns or Moment.js for robust date and time manipulation.
- Storage: Local Storage for basic user preferences and offline data caching (if applicable for MVP), but primarily designed for future backend integration (e.g., Firebase, Supabase, or custom API).
CORE FEATURES:
1. **User Authentication & Profile Management:**
* **Flow:** Users sign up using email/password or social login (Google/Facebook). After registration, they are prompted to create their main profile, which can represent themselves or serve as the primary 'memorial' profile for a loved one.
* **Details:** Profile includes fields for name, relationship to the deceased (if applicable), birth/death dates, profile picture, and a short biography.
2. **Memory Creation & Upload:**
* **Flow:** Within a profile, users can click 'Add Memory'. They choose the memory type (text, photo, video, audio). For text, a rich text editor is provided. For media, a drag-and-drop or file upload interface is available. Users can add a title, date associated with the memory, and optional tags.
* **Details:** Supports common image (JPG, PNG, GIF), video (MP4, MOV), and audio (MP3, WAV) formats. Text editor allows basic formatting (bold, italic, lists). Maximum upload sizes and counts will be defined.
3. **Memory Organization & Tagging:**
* **Flow:** As memories are added, users can assign tags (e.g., 'childhood', 'wedding', 'music', 'travel', 'favorite quote'). Existing memories can be edited to add or remove tags. A tagging interface allows creating new tags on the fly or selecting from existing ones.
* **Details:** Tags provide a powerful way to filter and search memories. Users can view all memories associated with a specific tag.
4. **Timeline & Gallery View:**
* **Flow:** Users can toggle between two primary views for memories within a profile: a chronological 'Timeline' view showing memories in order, and a 'Gallery' view displaying photos and videos prominently, with text memories accessible via thumbnails or summaries.
* **Details:** Timeline view includes dates and brief descriptions. Gallery view emphasizes visual media. Both views should be visually appealing and easy to navigate.
5. **Privacy & Sharing (MVP Focus on Personal):**
* **Flow:** Initially, all memories are private to the user who uploaded them. A future iteration might allow inviting specific family members or friends to view or contribute, but the MVP focuses on personal curation.
* **Details:** Clear indication of privacy status (e.g., 'Private'). Settings area to manage account and future sharing permissions.
UI/UX DESIGN:
- **Layout:** Single Page Application (SPA) structure. A clean, minimalist sidebar for navigation (Profiles, Dashboard, Settings). The main content area displays the selected profile's memories, organized in the chosen view (Timeline/Gallery). Responsive design is crucial, adapting seamlessly from mobile to desktop.
- **Color Palette:** Soft, calming, and respectful tones. Primary colors could be muted blues, grays, or earth tones, with a gentle accent color for interactive elements. Avoid overly bright or jarring colors. Example: `#F3F4F6` (light background), `#4B5563` (dark text), `#3B82F6` (accent blue).
- **Typography:** Legible and elegant sans-serif fonts. Use varying weights and sizes for hierarchy. Example: Inter or Open Sans for body text, a slightly more distinct font for headings.
- **Responsive Rules:** Mobile-first approach. Navigation collapses into a hamburger menu on small screens. Grid layouts adjust for optimal viewing on different screen sizes. Touch targets should be adequately sized.
COMPONENT BREAKDOWN:
- **`App.jsx`**: Main application component, sets up routing and global layout.
- **`Header.jsx`**: Top navigation bar (logo, user menu).
- **`Sidebar.jsx`**: Navigation menu (links to profiles, settings).
- **`ProfileCard.jsx`**: Displays a summary of a user's profile (name, image, dates).
- **`MemoryList.jsx`**: Container component for displaying memories, handles view switching (Timeline/Gallery).
- **`TimelineView.jsx`**: Renders memories in a chronological list format.
- **`GalleryView.jsx`**: Renders memories in a grid/card format, emphasizing visuals.
- **`MemoryItem.jsx`**: Represents a single memory (text, image, video, audio) in the list/gallery. Displays content, title, date, tags.
- **`MemoryForm.jsx`**: Modal or page for adding/editing memories. Includes input fields for title, date, description, file uploads, and tag selection.
- **`TagInput.jsx`**: Component for managing tags (adding, removing, displaying).
- **`AuthWrapper.jsx`**: Handles user authentication logic and routing protection.
- **`UploadComponent.jsx`**: Handles file uploads, displaying progress and handling errors.
Props examples:
- `MemoryItem.jsx`: `memory` (object containing title, content, date, type, tags, mediaUrl), `onClick` (function).
- `MemoryList.jsx`: `memories` (array of memory objects), `viewType` (string: 'timeline' or 'gallery').
DATA MODEL:
- **`UserProfile`**: `{ id: string, name: string, bio: string, profilePicUrl: string, birthDate: string, deathDate: string, relation: string }`
- **`Memory`**: `{ id: string, profileId: string, title: string, content: string, type: 'text' | 'photo' | 'video' | 'audio', mediaUrl?: string, date: string, tags: string[], createdAt: string, updatedAt: string }`
- **`State` (using Zustand):**
* `authState`: `{ user: UserProfile | null, isLoading: boolean, error: string | null }`
* `profileState`: `{ currentProfile: UserProfile | null, profiles: UserProfile[], isLoading: boolean, error: string | null }`
* `memoryState`: `{ memories: Memory[], isLoading: boolean, error: string | null }`
* `uiState`: `{ activeView: 'timeline' | 'gallery', showMemoryForm: boolean, ... }`
- **Mock Data Format:**
```json
[
{
"id": "mem_123",
"profileId": "prof_abc",
"title": "İlk Gitar Dersi",
"content": "Babamın bana aldığı ilk gitarla yaşadığım heyecan.",
"type": "photo",
"mediaUrl": "/images/guitar_lesson_1.jpg",
"date": "1995-07-15",
"tags": ["childhood", "music", "father"],
"createdAt": "2023-10-26T10:00:00Z",
"updatedAt": "2023-10-26T10:00:00Z"
},
{
"id": "mem_456",
"profileId": "prof_abc",
"title": "Booster Patrol - İlk Konser",
"content": "O gece sahneye çıktığımızda hissettiğimiz enerji inanılmazdı.",
"type": "video",
"mediaUrl": "/videos/booster_patrol_first_gig.mp4",
"date": "2005-03-10",
"tags": ["music", "band", "Booster Patrol", "live"],
"createdAt": "2023-10-26T10:05:00Z",
"updatedAt": "2023-10-26T10:05:00Z"
}
]
```
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade or slide transitions between pages/views using libraries like Framer Motion or CSS transitions.
- **Hover Effects:** Gentle scaling or shadow effects on memory cards in gallery view.
- **Loading States:** Skeleton loaders or spinners when fetching data or uploading files. Visual feedback for upload progress.
- **Micro-interactions:** Button press feedback, smooth expansion of memory details, tag animations.
- **Image/Video Display:** Lightbox effect for viewing images/videos in full screen.
EDGE CASES:
- **Empty States:** Display friendly messages and clear calls-to-action when there are no profiles or memories yet (e.g., "Henüz anı eklemediniz. İlk anınızı yaratın!").
- **Error Handling:** Graceful handling of API errors, upload failures, or invalid user input. Display user-friendly error messages.
- **Validation:** Client-side validation for forms (required fields, date formats, file types/sizes).
- **Accessibility (a11y):** Use semantic HTML, ARIA attributes where necessary, ensure keyboard navigation, sufficient color contrast, and focus management.
- **Large Media Files:** Implement robust upload mechanisms, potentially with chunking for large files, and clear progress indicators.
- **Date Input:** Handle various date formats and timezones carefully.
SAMPLE DATA (Mock Data Examples):
1. **Text Memory:**
```json
{
"id": "mem_789",
"profileId": "prof_abc",
"title": "John'un Fıkraları",
"content": "John'un her zaman hazırda bir fıkrası olurdu. Özellikle bayramlarda aile toplantılarında anlattığı bir fıkra vardı ki hepimizi güldürmekten yerlere yatırırdı. O fıkrayı tekrar duymayı çok isterdim...",
"type": "text",
"date": "2010-01-01",
"tags": ["humor", "family", "memories"],
"createdAt": "2023-10-27T11:00:00Z"
}
```
2. **Photo Memory:**
```json
{
"id": "mem_101",
"profileId": "prof_abc",
"title": "Plajda Bir Gün",
"content": "Yaz tatilinde çekilmiş en sevdiğimiz fotoğraflardan.",
"type": "photo",
"mediaUrl": "/images/beach_day_2015.jpg",
"date": "2015-08-20",
"tags": ["travel", "summer", "beach"],
"createdAt": "2023-10-27T11:05:00Z"
}
```
3. **Audio Memory:**
```json
{
"id": "mem_112",
"profileId": "prof_abc",
"title": "Doğum Günü Şarkısı (Ses Kaydı)",
"content": "10. yaş günümde bana söylediği şarkının kısa bir ses kaydı.",
"type": "audio",
"mediaUrl": "/audio/birthday_song_jd.mp3",
"date": "2008-05-05",
"tags": ["birthday", "music", "voice"],
"createdAt": "2023-10-27T11:10:00Z"
}
```
4. **Video Memory:**
```json
{
"id": "mem_131",
"profileId": "prof_abc",
"title": "Mezuniyet Töreni",
"content": "Üniversite mezuniyet törenimden kısa bir video kesit.",
"type": "video",
"mediaUrl": "/videos/graduation_ceremony.mp4",
"date": "2018-06-15",
"tags": ["graduation", "university", "achievement"],
"createdAt": "2023-10-27T11:15:00Z"
}
```
5. **Band Memory (Referencing the article):**
```json
{
"id": "mem_141",
"profileId": "prof_abc",
"title": "Booster Patrol - 'Johnny B'nin Şarkısı'",
"content": "Yakın zamanda kaybettiğimiz dostumuz için onun tarzında bir şarkı yazdım. Deneme kaydını dinleyebilirsiniz.",
"type": "audio",
"mediaUrl": "/audio/johnny_b_tribute_mix1.mp3",
"date": "2024-03-25",
"tags": ["music", "tribute", "Booster Patrol", "songwriting"],
"createdAt": "2024-03-27T09:00:00Z"
}
```
DEPLOYMENT NOTES:
- **Build:** Use `npm run build` or `yarn build`. Ensure environment variables are handled correctly during the build process.
- **Environment Variables:** Use `.env` files (e.g., `.env.local`, `.env.production`). Key variables might include `API_BASE_URL` if a backend is used, or `CLOUDINARY_CLOUD_NAME` if using a service like Cloudinary for media storage.
- **Performance Optimizations:** Code splitting (if using CRA/Vite), image optimization (lazy loading, appropriate formats), memoization (React.memo, useMemo, useCallback) for expensive calculations or frequently re-rendered components.
- **Hosting:** Consider platforms like Vercel, Netlify, or GitHub Pages for easy deployment of static sites/SPAs. Ensure proper routing configuration for SPAs (e.g., redirecting all non-file requests to `index.html`).
- **HTTPS:** Always deploy over HTTPS.
- **CORS:** If a separate backend API is used, configure CORS headers appropriately on the server.
- **CDN:** Utilize a Content Delivery Network for serving static assets (images, videos, JS, CSS) to improve load times globally.