## AI Master Prompt: Gothic Archive - Institutional Gothic & Backrooms Analysis Platform
**1. PROJECT OVERVIEW:**
The Gothic Archive is a comprehensive SaaS platform designed to analyze, visualize, and archive the burgeoning trends of 'Institutional Gothic' and 'Backrooms' aesthetics. The platform addresses the growing interest in these niche internet subcultures by providing a centralized hub for content discovery, trend analysis, and cultural impact assessment. It solves the problem of fragmented information and lack of structured analysis surrounding these visually distinct and culturally significant online movements. The core value proposition lies in offering deep insights, historical context, and predictive trend analysis for digital aesthetics, making it an invaluable resource for creators, researchers, and enthusiasts.
**2. TECH STACK:**
- **Frontend:** React (Next.js 14 App Router)
- **Styling:** Tailwind CSS
- **UI Components:** shadcn/ui
- **State Management:** React Context API / Zustand (for global state)
- **ORM:** Drizzle ORM
- **Database:** PostgreSQL (or PlanetScale/Neon for serverless)
- **Authentication:** NextAuth.js (Credentials Provider + OAuth options like Google)
- **Data Fetching:** Server Actions & Route Handlers (Next.js)
- **Charting/Visualization:** Recharts.js or Chart.js, potentially a library like D3.js for advanced visualizations.
- **Deployment:** Vercel
- **Form Handling:** React Hook Form + Zod for validation
- **Utilities:** Lodash, date-fns
**3. DATABASE SCHEMA:**
```sql
-- Users Table (managed by NextAuth.js, but schema is conceptually similar)
CREATE TABLE users (
id VARCHAR(255) PRIMARY KEY,
name VARCHAR(255),
email VARCHAR(255) UNIQUE,
emailVerified TIMESTAMP(3) DEFAULT NULL,
image TEXT,
createdAt TIMESTAMP(3) DEFAULT CURRENT_TIMESTAMP,
updatedAt TIMESTAMP(3) DEFAULT CURRENT_TIMESTAMP
);
-- Aesthetics Table
CREATE TABLE aesthetics (
id SERIAL PRIMARY KEY,
name VARCHAR(100) UNIQUE NOT NULL, -- e.g., 'Backrooms', 'Institutional Gothic', 'Liminal Spaces'
description TEXT,
icon TEXT NULL, -- URL to an icon or representative image
createdAt TIMESTAMP(3) DEFAULT CURRENT_TIMESTAMP,
updatedAt TIMESTAMP(3) DEFAULT CURRENT_TIMESTAMP
);
-- Tags Table
CREATE TABLE tags (
id SERIAL PRIMARY KEY,
name VARCHAR(100) UNIQUE NOT NULL -- e.g., 'nostalgia', 'decay', 'empty spaces', 'corporate horror'
);
-- Content Items Table
CREATE TABLE content_items (
id SERIAL PRIMARY KEY,
title VARCHAR(255) NOT NULL,
url TEXT UNIQUE NOT NULL, -- URL to the external content (article, image, video)
contentType VARCHAR(50) NOT NULL, -- 'article', 'image', 'video', 'discussion'
summary TEXT,
source VARCHAR(100),
author VARCHAR(100),
publishedDate DATE,
mainAestheticId INT REFERENCES aesthetics(id) ON DELETE SET NULL,
submittedByUserId VARCHAR(255) REFERENCES users(id) ON DELETE SET NULL,
createdAt TIMESTAMP(3) DEFAULT CURRENT_TIMESTAMP,
updatedAt TIMESTAMP(3) DEFAULT CURRENT_TIMESTAMP
);
-- Content-Tags Junction Table
CREATE TABLE content_tags (
contentItemId INT REFERENCES content_items(id) ON DELETE CASCADE,
tagId INT REFERENCES tags(id) ON DELETE CASCADE,
PRIMARY KEY (contentItemId, tagId)
);
-- Content-Aesthetics Junction Table (for multiple aesthetics per item)
CREATE TABLE content_aesthetics (
contentItemId INT REFERENCES content_items(id) ON DELETE CASCADE,
aestheticId INT REFERENCES aesthetics(id) ON DELETE CASCADE,
PRIMARY KEY (contentItemId, aestheticId)
);
-- Comments Table
CREATE TABLE comments (
id SERIAL PRIMARY KEY,
contentItemId INT REFERENCES content_items(id) ON DELETE CASCADE,
userId VARCHAR(255) REFERENCES users(id) ON DELETE CASCADE,
body TEXT NOT NULL,
createdAt TIMESTAMP(3) DEFAULT CURRENT_TIMESTAMP,
updatedAt TIMESTAMP(3) DEFAULT CURRENT_TIMESTAMP
);
-- Views/Interactions Table (for trend analysis)
CREATE TABLE interactions (
id SERIAL PRIMARY KEY,
contentItemId INT REFERENCES content_items(id) ON DELETE CASCADE,
userId VARCHAR(255) REFERENCES users(id) ON DELETE SET NULL, -- NULL for anonymous views
interactionType VARCHAR(50) NOT NULL, -- 'view', 'upvote', 'share'
timestamp TIMESTAMP(3) DEFAULT CURRENT_TIMESTAMP
);
-- Analytics Table (Pre-computed or aggregated data for visualizations)
CREATE TABLE analytics (
id SERIAL PRIMARY KEY,
aestheticId INT REFERENCES aesthetics(id) ON DELETE CASCADE,
metricName VARCHAR(100) NOT NULL, -- e.g., 'weekly_views', 'monthly_mentions', 'related_aesthetics'
metricValue JSONB,
calculationDate DATE NOT NULL
);
```
**4. CORE FEATURES & USER FLOW:**
* **User Authentication (Sign Up / Sign In):**
* Flow: User clicks 'Sign In' -> Presented with email/password form and OAuth options (Google) -> On success, redirected to dashboard or previous page. Sign Up follows similar flow for new users.
* Auth: NextAuth.js handles session management. User data stored in `users` table.
* **Content Submission (Admin/Moderated):**
* Flow (Admin): Admin logs in -> Navigates to 'Add Content' section -> Fills in title, URL, content type, summary, source, author, publish date -> Selects primary aesthetic and relevant tags -> Clicks 'Submit'.
* Flow (User - Moderated): User logs in -> Navigates to 'Suggest Content' -> Fills form -> Submission goes to admin queue for review and approval.
* Backend: Server Action handles form submission, validation (Zod), and database insertion into `content_items`, `content_tags`, `content_aesthetics`.
* **Content Discovery & Filtering:**
* Flow: User lands on 'Explore' page -> Sees a grid/list of content items -> Filters available by aesthetic, tag, content type, date range -> Search bar for keyword search.
* Backend: API Route (or Server Action) fetches filtered/searched content from `content_items` table, joining with `aesthetics` and `tags` via junction tables.
* **Aesthetic & Trend Visualization:**
* Flow: User navigates to 'Analytics' or clicks on an 'Aesthetic' card -> Presented with charts and graphs showing trends (e.g., views over time, tag frequency, geographical spread if data available, related aesthetics).
* Backend: API Route fetches aggregated data from `analytics` table or computes it on-the-fly by querying `interactions` and `content_items` tables. Data formatted for Recharts.js.
* **Commenting & Discussion:**
* Flow: User views a content item -> Scrolls to comments section -> Types comment in textarea -> Clicks 'Post Comment'. Comments displayed chronologically, associated with the `contentItemId` and `userId`.
* Backend: Server Action handles new comment creation, validation, and database insertion into `comments` table. API Route fetches existing comments for a given `contentItemId`.
**5. API & DATA FETCHING:**
- **API Routes (Route Handlers - `app/api/...`):** Primarily for read-heavy operations or actions not easily handled by Server Actions (e.g., external webhook integrations if needed later). Examples: `GET /api/aesthetics`, `GET /api/content?aestheticId=1&tag=nostalgia`.
- **Server Actions (`'use server'`):** Used for mutations (POST, PUT, DELETE) and form submissions directly within components. Handles authentication checks, validation, and database writes. Examples: `createComment(contentId, body)`, `submitContent(formData)`.
- **Data Fetching in Components:** Use Server Components to fetch initial data directly from DB. Use Client Components with Server Actions for dynamic updates (e.g., posting a comment, liking an item). Use SWR or React Query for client-side caching and revalidation if complex client-state interactions are needed.
- **Response Format:** JSON. Standardized error handling (e.g., `{ success: false, error: 'message' }` or `{ success: true, data: ... }`).
**6. COMPONENT BREAKDOWN (Next.js App Router Structure):**
- **`app/layout.tsx`:** Root layout, includes global styles, providers (e.g., NextAuth SessionProvider), and main structure.
- **`app/page.tsx`:** Landing page showcasing the concept, featured aesthetics, and a call to action.
- **`app/(auth)/signin/page.tsx`:** Sign-in page with form and OAuth buttons.
- **`app/(auth)/signup/page.tsx`:** Sign-up page.
- **`app/dashboard/page.tsx`:** Authenticated user's main dashboard. Links to other sections. Might show recent activity or personalized content.
- **`app/explore/page.tsx`:** Main content discovery page. Includes filtering controls and a grid/list of `ContentCard` components.
- **`app/content/[id]/page.tsx`:** Individual content item page. Displays `ContentDetail` component, `CommentSection`, and potentially related content.
- **`app/analytics/page.tsx`:** Main analytics page. Links to specific aesthetic analysis pages or shows overview trends.
- **`app/analytics/[aestheticSlug]/page.tsx`:** Detailed analytics for a specific aesthetic, rendering various charts (`TrendChart`, `TagCloud`).
- **`app/admin/layout.tsx`:** Admin-only layout wrapper.
- **`app/admin/content/page.tsx`:** Table listing all content items, with options to edit/delete.
- **`app/admin/content/new/page.tsx`:** Form for adding new content (Admin).
- **`app/submit/page.tsx`:** Form for users to suggest new content (if moderated).
**UI Components:**
- **`components/ui/`:** Re-exported shadcn/ui components (Button, Input, Card, etc.).
- **`components/layout/`:** `Navbar`, `Footer`, `Sidebar` (if needed), `PageWrapper`.
- **`components/auth/`:** `SignInForm`, `SignUpForm`, `OAuthButtons`.
- **`components/content/`:** `ContentCard` (for listing), `ContentDetail` (for item page), `Comment` (individual comment display), `CommentForm`, `CommentSection`.
- **`components/analytics/`:** `ChartRenderer` (wrapper for Recharts), `TrendChart`, `AestheticDistributionMap` (placeholder).
- **`components/forms/`:** `ContentForm` (used in admin/submit pages).
- **`components/common/`:** `LoadingSpinner`, `ErrorMessage`, `FilterControls`, `Tag`.
**State Management:**
- Global state (auth status, user profile) managed via `SessionProvider` and potentially Zustand.
- Page-level state (filters, search queries) managed within respective page components or using local state.
- Form state managed by React Hook Form.
- Component-specific state (e.g., dropdown open/closed) managed using `useState`.
**7. UI/UX DESIGN & VISUAL IDENTITY:**
- **Style:** "Modern Minimalist with Gothic Accents". Clean layouts, ample whitespace, but incorporating subtle dark themes, sharp lines, and elegant typography reminiscent of gothic aesthetics without being overly cluttered or cliché.
- **Color Palette:**
- Primary: Dark Charcoal (`#1a1a1a`)
- Secondary: Deep Burgundy (`#800020`)
- Accent: Muted Gold (`#B08D57`)
- Text/Background: Off-White (`#F5F5F5`) / Light Gray (`#E0E0E0`)
- Success: Teal (`#008080`)
- Error: Muted Red (`#A04040`)
- **Typography:**
- Headings: A sophisticated serif font with a slight gothic flair (e.g., 'Playfair Display', 'IM Fell English SC').
- Body Text: A clean, highly readable sans-serif font (e.g., 'Inter', 'Lato').
- **Layout:** Consistent use of a grid system (e.g., 12-column). Clear visual hierarchy. Cards for content items and analytics modules. Sidebar or top navigation for main sections.
- **Responsiveness:** Mobile-first approach. Components must adapt gracefully to various screen sizes. Tailwind's responsive prefixes (sm:, md:, lg:) will be heavily utilized.
- **Visual Elements:** Subtle use of dark gradients, perhaps a slightly textured background in certain sections. Iconography should be clean and modern, possibly with a hint of ornate detail.
**8. SAMPLE/MOCK DATA:**
* **`aesthetics`:**
* `{ id: 1, name: 'Backrooms', description: 'Endless, uncanny interior spaces.', icon: '/icons/backrooms.svg' }`
* `{ id: 2, name: 'Institutional Gothic', description: 'The aestheticization of bureaucratic and corporate dread.', icon: '/icons/institution.svg' }`
* **`tags`:**
* `{ id: 1, name: 'liminal space' }`
* `{ id: 2, name: 'corporate horror' }`
* `{ id: 3, name: 'nostalgia' }`
* `{ id: 4, name: 'empty architecture' }`
* **`content_items`:**
* `{ id: 1, title: 'The Psychology of the Backrooms', url: 'https://example.com/backrooms-psychology', contentType: 'article', summary: 'An analysis of the fear of the unknown and childhood memories...', mainAestheticId: 1, publishedDate: '2023-01-15' }`
* `{ id: 2, title: 'Photos: Abandoned Office Buildings', url: 'https://example.com/abandoned-offices', contentType: 'image', summary: 'A collection of haunting images from disused corporate spaces.', mainAestheticId: 2, publishedDate: '2023-03-22' }`
* `{ id: 3, title: 'Discussion: Is the Backrooms Real?', url: 'https://example.com/backrooms-real-thread', contentType: 'discussion', summary: 'A deep dive forum thread exploring the origins and reality of the Backrooms.', mainAestheticId: 1, publishedDate: '2022-11-01' }`
* **`content_tags` (linking content item 1 to tags 1 and 3):**
* `{ contentItemId: 1, tagId: 1 }`
* `{ contentItemId: 1, tagId: 3 }`
* **`comments`:**
* `{ id: 1, contentItemId: 1, userId: 'user-abc', body: 'Great analysis! Really captured the feeling.', createdAt: '2023-01-16T10:00:00Z' }`
**9. TURKISH TRANSLATIONS:**
- **App Title:** Gotik Arşiv
- **Explore Page Title:** Keşfet
- **Analytics Page Title:** Analizler
- **Submit Content Button:** İçerik Öner
- **Sign In Button:** Giriş Yap
- **Sign Up Button:** Kayıt Ol
- **Search Placeholder:** Ara...
- **Filter By Aesthetic:** Estetiğe Göre Filtrele
- **Content Type:** İçerik Türü
- **Related Content:** İlgili İçerikler
- **Leave a Comment:** Yorum Yap
- **Post Comment Button:** Yorumu Gönder
- **Loading:** Yükleniyor...
- **No Data Available:** Veri Bulunamadı.
- **Add New Content:** Yeni İçerik Ekle
- **Submit:** Gönder
**10. ANIMATIONS & TRANSITIONS:**
- **Page Transitions:** Subtle fade-in/fade-out using Next.js's built-in capabilities or a library like `Framer Motion` for more complex animations between pages.
- **Hover Effects:** Slight scale-up or shadow change on `ContentCard` and buttons. Smooth transitions using `transition-all duration-300 ease-in-out`.
- **Loading States:** Skeleton loaders for content lists and charts while data is fetching. `LoadingSpinner` component usage.
- **Button States:** Visual feedback on click (e.g., slight depress effect).
**11. EDGE CASES:**
- **Empty States:** Display user-friendly messages and potentially calls to action when no content, comments, or analytics data is available (e.g., 'No content found matching your filters. Try broadening your search.', 'Be the first to comment!').
- **Authentication:** Protect routes using middleware or checks within Server Components/Server Actions. Handle expired sessions and re-authentication prompts.
- **Authorization:** Implement role-based access control (e.g., only admins can add content via the admin panel).
- **Error Handling:** Graceful error handling for API requests and Server Actions. Display user-friendly error messages. Log errors server-side.
- **Validation:** Use Zod for robust data validation on all form submissions and API inputs (both client-side and server-side).
- **URL Handling:** Ensure clean, SEO-friendly URLs using slugs for aesthetics and content IDs.
- **Data Integrity:** Use database constraints and transactions where necessary to maintain data consistency.