Geliştirici Araçları
Retro Engine Hub

warningProblem

"I Built an Open-World Engine for the N64 [video]"
psychologyPotansiyel Çözüm

N64 gibi retro konsollar için oyun motorları geliştiren ve paylaşan geliştiriciler için bir platform. Oyun motorlarını sergileme, indirme, inceleme ve işbirliği yapma imkanı sunarak retro oyun geliştirme ekosistemini canlandırır.
groupHedef Kitle

N64 ve diğer retro konsol platformları için oyun geliştirmeye ilgi duyan bağımsız oyun geliştiricileri, hobi amaçlı kodlayıcılar, retro oyun meraklıları ve bu platformlar için geliştirme araçları (game engine'ler) üretmek isteyen topluluklar.
paymentsGelir Modeli

Ücretli motor sürümleri/eklentileri satışı için komisyon alma, 'premium' geliştirici hesapları (daha fazla depolama alanı, gelişmiş analizler vb.) veya geliştiricilere özel sponsorluk/bağış toplama özellikleri.
Aksiyon Planı

Kullanıcıların geliştirdiği N64 oyun motorlarını yükleyebileceği ve detaylı açıklama ekleyebileceği bir 'Motor Kütüphanesi'.
Kullanıcıların motorları 'beğenme', 'indirme' ve derecelendirme yapabilmesi.
Motor geliştiricilerinin birbirleriyle iletişim kurabileceği ve projeler hakkında geri bildirim alabileceği yorum ve forum alanı.
Basit bir kullanıcı profili sayfası (yüklenen motorları ve aktiviteleri gösteren).
Motorları kategorilere (örn: 2D, 3D, Physics) ayırma ve arama özelliği.
Pazar Analizi

7.8Puan
Kaynak: Hacker Newsopen_in_new
AI Prompt

Generate a fully functional, multi-page Next.js MVP application for 'Retro Engine Hub'. This platform allows developers to share and discover game engines for retro consoles, primarily focusing on the N64 initially.

PROJECT OVERVIEW:
Retro Engine Hub aims to be the central marketplace for developers creating and sharing game engines specifically for retro consoles like the Nintendo 64. It addresses the problem of fragmentation and discoverability of these specialized engines. The core value proposition is to foster a community around retro game development by providing a dedicated space for showcasing, sharing, downloading, rating, and discussing game engines. This will empower developers, preserve knowledge, and encourage new projects in the retro gaming space.

TECH STACK:
- Framework: Next.js (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- ORM: Drizzle ORM (PostgreSQL)
- Database: PostgreSQL (using Vercel Postgres or similar)
- Authentication: NextAuth.js (or Clerk for easier integration)
- State Management: React Context API / Zustand (for global state if needed)
- Form Handling: React Hook Form + Zod for validation
- Other: React Icons, clsx, date-fns

DATABASE SCHEMA:

1.  **Users Table:**
    - `id`: UUID (Primary Key)
    - `name`: VARCHAR(100)
    - `email`: VARCHAR(255) UNIQUE
    - `emailVerified`: TIMESTAMP
    - `image`: VARCHAR(255) // URL to profile picture
    - `createdAt`: TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    - `updatedAt`: TIMESTAMP DEFAULT CURRENT_TIMESTAMP

2.  **Engines Table:**
    - `id`: UUID (Primary Key)
    - `userId`: UUID (Foreign Key to Users.id)
    - `name`: VARCHAR(150) NOT NULL
    - `description`: TEXT NOT NULL
    - `version`: VARCHAR(50) NOT NULL
    - `fileUrl`: VARCHAR(255) NOT NULL // URL to the engine download file (e.g., S3)
    - `thumbnailUrl`: VARCHAR(255) // URL to a preview image/logo
    - `category`: VARCHAR(100) // e.g., '2D', '3D', 'Physics', 'Utility'
    - `tags`: TEXT[] // Array of tags for searchability
    - `averageRating`: DECIMAL(3, 2) DEFAULT 0.00
    - `downloadCount`: INTEGER DEFAULT 0
    - `createdAt`: TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    - `updatedAt`: TIMESTAMP DEFAULT CURRENT_TIMESTAMP

3.  **Ratings Table:**
    - `id`: UUID (Primary Key)
    - `userId`: UUID (Foreign Key to Users.id)
    - `engineId`: UUID (Foreign Key to Engines.id)
    - `rating`: SMALLINT CHECK (rating >= 1 AND rating <= 5) NOT NULL
    - `comment`: TEXT
    - `createdAt`: TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    - `updatedAt`: TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    - UNIQUE (`userId`, `engineId`) // A user can only rate an engine once

4.  **Downloads Table:** (To track downloads accurately)
    - `id`: UUID (Primary Key)
    - `userId`: UUID (Foreign Key to Users.id)
    - `engineId`: UUID (Foreign Key to Engines.id)
    - `downloadedAt`: TIMESTAMP DEFAULT CURRENT_TIMESTAMP

5.  **Tags Table:** (For managing and associating tags)
    - `id`: Serial (Primary Key)
    - `name`: VARCHAR(50) UNIQUE NOT NULL

6.  **EngineTags Table:** (Many-to-many relationship between Engines and Tags)
    - `engineId`: UUID (Foreign Key to Engines.id)
    - `tagId`: INTEGER (Foreign Key to Tags.id)
    - PRIMARY KEY (`engineId`, `tagId`)

CORE FEATURES & USER FLOW:

1.  **Authentication (Sign Up / Sign In):**
    - User lands on homepage.
    - Clicks 'Sign Up' or 'Sign In' button.
    - Redirected to authentication page (e.g., using NextAuth.js provider like Google, GitHub, or email/password).
    - Upon successful authentication, user is redirected to the dashboard or homepage, with their session active.
    - Protected routes (e.g., 'Upload Engine', 'My Profile') require authentication.

2.  **Engine Listing & Browsing:**
    - Authenticated or unauthenticated users can view the main 'Engines' page.
    - The page displays a grid or list of available engines with thumbnails, names, creators, and average ratings.
    - Users can filter engines by category (e.g., '2D', '3D') using dropdowns or sidebar filters.
    - Users can search for engines by name, tags, or description using a search bar.
    - Pagination is implemented for large numbers of engines.

3.  **Engine Detail View:**
    - Clicking an engine from the listing page navigates to the 'Engine Detail' page.
    - This page shows:
        - Large thumbnail/preview.
        - Engine name, creator (linked to profile), version.
        - Full description.
        - Category and tags.
        - Average rating and number of downloads.
        - 'Download' button (increments download count and logs the download).
        - 'Rate & Review' section (visible only to authenticated users).
        - User comments/reviews for the engine.

4.  **Uploading an Engine (Authenticated Users):**
    - User navigates to the 'Upload Engine' page (requires login).
    - A form is presented with fields for:
        - Engine Name
        - Description
        - Version
        - Category (dropdown)
        - Tags (multi-select or input with autocomplete)
        - Thumbnail Upload
        - Engine File Upload (e.g., .zip, .rar)
    - Form validation (required fields, file type/size limits).
    - Upon successful submission, the engine data is saved to the database, and files are uploaded to a cloud storage service (like AWS S3, Google Cloud Storage, or Vercel Blob).
    - Confirmation message is shown.

5.  **Rating & Reviewing an Engine (Authenticated Users):**
    - On the 'Engine Detail' page, authenticated users see the 'Rate & Review' form.
    - They can select a star rating (1-5) and optionally add a text comment.
    - Form validation (rating required).
    - Submission updates the `Ratings` table and recalculates the `averageRating` for the engine.

6.  **User Profile:**
    - Authenticated users can access their 'Profile' page.
    - Displays user's name, email (masked), profile picture.
    - Lists engines they have uploaded.
    - Lists engines they have downloaded or rated (optional for MVP).

API & DATA FETCHING:
- Use Next.js API Routes (App Router Server Actions preferred for mutations).
- GET /api/engines: Fetch a list of engines (with pagination, filtering, sorting parameters).
- GET /api/engines/[id]: Fetch details for a specific engine.
- POST /api/engines: Upload a new engine (requires authentication, handles file uploads).
- PUT /api/engines/[id]: Update an existing engine (requires ownership).
- POST /api/engines/[id]/rate: Submit a rating and review for an engine (requires authentication).
- GET /api/users/[id]: Fetch user profile details.
- GET /api/tags: Fetch available tags for filtering/autocomplete.
- Server Actions will be used for mutations (POST, PUT, DELETE) related to engines, ratings, and profile updates to leverage Next.js's built-in data mutation handling with React Server Components.
- Client components will use `fetch` or libraries like SWR/React Query for GET requests where real-time data or client-side caching is beneficial.

COMPONENT BREAKDOWN (Next.js App Router Structure):

-   `app/layout.tsx`: Root layout, includes global styles, font, AuthProvider, and main navigation.
-   `app/page.tsx`: Homepage - displays featured engines, call to action.
-   `app/engines/page.tsx`: Engine listing page - grid/list view, filtering, search.
-   `app/engines/[id]/page.tsx`: Engine detail page - displays all info, download, rating form.
-   `app/engines/upload/page.tsx`: Upload engine form page (protected route).
-   `app/profile/page.tsx`: User profile page (protected route).
-   `app/auth/signin/page.tsx`: Sign in page.
-   `app/auth/signup/page.tsx`: Sign up page (if not using OAuth directly).

Shared UI Components (`components/ui/` managed by shadcn/ui):
-   `Button`: For actions like download, upload, sign in.
-   `Card`: To display engine summaries in lists.
-   `Input`, `Textarea`, `Label`: For forms.
-   `Select`, `DropdownMenu`: For category filtering.
-   `Avatar`: For user profile images.
-   `Progress`: For upload progress indication.
-   `Badge`: For displaying tags.
-   `AlertDialog`: For confirmations (e.g., before deleting).
-   `Tabs`: To switch between engine details and reviews.

Page-Specific Components:
-   `EngineCard.tsx`: Renders a single engine item in the listing grid.
-   `EngineDetailHeader.tsx`: Displays core info at the top of the detail page.
-   `RatingForm.tsx`: Handles the star rating and comment submission.
-   `ReviewList.tsx`: Displays reviews for an engine.
-   `UploadForm.tsx`: The main form component for uploading engines.
-   `UserProfileHeader.tsx`: Displays user info on the profile page.
-   `EngineList.tsx`: Container component managing the fetching and rendering of EngineCard items.
-   `SearchBar.tsx`: Handles user input for search.
-   `CategoryFilter.tsx`: Handles category selection.

State Management:
-   Client-side state for forms, UI interactions (e.g., modal toggles) using `useState`, `useReducer`.
-   Server state (data fetching) managed by Next.js data fetching methods, Server Actions, and potentially SWR/React Query if client-side caching/revalidation is complex.
-   Global state (e.g., user authentication status) managed by AuthProvider context or Zustand.

UI/UX DESIGN & VISUAL IDENTITY:
-   **Design Style:** "Retro Futuristic" - blends the nostalgia of the N64 era with a clean, modern web aesthetic. Think pixel art elements used subtly, muted retro color palettes contrasted with sharp, clean UI elements.
-   **Color Palette:**
    - Primary: `#4A90E2` (Modern Blue)
    - Secondary: `#F5A623` (Retro Orange Accent)
    - Background: `#1E1E1E` (Dark, almost black, allows content to pop)
    - Card/Element Background: `#2C2C2E` (Slightly lighter dark gray)
    - Text Primary: `#FFFFFF` (White)
    - Text Secondary: `#A0A0A0` (Light Gray for less important text)
    - Accent/Highlight: `#7ED321` (Vibrant Green for success states or active elements)
-   **Typography:**
    - Headings: A pixelated or blocky font reminiscent of 8-bit/16-bit era, e.g., 'Press Start 2P' or a similar Google Font. (Use sparingly for H1/H2).
    - Body Text: A clean, readable sans-serif font like 'Inter' or 'Roboto'.
-   **Layout:**
    - Use a responsive grid system (Tailwind CSS defaults).
    - Max-width container for content on larger screens.
    - Clear visual hierarchy: prominent headings, well-spaced sections, intuitive navigation.
    - Sidebar for filtering/navigation on desktop, collapsible/modal on mobile.
-   **Imagery:** Use low-poly 3D models or pixel art for engine thumbnails and hero sections where appropriate.

ANIMATIONS:
-   **Page Transitions:** Subtle fade-in/slide-in animations for page changes using Next.js `useRouter` and a library like `Framer Motion` or CSS transitions.
-   **Hover Effects:** Slight scaling or background color changes on interactive elements (buttons, cards).
-   **Loading States:** Skeleton loaders for lists and cards while data is fetching. Spinner component for button submissions.
-   **Micro-interactions:** Subtle animations on rating stars, download counts updating.
-   **Parallax (Optional):** Subtle parallax effect on the hero section of the homepage.

EDGE CASES:
-   **No Engines Found:** Display a clear message on the listing page when no engines match the search/filter criteria.
-   **Empty State (User Profile/Uploads):** Show encouraging messages and clear calls to action for users who haven't uploaded any engines yet.
-   **File Upload Errors:** Handle network errors, server errors, invalid file types, size limits gracefully. Provide user feedback.
-   **Authentication:** Ensure all protected routes are correctly handled. Redirect to login if unauthenticated. Handle session expiry.
-   **Rating Duplicates:** The UNIQUE constraint in the `Ratings` table prevents duplicate ratings. Implement UI feedback if a user tries to rate again.
-   **Database Errors:** Implement proper error handling in API routes and Server Actions, returning meaningful error messages or status codes.
-   **Invalid Data:** Zod validation for all form inputs to prevent submission of malformed data.
-   **Engine Not Found (404):** Handle cases where an engine ID in the URL does not exist.

SAMPLE/MOCK DATA:

**Engines:**
1.  `{ id: 'uuid-1', userId: 'user-uuid-1', name: 'N64 Vector Graphics Engine', description: 'A 2D vector graphics engine optimized for N64 display capabilities. Supports basic shapes, lines, and fills.', version: '1.0.2', fileUrl: 'http://example.com/files/vector_engine_n64.zip', thumbnailUrl: 'http://example.com/thumbs/vector.png', category: '2D', tags: ['graphics', '2D', 'vector'], averageRating: 4.5, downloadCount: 150, createdAt: '2023-10-26T10:00:00Z', updatedAt: '2023-10-26T10:00:00Z' }`
2.  `{ id: 'uuid-2', userId: 'user-uuid-2', name: 'HyperCube 3D Physics Sim', description: 'Basic 3D physics simulation engine capable of handling rigid body dynamics and simple collisions.', version: '0.9.1b', fileUrl: 'http://example.com/files/hypercube_phys.zip', thumbnailUrl: 'http://example.com/thumbs/hypercube.png', category: 'Physics', tags: ['3D', 'physics', 'simulation', 'N64'], averageRating: 4.1, downloadCount: 95, createdAt: '2023-10-25T12:30:00Z', updatedAt: '2023-10-25T12:30:00Z' }`
3.  `{ id: 'uuid-3', userId: 'user-uuid-1', name: 'Mario Kart Style Kart Physics', description: 'A reusable kart physics component tailored for N64-style racing games.', version: '1.1.0', fileUrl: 'http://example.com/files/kart_physics_mk.zip', thumbnailUrl: 'http://example.com/thumbs/kart.png', category: 'Physics', tags: ['karting', 'physics', 'racing', 'N64'], averageRating: 4.8, downloadCount: 210, createdAt: '2023-10-20T09:00:00Z', updatedAt: '2023-10-22T14:00:00Z' }`

**Users:**
1.  `{ id: 'user-uuid-1', name: 'DevAlpha', email: 'alpha@example.com', image: 'http://example.com/avatars/alpha.png' }`
2.  `{ id: 'user-uuid-2', name: 'CodeWizard', email: 'wizard@example.com', image: 'http://example.com/avatars/wizard.png' }`

**Ratings:**
1.  `{ id: 'rating-uuid-1', userId: 'user-uuid-1', engineId: 'uuid-1', rating: 5, comment: 'Excellent work! Very performant.', createdAt: '2023-10-26T11:00:00Z' }`
2.  `{ id: 'rating-uuid-2', userId: 'user-uuid-2', engineId: 'uuid-1', rating: 4, comment: 'Good foundation, could use more features.', createdAt: '2023-10-26T15:00:00Z' }`
3.  `{ id: 'rating-uuid-3', userId: 'user-uuid-1', engineId: 'uuid-3', rating: 5, comment: 'Perfect for my new racing game!', createdAt: '2023-10-23T10:00:00Z' }`

**Tags:**
1.  `{ id: 1, name: 'graphics' }`
2.  `{ id: 2, name: '2D' }`
3.  `{ id: 3, name: 'Physics' }`
4.  `{ id: 4, name: '3D' }`
5.  `{ id: 5, name: 'N64' }`
6.  `{ id: 6, name: 'simulation' }`
7.  `{ id: 7, name: 'racing' }`