PROJECT OVERVIEW:
We are building a web application called 'MemoryVault' (Hatıra Sandığı) that addresses the problem of preserving and digitizing old home movies (VHS, Hi8, MiniDV, etc.). Many people have irreplaceable family memories stored on outdated analog formats that are degrading over time. MemoryVault provides a seamless solution for users to send their tapes for professional digitization, store the digital files securely in the cloud, perform basic video editing, and easily share these precious memories with loved ones. Our core value proposition is to provide a trustworthy, accessible, and user-friendly platform for safeguarding and reliving family history.
TECH STACK:
- Frontend: Next.js (App Router), React, Tailwind CSS, shadcn/ui for components.
- Backend: Node.js with Next.js API Routes or a separate backend framework like Express.js (if more complex logic is needed).
- Database: PostgreSQL managed via Drizzle ORM.
- Authentication: NextAuth.js (or similar) for secure user authentication (email/password, OAuth).
- State Management: React Context API or Zustand for global state, component-level state as needed.
- Deployment: Vercel or similar cloud platform.
- Other Libraries: react-hook-form for forms, zod for validation, date-fns for date handling, AWS S3 SDK for file uploads (or alternative like Cloudflare R2).
DATABASE SCHEMA:
1. Users Table:
- id: UUID (Primary Key)
- name: VARCHAR
- email: VARCHAR (Unique)
- emailVerified: TIMESTAMP
- image: TEXT (URL to profile picture)
- hashedPassword: TEXT
- createdAt: TIMESTAMP
- updatedAt: TIMESTAMP
2. Tapes Table (Represents physical tapes sent for digitization):
- id: UUID (Primary Key)
- userId: UUID (Foreign Key to Users.id)
- tapeType: VARCHAR (e.g., 'VHS', 'Hi8', 'MiniDV')
- condition: VARCHAR (e.g., 'Good', 'Fair', 'Poor')
- notes: TEXT (User's specific notes about the tape)
- status: VARCHAR (e.g., 'Pending Shipment', 'In Transit', 'Digitizing', 'Completed', 'Failed')
- estimatedCompletion: TIMESTAMP (Optional)
- shippingTrackingNumber: VARCHAR (Optional)
- createdAt: TIMESTAMP
- updatedAt: TIMESTAMP
3. Videos Table (Represents digitized video files):
- id: UUID (Primary Key)
- tapeId: UUID (Foreign Key to Tapes.id, Nullable if uploaded directly)
- userId: UUID (Foreign Key to Users.id)
- title: VARCHAR (Default: 'Untitled Video')
- description: TEXT (Optional)
- storageUrl: TEXT (URL to the video file in cloud storage)
- thumbnailUrl: TEXT (URL to a generated thumbnail)
- duration: INTEGER (in seconds)
- format: VARCHAR (e.g., 'mp4', 'mov')
- originalFileName: VARCHAR
- status: VARCHAR (e.g., 'Processing', 'Available', 'Corrupted')
- createdAt: TIMESTAMP
- updatedAt: TIMESTAMP
4. SharedLinks Table (For sharing videos):
- id: UUID (Primary Key)
- videoId: UUID (Foreign Key to Videos.id)
- uniqueToken: VARCHAR (Unique, short, URL-safe token)
- expiresAt: TIMESTAMP (Optional)
- permissions: VARCHAR (e.g., 'view', 'download')
- createdAt: TIMESTAMP
CORE FEATURES & USER FLOW:
1. User Authentication:
- Flow: User visits the site -> Clicks 'Sign Up' or 'Login' -> Enters credentials (email/password) or uses OAuth (Google/Apple) -> If successful, redirected to dashboard. Sign up requires email verification.
- Edge Cases: Incorrect password, account not found, email already exists, OAuth errors.
2. Tape Submission Process:
- Flow: Logged-in user navigates to 'Digitize Tape' -> Selects tape type, describes condition, adds notes -> Submits request -> System generates a submission ID and instructions for shipping the tape -> User ships the tape -> Updates status to 'In Transit' using tracking number.
- Edge Cases: Invalid tape type, user cancels submission before shipping, tape lost in transit.
3. Digitization & Status Tracking:
- Flow: Admin receives physical tape -> Verifies details -> Digitizes tape -> Uploads digital file to cloud storage (e.g., S3) -> Updates tape status to 'Completed' and links the video file(s) to the user's account via the 'Videos' table.
- Edge Cases: Tape damaged during digitization, digitization fails, unable to extract data, file corruption.
4. Video Management & Editing:
- Flow: User accesses 'My Archive' -> Sees list of digitized videos (thumbnails, titles) -> Clicks on a video to view -> Enters 'Edit Mode' -> Uses tools to trim start/end, cut segments, reorder clips (if multiple segments from one tape) -> Saves changes -> Updates video metadata (title, description).
- Edge Cases: Saving fails, editing large files, undo/redo functionality.
5. Sharing:
- Flow: User selects a video -> Clicks 'Share' -> Generates a secure, shareable link (optionally with expiration date and download permissions) -> Copies link and shares it via email, social media, etc.
- Edge Cases: Link expired, unauthorized access attempt, revoked link.
API & DATA FETCHING:
- Auth Endpoints: /api/auth/[...nextauth]/route.ts for NextAuth.js handlers.
- Tape Submission API: POST /api/tapes - Accepts tape details, returns submission confirmation.
- Status Update API: PUT /api/tapes/:id - For internal admin use to update tape status.
- Video Upload API: POST /api/videos/upload - Handles multipart form data for video uploads to cloud storage, returns storage URL.
- Video List API: GET /api/videos - Fetches videos for the logged-in user.
- Video Detail API: GET /api/videos/:id - Fetches details for a specific video.
- Video Update API: PUT /api/videos/:id - Updates video title, description, etc.
- Sharing Link API: POST /api/videos/:id/share - Generates a sharing link.
- Data Fetching: Server Components will fetch data directly from the database using Drizzle ORM. Client Components will use API Routes or server actions for mutations and fetching specific data.
- Request/Response: Standard JSON responses. Use Zod schemas for request validation and response typing.
COMPONENT BREAKDOWN (Next.js App Router):
- `app/(auth)/layout.tsx`: Layout for login/signup pages.
- `app/(auth)/login/page.tsx`: Login form component.
- `app/(auth)/signup/page.tsx`: Signup form component.
- `app/(marketing)/layout.tsx`: Layout for marketing pages.
- `app/(marketing)/page.tsx`: Landing page.
- `app/(marketing)/pricing/page.tsx`: Pricing page.
- `app/(marketing)/about/page.tsx`: About page.
- `app/(marketing)/contact/page.tsx`: Contact page.
- `app/(app)/layout.tsx`: Main application layout (with sidebar/navbar).
- `app/(app)/dashboard/page.tsx`: User dashboard showing archive overview, recent activity, quick actions.
- Components: `DashboardStatsCard`, `RecentVideosList`.
- `app/(app)/digitize/page.tsx`: Page for initiating the tape digitization process.
- Components: `TapeTypeSelector`, `TapeConditionForm`, `ShippingInfoDisplay`.
- `app/(app)/archive/page.tsx`: Displays the user's video archive.
- Components: `VideoGrid`, `VideoListItem`, `SearchBar`, `FilterOptions`.
- `app/(app)/archive/[videoId]/page.tsx`: Page to view a single video and its details.
- Components: `VideoPlayer`, `VideoMetadata`, `EditButton`, `ShareButton`, `DownloadButton`.
- `app/(app)/archive/[videoId]/edit/page.tsx`: Video editing interface.
- Components: `VideoEditorCanvas`, `Timeline`, `TrimControls`, `CutControls`, `SaveButton`.
- `app/(app)/settings/page.tsx`: User account settings.
- Components: `ProfileForm`, `AccountSecurityForm`, `SubscriptionManager`.
- `components/ui/Button.tsx`, `components/ui/Input.tsx`, `components/ui/Card.tsx`, `components/ui/Dialog.tsx`, etc.: Reusable UI components from shadcn/ui.
- `components/layout/Navbar.tsx`, `components/layout/Sidebar.tsx`, `components/layout/Footer.tsx`: Layout components.
- `components/auth/providers.tsx`: NextAuth.js session provider.
- State Management: Utilize Server Components for data fetching where possible. Use `useState`, `useReducer` for local state. Use Zustand or Context API for global state like user session or UI state.
UI/UX DESIGN & VISUAL IDENTITY:
- Style: Modern, clean, and trustworthy. Emphasis on a user-friendly experience, especially for less tech-savvy users. Subtle use of gradients and soft shadows to add depth.
- Color Palette:
- Primary: #4A90E2 (Trustworthy Blue)
- Secondary: #50E3C2 (Vibrant Teal/Mint)
- Accent: #F5A623 (Warm Orange for CTAs)
- Neutral Dark: #1A202C (Dark Gray for text and backgrounds)
- Neutral Light: #F7FAFC (Off-white for backgrounds)
- Success: #68D391 (Green)
- Error: #F56565 (Red)
- Typography:
- Headings: Inter (Bold)
- Body Text: Inter (Regular)
- Layout: Responsive grid system. Clear calls to action. Ample whitespace. Sidebar navigation for logged-in users. Clean header with logo and auth links on marketing pages.
- Animations: Subtle fade-ins on load, smooth transitions between pages/states, loading spinners/skeletons. Hover effects on buttons and interactive elements.
- Responsive Rules: Mobile-first approach. Max-width breakpoints at 768px (tablet) and 1024px (desktop). Ensure all components are fully responsive.
SAMPLE/MOCK DATA:
1. User:
- id: 'd290f1ee-6c54-4b0b-871e-01312a3a67ec'
- name: 'Jane Doe'
- email: 'jane.doe@example.com'
2. Tape (Pending Digitization):
- id: 'a1b2c3d4-e5f6-7890-1234-567890abcdef'
- userId: 'd290f1ee-6c54-4b0b-871e-01312a3a67ec'
- tapeType: 'VHS'
- status: 'Pending Shipment'
- createdAt: '2024-03-15T10:00:00Z'
3. Video (Digitized):
- id: 'f0e9d8c7-b6a5-4321-fedc-ba9876543210'
- userId: 'd290f1ee-6c54-4b0b-871e-01312a3a67ec'
- tapeId: 'a1b2c3d4-e5f6-7890-1234-567890abcdef'
- title: 'Summer Vacation 1995'
- storageUrl: 'https://memoryvault-storage.s3.amazonaws.com/videos/f0e9d8c7-b6a5-4321-fedc-ba9876543210.mp4'
- thumbnailUrl: 'https://memoryvault-storage.s3.amazonaws.com/thumbnails/f0e9d8c7-b6a5-4321-fedc-ba9876543210.jpg'
- duration: 1850
- format: 'mp4'
- createdAt: '2024-03-20T14:30:00Z'
4. Video (Needs Editing):
- id: '12345678-abcd-ef01-2345-67890abcdef0'
- userId: 'd290f1ee-6c54-4b0b-871e-01312a3a67ec'
- title: 'Birthday Party'
- storageUrl: '...'
- duration: 3600
- format: 'mov'
- createdAt: '2024-03-21T11:00:00Z'
5. Shared Link:
- id: 'unique-link-id-123'
- videoId: 'f0e9d8c7-b6a5-4321-fedc-ba9876543210'
- uniqueToken: 'aBcDeFgHiJkLmNoPqRsT'
- expiresAt: '2025-03-20T14:30:00Z'
- permissions: 'view'
6. Tape (In Transit):
- id: 'c0d1e2f3-a4b5-6789-0123-456789abcdef0'
- userId: 'd290f1ee-6c54-4b0b-871e-01312a3a67ec'
- tapeType: 'Hi8'
- status: 'In Transit'
- shippingTrackingNumber: 'TRK123456789'
- createdAt: '2024-03-22T09:00:00Z'
EDGE CASES HANDLING:
- Authentication: Implement robust error handling for login/signup failures. Use NextAuth.js's built-in features for secure sessions and OAuth. Handle token expiration and refresh gracefully.
- File Uploads: Implement chunked uploads for large video files using S3 Multipart Upload. Include progress indicators. Handle upload failures with retry mechanisms and clear user feedback. Validate file types and sizes on both client and server.
- Video Processing: Background job processing for transcoding/digitization. Provide clear status updates to the user (e.g., 'Processing', 'Ready', 'Error'). Implement dead-letter queues for failed jobs.
- Data Validation: Use Zod for schema validation on all incoming API requests and form submissions to prevent invalid data from entering the system.
- Permissions: Ensure strict access control. Users can only access and modify their own videos and tapes. Sharing links should respect set permissions and expiration.
- Empty States: Design user-friendly empty states for the archive, dashboard, etc., guiding users on how to get started (e.g., 'Your archive is empty. Send your first tape!').
- Error Handling: Implement global error handling (e.g., using Error Boundaries in React) and specific error handling for API calls. Provide user-friendly error messages.
TURKISH TRANSLATIONS:
- App Title: Hatıra Sandığı
- Navigation: Pano (Dashboard), Dijitalleştir (Digitize), Arşiv (Archive), Ayarlar (Settings), Oturum Kapat (Logout)
- Buttons: Yükle (Upload), Kaydet (Save), Düzenle (Edit), Paylaş (Share), İndir (Download), Gönder (Submit), Giriş Yap (Login), Kayıt Ol (Sign Up)
- Labels: Kaset Türü (Tape Type), Durum (Condition), Notlar (Notes), Video Başlığı (Video Title), Açıklama (Description), E-posta (Email), Şifre (Password)
- Messages: Kasetiniz başarıyla gönderildi. (Your tape has been submitted successfully.) Dijitalleştirme tamamlandı. (Digitization complete.) Video başarıyla kaydedildi. (Video saved successfully.) Paylaşım bağlantısı oluşturuldu. (Sharing link created.)
- Section Titles: Eski Kasetlerinizi Dijitalleştirin (Digitize Your Old Tapes), Dijital Arşiviniz (Your Digital Archive), Video Düzenleyici (Video Editor).