Generate a fully functional, multi-page Next.js MVP application for 'Retro Hardware Hub'. The application will serve as a community platform for enthusiasts interested in porting operating systems and software to vintage hardware. The core value proposition is to provide a centralized space for sharing knowledge, projects, and discussions related to retro hardware modifications and achievements.
**1. PROJECT OVERVIEW:**
'Retro Hardware Hub' aims to connect individuals passionate about retro computing and gaming consoles. Users can share their experiences, detailed guides, and success stories of porting modern or older operating systems and software to legacy hardware. It solves the problem of fragmented information scattered across forums and personal blogs by creating a dedicated, searchable, and interactive community platform. The core value is knowledge sharing, community building, and celebrating technical achievements in retro hardware modification.
**2. TECH STACK:**
- **Framework:** Next.js (App Router)
- **Language:** TypeScript
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM with PostgreSQL (using Neon or Supabase)
- **UI Components:** shadcn/ui for accessible and customizable components.
- **Authentication:** NextAuth.js (or Lucia Auth for more control) with email/password and potentially OAuth (GitHub).
- **State Management:** React Context API for global state, local component state for UI elements.
- **Form Handling:** React Hook Form with Zod for validation.
- **Data Fetching:** Server Actions for mutations, `fetch` API with caching for GET requests.
- **Deployment:** Vercel or similar platform.
- **Utilities:** Date-fns for date manipulation.
**3. DATABASE SCHEMA:**
```sql
-- Users Table
CREATE TABLE users (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
name VARCHAR(255),
email VARCHAR(255) UNIQUE NOT NULL,
password_hash VARCHAR(255) NOT NULL,
image TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
-- Projects Table
CREATE TABLE projects (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id UUID REFERENCES users(id) ON DELETE CASCADE,
title VARCHAR(255) NOT NULL,
description TEXT NOT NULL,
hardware_details TEXT, -- e.g., "Wii: PowerPC 750CL, 88MB RAM"
os_target VARCHAR(255), -- e.g., "Mac OS X 10.0 Cheetah"
porting_status VARCHAR(50) DEFAULT 'In Progress', -- e.g., 'In Progress', 'Completed', 'Abandoned'
github_url TEXT, -- Link to repository
demo_video_url TEXT, -- Link to demo video
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
-- Project Updates/Logs Table
CREATE TABLE project_updates (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
project_id UUID REFERENCES projects(id) ON DELETE CASCADE,
title VARCHAR(255) NOT NULL,
content TEXT NOT NULL,
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
-- Project Media Table
CREATE TABLE project_media (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
project_id UUID REFERENCES projects(id) ON DELETE CASCADE,
url TEXT NOT NULL, -- URL to image or video file (e.g., S3, Cloudinary)
alt_text VARCHAR(255),
type VARCHAR(10) -- 'image' or 'video'
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
-- Comments Table
CREATE TABLE comments (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
project_id UUID REFERENCES projects(id) ON DELETE CASCADE,
user_id UUID REFERENCES users(id) ON DELETE CASCADE,
content TEXT NOT NULL,
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
-- User Collections Table (For showcasing user's own hardware)
CREATE TABLE user_collections (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id UUID REFERENCES users(id) ON DELETE CASCADE,
item_name VARCHAR(255) NOT NULL,
item_description TEXT,
image_url TEXT,
acquired_at DATE
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
-- Add Indexes for performance
CREATE INDEX idx_projects_user_id ON projects(user_id);
CREATE INDEX idx_project_updates_project_id ON project_updates(project_id);
CREATE INDEX idx_project_media_project_id ON project_media(project_id);
CREATE INDEX idx_comments_project_id ON comments(project_id);
CREATE INDEX idx_comments_user_id ON comments(user_id);
CREATE INDEX idx_user_collections_user_id ON user_collections(user_id);
```
**4. CORE FEATURES & USER FLOW:**
* **User Authentication:**
* **Flow:** User lands on homepage -> Clicks 'Sign Up' or 'Login' -> Enters credentials (email/password) or uses OAuth -> Redirected to dashboard or homepage.
* **Sign Up:** `POST /api/auth/signup` - Validates email, checks for existing user, hashes password, creates user record, logs user in.
* **Login:** `POST /api/auth/login` - Validates credentials, creates session, redirects.
* **Logout:** `POST /api/auth/logout` - Destroys session, redirects.
* **Protected Routes:** Middleware checks for valid session token before allowing access to dashboard, profile, project creation pages.
* **Project Creation & Management:**
* **Flow:** Logged-in user navigates to 'Create Project' page -> Fills out a form (Title, Description, Hardware Details, OS Target, etc.) -> Submits form (Server Action) -> Project is created, user redirected to the new project page.
* **Editing:** User navigates to their project page -> Clicks 'Edit Project' -> Modifies form fields -> Submits changes (Server Action).
* **Adding Updates:** User on project page -> Clicks 'Add Update' -> Enters update title and content -> Submits (Server Action).
* **Adding Media:** User on project page -> Clicks 'Add Media' -> Uploads image/video file (handled by a backend service like Cloudinary or S3 via a dedicated API route/Server Action) -> Media record created associated with the project.
* **Project Discovery & Viewing:**
* **Flow:** User lands on homepage -> Sees featured/recent projects or uses search bar -> Clicks on a project card/link -> Navigates to the project detail page.
* **Project Detail Page:** Displays project title, description, author (link to profile), hardware details, OS target, updates, media (gallery/carousel), and comments section.
* **Search:** Search bar on header -> User types keywords -> API call to `GET /api/search?q={query}` -> Displays results on a search results page.
* **Filtering:** On Discover page, apply filters (OS, Hardware Type, Status) -> API call to `GET /api/projects?os={os}&hardware={hw}`.
* **Commenting:**
* **Flow:** User on project detail page -> Types comment in the input field -> Clicks 'Post Comment' -> Comment is added to the database (Server Action) and displayed in the comments section.
* **User Collections:**
* **Flow:** User navigates to 'My Collection' page -> Clicks 'Add Item' -> Fills out item details (Name, Description, Image) -> Submits (Server Action).
* **Viewing:** Displays a grid/list of items added by the user.
**5. API & DATA FETCHING:**
- **Server Actions:** Used for all mutations (POST, PUT, DELETE) like creating projects, adding comments, updating profiles, uploading media. Example: `async function createProject(formData: FormData) { ... }`
- **GET Requests:** Use `fetch` within Server Components for initial data loading, or `fetch` in Route Handlers (`GET /api/projects`, `GET /api/projects/:id`) for dynamic data fetching, especially for search and filtering. Leverage Next.js caching.
- **Data Structure:** API responses should be JSON objects. Server Actions will return data or throw errors.
- **Example `GET /api/projects/:id` Response:**
```json
{
"id": "uuid",
"title": "Mac OS X on Wii",
"description": "Porting Mac OS X 10.0 (Cheetah) ...",
"hardware_details": "Wii: PowerPC 750CL, 88MB RAM",
"os_target": "Mac OS X 10.0 Cheetah",
"user": {
"id": "uuid",
"name": "RetroCoder",
"image": "/path/to/avatar.jpg"
},
"updates": [
{ "id": "uuid", "title": "Bootloader Success", "content": "...", "created_at": "..." },
...
],
"media": [
{ "id": "uuid", "url": "...", "alt_text": "Wii running OS X", "type": "image" },
...
],
"comments": [
{ "id": "uuid", "content": "Amazing work!", "user": { "id": "uuid", "name": "TechFan", "image": "..." }, "created_at": "..." },
...
]
}
```
**6. 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.
- **`(app)/`** (Route Group for authenticated routes)
- **`layout.tsx`**: Main app layout with navigation (sidebar/header).
- **`dashboard/page.tsx`**: User dashboard (shows user's projects, collection snippets).
- **`projects/`**
- **`page.tsx`**: Project discovery page (list/grid view, filters).
- **`[projectId]/`**
- **`page.tsx`**: Project detail page (displays all project info, updates, media, comments).
- **`edit/page.tsx`**: Project edit form.
- **`updates/page.tsx`**: List of project updates.
- **`updates/new/page.tsx`**: Form to add a new project update.
- **`new/page.tsx`**: Form to create a new project.
- **`collection/`**
- **`page.tsx`**: User's personal collection page.
- **`new/page.tsx`**: Form to add a new item to the collection.
- **`profile/[userId]/page.tsx`**: Public user profile page.
- **`settings/page.tsx`**: User settings page (update profile, password).
- **`layout.tsx`**: Root layout (html, body, providers).
- **`page.tsx`**: Homepage (hero section, featured projects).
- **`api/`**
- **`auth/[...nextauth]/route.ts`**: NextAuth.js route handler.
- **`upload/route.ts`**: API route for handling media uploads.
- **`search/route.ts`**: API route for project search.
- **`components/`**
- **`ui/`** (Re-exported shadcn/ui components: Button, Input, Card, Sheet, Dialog, Avatar, etc.)
- **`layout/`**: Header, Footer, Sidebar components.
- **`forms/`**: ProjectForm, CommentForm, LoginForm, SignupForm, CollectionItemForm.
- **`project/`**: ProjectCard, ProjectDetailView, ProjectUpdateList, MediaGallery, CommentSection.
- **`collection/`**: CollectionItemCard.
- **`common/`**: LoadingSpinner, ErrorMessage, Pagination.
**7. UI/UX DESIGN & VISUAL IDENTITY:**
- **Design Style:** "Retro-Futuristic Tech". A blend of vintage computing aesthetics with a clean, modern interface. Think subtle CRT scanlines, monospace fonts for code snippets, and a palette inspired by early computer interfaces but modernized.
- **Color Palette:**
- Primary: `#0A7AFF` (Vibrant Blue)
- Secondary: `#8A2BE2` (Orchid Purple)
- Accent: `#39FF14` (Bright Green)
- Background: `#1E1E1E` (Dark Gray)
- Surface: `#2A2A2A` (Slightly Lighter Dark Gray)
- Text (Primary): `#E0E0E0` (Light Gray)
- Text (Secondary): `#A0A0A0` (Medium Gray)
- **Typography:**
- Headings: 'Press Start 2P' (Google Fonts - for retro feel) or a clean sans-serif like 'Inter'.
- Body Text: 'Roboto Mono' (Google Fonts - for code/technical feel) or 'Inter'.
- **Layout:** Use a content-first approach. Max-width containers with ample whitespace. Sidebar navigation for authenticated users. Grid system for project listings and collections.
- **Animations:** Subtle hover effects on cards and buttons. Smooth transitions between pages. Loading spinners/skeletons during data fetching. Fade-in animations for newly loaded content.
- **Responsive Rules:** Mobile-first design. Utilize Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`) for layout adjustments. Ensure readability and usability across all screen sizes.
**8. SAMPLE/MOCK DATA:**
* **User:**
```json
{
"id": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"name": "PixelPioneer",
"email": "pioneer@example.com",
"image": "/avatars/pixelpioneer.png"
}
```
* **Project:**
```json
{
"id": "f0e9d8c7-b6a5-4321-fedc-ba9876543210",
"title": "Linux on Raspberry Pi 1",
"description": "Successfully booted and ran a lightweight Linux distribution on the original Raspberry Pi Model B.",
"hardware_details": "Raspberry Pi Model B, 512MB RAM, SD Card Storage",
"os_target": "Raspberry Pi OS (Debian based)",
"user_id": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"created_at": "2023-10-26T10:00:00Z"
}
```
* **Project Update:**
```json
{
"id": "1a2b3c4d-5e6f-7890-abcd-ef1234567890",
"project_id": "f0e9d8c7-b6a5-4321-fedc-ba9876543210",
"title": "Initial Boot Success",
"content": "Managed to get the kernel to load and display the console output. Next steps: setting up networking.",
"created_at": "2023-10-27T11:30:00Z"
}
```
* **Project Media:**
```json
{
"id": "c4d5e6f7-a1b2-3456-fedc-789012345678",
"project_id": "f0e9d8c7-b6a5-4321-fedc-ba9876543210",
"url": "/media/rpi1_boot.jpg",
"alt_text": "Raspberry Pi 1 booting Linux",
"type": "image"
}
```
* **Comment:**
```json
{
"id": "98765432-10fe-dcba-9876-543210fedcba",
"project_id": "f0e9d8c7-b6a5-4321-fedc-ba9876543210",
"user_id": "... (another user's ID)",
"content": "Great work! Have you tried running X server on it?",
"created_at": "2023-10-28T14:00:00Z"
}
```
* **User Collection Item:**
```json
{
"id": "11223344-5566-7788-99aa-bbccddeeff00",
"user_id": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"item_name": "Original Game Boy",
"item_description": "DMG-01 model, fully functional with a backlight mod.",
"image_url": "/collections/gboy_dmg.jpg",
"acquired_at": "2020-05-15"
}
```
**9. TURKISH TRANSLATIONS:**
- **App Title:** Retro Donanım Merkezi
- **Homepage:**
- Hero Title: Geçmişin Teknolojisi, Geleceğin İlhamı
- Hero Subtitle: Eski donanımlara işletim sistemi ve yazılım portlama projelerinizi paylaşın, keşfedin ve topluluğa katılın.
- CTA Button: Proje Keşfet
- Featured Projects Title: Öne Çıkan Projeler
- **Navigation:**
- Home: Ana Sayfa
- Discover: Keşfet
- Create Project: Proje Oluştur
- My Collection: Koleksiyonum
- Profile: Profil
- Settings: Ayarlar
- Login/Sign Up: Giriş Yap / Kayıt Ol
- Logout: Çıkış Yap
- **Project Page:**
- Title: Proje Detayları
- Description Label: Açıklama
- Hardware Label: Donanım Detayları
- OS Target Label: Hedef İşletim Sistemi
- Author Label: Yazar
- Created At Label: Oluşturulma Tarihi
- Updates Tab: Güncellemeler
- Media Tab: Medya
- Comments Tab: Yorumlar
- Add Comment Placeholder: Yorumunuzu yazın...
- Post Comment Button: Yorum Gönder
- Edit Project Button: Projeyi Düzenle
- Add Update Button: Güncelleme Ekle
- Add Media Button: Medya Ekle
- **Forms:**
- Project Title Input Label: Proje Adı
- Project Description Textarea Label: Proje Açıklaması
- Hardware Details Textarea Label: Donanım Detayları
- OS Target Input Label: Hedef İşletim Sistemi
- Github URL Input Label: GitHub Deposu URL'si
- Save Project Button: Projeyi Kaydet
- Add Collection Item Button: Koleksiyona Ekle
- **General:**
- Loading: Yükleniyor...
- No Data: Veri bulunamadı.
- Error: Bir hata oluştu.
- Search Placeholder: Projeleri ara...
**10. ANIMATIONS:**
- **Page Transitions:** Use `Framer Motion` or similar for smooth fade-in/slide-in effects between pages managed by the App Router.
- **Card Interactions:** Subtle scale-up or shadow lift on card hover.
- **Button States:** Visual feedback on click (slight press down effect).
- **Loading Indicators:** Use shadcn/ui's `Skeleton` component or a custom `LoadingSpinner` that integrates with Tailwind for placeholders during data fetching.
- **Image/Media Loading:** Fade-in effect once media assets are fully loaded.
- **Form Submission:** Show a loading state on the submit button while the Server Action is processing.
**11. EDGE CASES:**
- **Authentication:** Handle guest users gracefully (e.g., disable commenting/creation features, prompt to log in). Ensure session management is secure.
- **Empty States:** Design informative and visually appealing empty states for project lists, collections, and comment sections (e.g., "Henüz hiç projeniz yok. Hemen bir tane oluşturun!").
- **Data Validation:** Implement robust validation on all form inputs (client-side with Zod/React Hook Form, server-side with Drizzle ORM schema checks and potentially Zod within Server Actions).
- **Error Handling:** Implement global error handling using error boundaries and specific error messages for API failures or unexpected issues. Display user-friendly error messages.
- **Image/File Uploads:** Handle upload failures, size limits, and file type restrictions. Provide clear feedback to the user.
- **Permissions:** Ensure users can only edit/delete their own projects and manage their own collection.
- **Database Errors:** Gracefully handle potential database connection issues or query failures.