Generate a fully functional, multi-page Next.js MVP application for a SaaS platform called 'CopyrightGuard'. This application will help music artists and rights holders detect, monitor, and manage copyright infringements of their work. The core value proposition is to provide a proactive and comprehensive solution for protecting intellectual property in the music industry.
**PROJECT OVERVIEW:**
CopyrightGuard aims to solve the problem of widespread copyright infringement in the music industry. Artists often struggle to track unauthorized use of their music across various digital platforms and the internet. This platform will empower them by automating the detection of infringing content, streamlining the management of these infringements, and facilitating the takedown process. The goal is to provide a reliable and user-friendly tool that safeguards artists' creative work and revenue streams.
**TECH STACK:**
- **Framework:** Next.js (App Router)
- **Language:** TypeScript
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM with PostgreSQL (using Vercel Postgres or Supabase)
- **UI Components:** shadcn/ui (built on Radix UI and Tailwind CSS)
- **Authentication:** NextAuth.js (Credentials Provider for email/password, Google Provider)
- **Database:** PostgreSQL
- **State Management:** React Context API / Zustand (for global state if needed)
- **API Routes:** Next.js API Routes for backend logic
- **Other:** React Hook Form (for forms), Zod (for schema validation), Date-fns (for date handling), React-query/SWR (for data fetching and caching).
**DATABASE SCHEMA:**
```sql
-- Users table (managed by NextAuth.js)
-- Example fields: id, name, email, emailVerified, image, password_hash
-- Artists table (linked to users)
CREATE TABLE artists (
id SERIAL PRIMARY KEY,
userId INTEGER UNIQUE REFERENCES users(id) ON DELETE CASCADE,
artistName VARCHAR(255) NOT NULL,
createdAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
-- Works table (songs, compositions, lyrics)
CREATE TABLE works (
id SERIAL PRIMARY KEY,
artistId INTEGER REFERENCES artists(id) ON DELETE CASCADE,
title VARCHAR(255) NOT NULL,
filePath VARCHAR(255), -- Optional: Path to uploaded audio file
isrc VARCHAR(20) UNIQUE, -- International Standard Recording Code
duration INTEGER, -- Duration in seconds
genre VARCHAR(100),
uploadDate DATE,
createdAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
updatedAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
-- Infringements table
CREATE TABLE infringements (
id SERIAL PRIMARY KEY,
workId INTEGER REFERENCES works(id) ON DELETE CASCADE,
platform VARCHAR(255) NOT NULL, -- e.g., 'YouTube', 'Spotify', 'Web'
infringingUrl TEXT NOT NULL,
reportedBy INTEGER REFERENCES users(id) ON DELETE SET NULL,
reportDate DATE,
status VARCHAR(50) DEFAULT 'Pending', -- e.g., 'Pending', 'Action Taken', 'Dismissed'
infringementType VARCHAR(100), -- e.g., 'Unauthorized Use', 'Sampling'
detectionMethod VARCHAR(100), -- e.g., 'Manual Scan', 'Automated Scan'
takedownNoticeSent BOOLEAN DEFAULT FALSE,
takedownDate DATE,
notes TEXT,
createdAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
updatedAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
-- ScanJobs table (to track automated scans)
CREATE TABLE scanJobs (
id SERIAL PRIMARY KEY,
workId INTEGER REFERENCES works(id) ON DELETE CASCADE,
platform VARCHAR(255) NOT NULL,
scanTriggeredAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
scanCompletedAt TIMESTAMP WITH TIME ZONE,
status VARCHAR(50) DEFAULT 'Running', -- e.g., 'Running', 'Completed', 'Failed'
results TEXT -- Store raw scan results if needed
);
-- Notifications table
CREATE TABLE notifications (
id SERIAL PRIMARY KEY,
userId INTEGER REFERENCES users(id) ON DELETE CASCADE,
type VARCHAR(100) NOT NULL, -- e.g., 'New Infringement', 'Takedown Status Update'
message TEXT NOT NULL,
isRead BOOLEAN DEFAULT FALSE,
createdAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
```
**CORE FEATURES & USER FLOW:**
1. **User Authentication:**
* **Flow:** User lands on the homepage. Clicks 'Sign Up' or 'Log In'.
* **Sign Up:** Enters email, password, confirms password. Receives a verification email (optional for MVP, can skip email verification initially). Redirected to onboarding.
* **Log In:** Enters email and password. Upon success, redirects to the Dashboard. Handles incorrect credentials with clear error messages.
* **OAuth:** Google login option available. User clicks 'Sign in with Google', authenticates via Google, and is logged into CopyrightGuard, creating/linking their account.
* **Edge Case:** Password reset flow (consider for later iteration).
2. **Onboarding & Artist Profile Setup:**
* **Flow:** After initial signup/login, users are guided through a simple onboarding process.
* **Steps:** 1. Welcome screen. 2. Prompt to create/link an artist profile. User enters artist name. 3. Brief explanation of the platform's features.
* **Edge Case:** User can skip onboarding and complete profile later in settings.
3. **Work Management (CRUD for Works):**
* **Flow:** User navigates to 'My Works' section from the dashboard.
* **Add Work:** Clicks 'Add New Work'. A modal or form appears.
* **Form Fields:** Title (required), ISRC (optional), Genre (optional), Duration (optional), Upload Audio File (optional for MVP, focus on metadata first). User submits the form.
* **View Works:** Displays a table of all works added by the user, showing Title, ISRC, Genre, Date Added.
* **Edit Work:** User clicks 'Edit' on a work row. The form reappears pre-filled. User updates and saves.
* **Delete Work:** User clicks 'Delete' on a work row. A confirmation modal appears. User confirms deletion.
* **Edge Case:** Input validation for all fields (e.g., title is required, ISRC format). Handle file upload errors if implemented.
4. **Infringement Detection (Scan Initiation):**
* **Flow:** From the 'My Works' table or a dedicated 'Scan' page, user selects a work and initiates a scan.
* **Action:** User clicks 'Scan for Infringements' on a specific work.
* **Scan Types (MVP):** Focus on 'Web Scan' (general internet search for title/artist name) and potentially 'YouTube Scan' (if API access is feasible/simulated).
* **Backend Process:** Creates a `ScanJob` record. Initiates a background process (simulated for MVP, e.g., a delay and mock result). The `ScanJob` status updates.
* **User Feedback:** Shows a loading indicator or status update ('Scanning...', 'Scan Complete').
* **Edge Case:** API rate limits if using real external APIs. Handling scan failures.
5. **Infringement Monitoring & Management:**
* **Flow:** After a scan completes (or manually added), infringements appear in the 'Infringements' dashboard.
* **Dashboard View:** A table listing detected infringements. Columns: Work Title, Platform, Infringing URL, Status, Report Date, Actions.
* **Adding Infringements:** A button to manually add an infringement if one was found outside the automated scan. Form includes Work selection, URL, Platform, Type, Date.
* **Status Update:** User can change the status of an infringement (Pending, Action Taken, Dismissed).
* **Takedown Notice:** A button 'Send Takedown Notice' for each infringement. This action (in MVP) updates the `takedownNoticeSent` flag and `takedownDate` in the `infringements` table and potentially sends a notification.
* **Edge Case:** What to do if the infringing URL is no longer available.
6. **Notifications:**
* **Flow:** User sees a notification icon/badge (e.g., in the header) when new events occur.
* **Events:** New infringement detected, Takedown notice status update, System alerts.
* **Notification Center:** A dedicated page listing all notifications chronologically. Unread notifications are highlighted.
* **Mark as Read:** User can mark notifications as read individually or all at once.
* **Edge Case:** Handling a large number of notifications.
**API & DATA FETCHING:**
- Utilize Next.js API Routes (or server actions) for all backend operations.
- **Authentication:** `POST /api/auth/[...nextauth]` for NextAuth.js handlers.
- **Works:**
- `GET /api/works`: Fetch all works for the logged-in user.
- `POST /api/works`: Create a new work.
- `PUT /api/works/[id]`: Update a work.
- `DELETE /api/works/[id]`: Delete a work.
- **Infringements:**
- `GET /api/infringements`: Fetch infringements (can filter by workId, status).
- `POST /api/infringements`: Manually add an infringement.
- `PUT /api/infringements/[id]`: Update infringement status, notes, etc.
- `POST /api/infringements/[id]/send-takedown`: Trigger takedown notice process.
- **Scans:**
- `POST /api/scans`: Initiate a scan for a given work.
- `GET /api/scans/status/[jobId]`: Check the status of a scan job (real-time updates might use WebSockets or polling).
- **Notifications:**
- `GET /api/notifications`: Fetch notifications for the user.
- `PUT /api/notifications/read`: Mark notifications as read.
- **Data Fetching:** Use `fetch` within Server Components for SSR/SSG data. Use SWR or React Query in Client Components for dynamic data fetching, caching, and real-time updates.
**COMPONENT BREAKDOWN (Next.js App Router Structure):**
- **`app/`**
- **`(auth)/`** (Route Group for Auth Pages)
- `login/page.tsx`: Login form component.
- `signup/page.tsx`: Signup form component.
- **`(marketing)/`** (Optional, for landing page)
- `page.tsx`: Landing page.
- **`(app)/`** (Route Group for Authenticated App)
- `layout.tsx`: Main application layout (with sidebar/header).
- `dashboard/page.tsx`: Dashboard overview (summary stats, recent infringements, notifications). Requires `use client`;
- `works/page.tsx`: List of user's works. Contains `WorkTable` component. Requires `use client`;
- `works/[id]/page.tsx`: View details of a specific work, including its infringements. Requires `use client`;
- `works/new/page.tsx`: Form for adding a new work. Requires `use client`;
- `works/[id]/edit/page.tsx`: Form for editing an existing work. Requires `use client`;
- `infringements/page.tsx`: List of all detected infringements. Contains `InfringementTable`. Requires `use client`;
- `infringements/new/page.tsx`: Form for manually adding an infringement. Requires `use client`;
- `settings/page.tsx`: User profile and artist settings. Requires `use client`;
- `notifications/page.tsx`: Notification center. Requires `use client`;
- **`api/`** (API Routes)
- `auth/[...nextauth]/route.ts`: NextAuth.js handler.
- `works/route.ts`: Handles `GET`, `POST` for works.
- `works/[id]/route.ts`: Handles `PUT`, `DELETE` for works.
- `infringements/route.ts`: Handles `GET`, `POST` for infringements.
- `infringements/[id]/route.ts`: Handles `PUT` for infringements.
- `infringements/[id]/send-takedown/route.ts`: Handles POST for takedown.
- `scans/route.ts`: Handles `POST` for initiating scans.
- `notifications/route.ts`: Handles `GET` for notifications.
- `notifications/read/route.ts`: Handles `PUT` for marking read.
- **`layout.tsx`**: Root layout (html, body, providers).
- **`page.tsx`**: Home page (if not using `(marketing)` group).
- **`components/`**
- `ui/`: Re-exports from shadcn/ui (Button, Input, Card, Table, Dialog, DropdownMenu, Sheet, Alert, Form, etc.).
- `layout/`: `Header.tsx`, `Sidebar.tsx`, `Footer.tsx`.
- `forms/`: `WorkForm.tsx`, `InfringementForm.tsx`, `LoginForm.tsx`, `SignupForm.tsx`.
- `tables/`: `WorkTable.tsx`, `InfringementTable.tsx` (using `react-table` or similar).
- `common/`: `LoadingSpinner.tsx`, `ErrorMessage.tsx`, `NotificationBadge.tsx`.
- `dashboard/`: `StatCard.tsx`, `RecentActivityFeed.tsx`.
**UI/UX DESIGN & VISUAL IDENTITY:**
- **Style:** Modern, clean, professional, trustworthy.
- **Color Palette:**
- Primary: `#4F46E5` (Indigo-500) - For main actions, branding.
- Secondary: `#6366F1` (Indigo-600) - For accents, hover states.
- Background: `#F9FAFB` (Light Gray) - Main background.
- Card/Element Background: `#FFFFFF` (White).
- Text (Primary): `#111827` (Dark Gray-800).
- Text (Secondary): `#6B7280` (Gray-500).
- Success: `#10B981` (Green-500).
- Warning: `#F59E0B` (Amber-500).
- Error: `#EF4444` (Red-500).
- **Typography:** Inter (Google Font) - Sans-serif, modern, readable.
- Headings: Inter Bold (e.g., H1, H2)
- Body Text: Inter Regular
- **Layout:**
- Use a fixed sidebar for navigation within the app. Main content area takes the rest of the screen.
- Use cards for summaries and key information blocks.
- Tables for lists of works and infringements, with clear headers and actionable buttons.
- Responsive design: Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Ensure tables are usable on mobile (horizontal scroll or adaptive columns).
- **Icons:** Use a consistent icon set like Lucide Icons (integrated with shadcn/ui).
**ANIMATIONS:**
- **Page Transitions:** Subtle fade-in/fade-out transitions using Next.js's built-in router capabilities or a library like `Framer Motion` if needed (keep it minimal for MVP).
- **Button Hovers:** Slight scale or background color change.
- **Loading States:** Use spinners (`LoadingSpinner.tsx`) within buttons or for data fetching. Skeleton loaders for table rows while data is loading.
- **Form Feedback:** Subtle animations for validation errors (e.g., shaking input fields).
- **Notifications:** Fade-in animation for new notification badges.
**EDGE CASES:**
- **Authentication:** Handling expired sessions, unauthorized access attempts (redirect to login).
- **Data Fetching:** Loading states, error states (display `ErrorMessage.tsx`), empty states (display messages like 'No works found. Add your first work!').
- **Forms:** Input validation using Zod and React Hook Form. Clear error messages next to fields. Disable submit button while submitting.
- **API Errors:** Graceful error handling for API failures. Display user-friendly messages.
- **Empty States:** All tables and lists should have clear messages when empty (e.g., 'No infringements detected yet.').
- **Permissions:** Ensure users can only access and modify their own data.
- **Infringement URL Validity:** Check if the reported URL is accessible before marking takedown as sent.
**SAMPLE DATA (for frontend development and initial state):**
1. **User:**
```json
{
"id": "user_abc123",
"name": "Alice Wonderland",
"email": "alice@example.com"
}
```
2. **Artist:**
```json
{
"id": 1,
"userId": "user_abc123",
"artistName": "Alice & The Dreamers"
}
```
3. **Work:**
```json
[
{
"id": 101,
"artistId": 1,
"title": "Lost in the Echo",
"isrc": "USRC12345678",
"duration": 245,
"genre": "Indie Pop",
"uploadDate": "2023-01-15",
"createdAt": "2023-01-15T10:00:00Z"
},
{
"id": 102,
"artistId": 1,
"title": "Midnight Drive",
"isrc": "USRC87654321",
"duration": 190,
"genre": "Electronic",
"uploadDate": "2023-05-20",
"createdAt": "2023-05-20T11:30:00Z"
}
]
```
4. **Infringement:**
```json
[
{
"id": 501,
"workId": 101,
"platform": "YouTube",
"infringingUrl": "http://youtube.com/watch?v=fakeurl123",
"reportedBy": "user_abc123",
"reportDate": "2024-07-25",
"status": "Pending",
"infringementType": "Unauthorized Use",
"detectionMethod": "Automated Scan",
"takedownNoticeSent": false,
"createdAt": "2024-07-25T09:00:00Z"
},
{
"id": 502,
"workId": 102,
"platform": "Blog Website",
"infringingUrl": "http://example-blog.com/post/awesome-track",
"reportedBy": "user_abc123",
"reportDate": "2024-07-24",
"status": "Action Taken",
"infringementType": "Background Music",
"detectionMethod": "Manual Scan",
"takedownNoticeSent": true,
"takedownDate": "2024-07-25",
"createdAt": "2024-07-24T15:00:00Z"
}
]
```
5. **ScanJob:**
```json
[
{
"id": 801,
"workId": 101,
"platform": "YouTube",
"scanTriggeredAt": "2024-07-25T08:55:00Z",
"scanCompletedAt": "2024-07-25T09:00:00Z",
"status": "Completed"
}
]
```
6. **Notification:**
```json
[
{
"id": 1001,
"userId": "user_abc123",
"type": "New Infringement",
"message": "A new potential infringement for 'Lost in the Echo' was detected on YouTube.",
"isRead": false,
"createdAt": "2024-07-25T09:05:00Z"
}
]
```
**TURKISH TRANSLATIONS (for UI elements):**
- **App Title:** CopyrightGuard
- **Navigation:**
- Dashboard: Kontrol Paneli
- My Works: Eserlerim
- Infringements: İhlaller
- Settings: Ayarlar
- Notifications: Bildirimler
- **Buttons:**
- Log In: Giriş Yap
- Sign Up: Kayıt Ol
- Add New Work: Yeni Eser Ekle
- Edit: Düzenle
- Delete: Sil
- Scan for Infringements: İhlal Taraması Başlat
- Send Takedown Notice: İhtar Gönder
- Save: Kaydet
- Cancel: İptal
- **Labels & Placeholders:**
- Email: E-posta
- Password: Şifre
- Artist Name: Sanatçı Adı
- Work Title: Eser Adı
- ISRC: ISRC Kodu
- Genre: Tür
- Duration: Süre (saniye)
- Platform: Platform
- Infringing URL: İhlal URL'si
- Status: Durum
- Report Date: Bildirim Tarihi
- Notes: Notlar
- **Messages:**
- Login successful: Giriş başarılı.
- Invalid credentials: Geçersiz e-posta veya şifre.
- Work added successfully: Eser başarıyla eklendi.
- Infringement detected: İhlal tespit edildi.
- No infringements found: Henüz ihlal bulunamadı.
- Scan in progress: Tarama devam ediyor...
- Takedown notice sent: İhtar gönderildi.
This prompt is designed to guide an AI coding assistant to generate a robust and feature-rich MVP of CopyrightGuard using Next.js App Router, Tailwind CSS, and Drizzle ORM. It covers the technical stack, database structure, user flows, API design, component breakdown, UI/UX guidelines, and essential edge cases, aiming for a production-ready foundation.