Gaming SaaS

Linux Gaming Hub

warningProblem

"Steam on Linux Use Skyrocketed Above 5% in March"

psychologyPotansiyel Çözüm

Linux üzerinde Steam kullanımının hızla artmasıyla, oyuncuların Linux'ta oyun deneyimlerini optimize etmelerine, donanım performanslarını izlemelerine, oyun topluluklarıyla etkileşim kurmalarına ve Linux'a özel oyun çözümlerini keşfetmelerine olanak tanıyan kapsamlı bir platform.

groupHedef Kitle

Linux işletim sistemini masaüstü veya dizüstü bilgisayarında kullanan, özellikle Steam üzerinden oyun oynayan oyuncular. Bu kitle, teknik bilgiye sahip, sistem optimizasyonuna önem veren, açık kaynak felsefesini benimseyen ve oyun performansını en üst düzeye çıkarmak isteyen oyunculardan oluşmaktadır. Ayrıca, macOS ve Windows'tan Linux'a geçiş yapan veya geçmeyi düşünen oyuncular da hedef kitledir.

paymentsGelir Modeli

Premium özellikler (örneğin, gelişmiş analizler, özel optimizasyon araçları, reklamsız deneyim) için abonelik modeli (Freemium). Ayrıca, Linux oyun donanımı veya yazılımı satan firmalar için hedefli reklamcılık.

Aksiyon Planı

Linux Steam İstatistikleri Takibi: Kullanıcının Steam hesaplarıyla entegre olarak Linux'taki oyun kullanımını, popüler oyunları, donanım kullanımını (CPU, GPU, RAM) gerçek zamanlı olarak gösteren bir dashboard.

Oyun Performans Optimizasyon Rehberleri: Linux'ta belirli oyunlar için en iyi performans ayarlarını, sürücü güncellemelerini ve ince ayarları (tweaks) içeren rehberler ve ipuçları.

Linux Oyun Topluluğu Forumu: Kullanıcıların Linux'ta oyun deneyimleri, karşılaştıkları sorunlar ve çözümler hakkında birbirleriyle etkileşim kurabileceği bir forum.

Donanım Uyumluluk Kontrolü: Kullanıcıların mevcut donanımlarını (CPU, GPU, RAM) girerek Linux'ta hangi Steam oyunlarının sorunsuz çalışabileceğini öngören bir araç.

Pazar Analizi

8.3Puan

Kaynak: Hacker Newsopen_in_new

AI Prompt

Generate a fully functional, multi-page Next.js MVP application for 'Linux Gaming Hub'. This platform aims to empower Linux gamers by providing insights into their gaming performance, optimizing their setups, and fostering a community. The problem addressed is the growing need for a centralized hub catering specifically to the unique challenges and opportunities of gaming on Linux, especially with the rise of Steam on Linux.

**PROJECT OVERVIEW:**
Linux Gaming Hub is a SaaS platform designed for Linux users who game via Steam. It solves the fragmentation of information and tools needed to optimize the gaming experience on Linux. The core value proposition is to provide a seamless, integrated experience for Linux gamers, offering performance analytics, optimization guides, community support, and hardware compatibility checks, all within a user-friendly interface. The goal is to make gaming on Linux as accessible and performant as on other major operating systems.

**TECH STACK:**
- **Framework:** Next.js (App Router)
- **UI Library:** shadcn/ui (for accessible, reusable components)
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM (PostgreSQL compatible)
- **Database:** PostgreSQL (or a compatible alternative like Supabase)
- **Authentication:** NextAuth.js (or Clerk for easier integration)
- **State Management:** React Context API / Zustand
- **API Layer:** Next.js API Routes / tRPC (optional, for type safety)
- **Charting:** Recharts or Chart.js
- **Form Handling:** React Hook Form + Zod for validation
- **Deployment:** Vercel (recommended)

**DATABASE SCHEMA:**
1.  **`users` Table:**
    *   `id` (UUID, Primary Key)
    *   `name` (VARCHAR)
    *   `email` (VARCHAR, Unique)
    *   `emailVerified` (TIMESTAMP)
    *   `image` (VARCHAR)
    *   `createdAt` (TIMESTAMP, Default NOW())
    *   `updatedAt` (TIMESTAMP)

2.  **`accounts` Table (for NextAuth.js):**
    *   `id` (BigInt, Primary Key, Auto-increment)
    *   `userId` (UUID, Foreign Key to `users.id`)
    *   `type` (VARCHAR - 'oauth', 'email' etc.)
    *   `provider` (VARCHAR)
    *   `providerAccountId` (VARCHAR)
    *   `refresh_token` (TEXT)
    *   `access_token` (TEXT)
    *   `expires_at` (BigInt)
    *   `token_type` (VARCHAR)
    *   `scope` (VARCHAR)
    *   `id_token` (TEXT)
    *   `session_state` (VARCHAR)

3.  **`sessions` Table (for NextAuth.js):**
    *   `id` (BigInt, Primary Key, Auto-increment)
    *   `sessionToken` (VARCHAR, Unique)
    *   `userId` (UUID, Foreign Key to `users.id`)
    *   `expires` (TIMESTAMP)

4.  **`verificationTokens` Table (for NextAuth.js):**
    *   `identifier` (VARCHAR)
    *   `token` (VARCHAR, Unique)
    *   `expires` (TIMESTAMP)

5.  **`user_steam_profiles` Table:**
    *   `id` (UUID, Primary Key)
    *   `userId` (UUID, Foreign Key to `users.id`, Unique)
    *   `steamId64` (VARCHAR, Unique, Required)
    *   `personaName` (VARCHAR)
    *   `profileUrl` (VARCHAR)
    *   `avatarUrl` (VARCHAR)
    *   `lastSync` (TIMESTAMP)

6.  **`game_stats` Table:**
    *   `id` (UUID, Primary Key)
    *   `userSteamProfileId` (UUID, Foreign Key to `user_steam_profiles.id`)
    *   `gameId` (VARCHAR) // Steam App ID
    *   `gameName` (VARCHAR)
    *   `playtimeForever` (INTEGER) // in minutes
    *   `lastPlayed` (TIMESTAMP)
    *   `linuxSpecificInfo` (JSONB) // e.g., Proton compatibility score, notes
    *   `createdAt` (TIMESTAMP, Default NOW())

7.  **`hardware_specs` Table:**
    *   `id` (UUID, Primary Key)
    *   `userId` (UUID, Foreign Key to `users.id`, Unique)
    *   `cpu` (VARCHAR)
    *   `gpu` (VARCHAR)
    *   `ram` (INTEGER) // in GB
    *   `osVersion` (VARCHAR)
    *   `driverVersion` (VARCHAR)
    *   `detectedAt` (TIMESTAMP, Default NOW())

8.  **`optimization_guides` Table:**
    *   `id` (UUID, Primary Key)
    *   `title` (VARCHAR)
    *   `slug` (VARCHAR, Unique)
    *   `content` (TEXT)
    *   `gameId` (VARCHAR, Nullable) // For game-specific guides
    *   `tags` (VARCHAR[])
    *   `createdAt` (TIMESTAMP, Default NOW())
    *   `updatedAt` (TIMESTAMP)

9.  **`forum_topics` Table:**
    *   `id` (UUID, Primary Key)
    *   `userId` (UUID, Foreign Key to `users.id`)
    *   `title` (VARCHAR)
    *   `content` (TEXT)
    *   `createdAt` (TIMESTAMP, Default NOW())
    *   `updatedAt` (TIMESTAMP)

10. **`forum_posts` Table:**
    *   `id` (UUID, Primary Key)
    *   `topicId` (UUID, Foreign Key to `forum_topics.id`)
    *   `userId` (UUID, Foreign Key to `users.id`)
    *   `content` (TEXT)
    *   `createdAt` (TIMESTAMP, Default NOW())
    *   `updatedAt` (TIMESTAMP)

**CORE FEATURES & USER FLOW:**

1.  **Authentication (OAuth with Steam / Email/Password):**
    *   **Flow:** User clicks 'Sign Up/Login'. Chooses 'Login with Steam' or 'Login with Email'.
    *   **Steam OAuth:** Redirected to Steam login. Grants permission. Returns to app with Steam ID. If new user, create user record and `user_steam_profiles` record.
    *   **Email/Password:** User enters email and password. If new, prompts for sign-up. If existing, logs in. Verifies email via token.
    *   **Edge Case:** Steam API error, invalid credentials, email already exists.

2.  **Steam Profile Integration & Data Sync:**
    *   **Flow:** After login, user is prompted to connect their Steam account (if not done via OAuth) or to sync data. User provides SteamID64.
    *   **Sync:** App makes a server-side request to Steam API (using `steamId64`) to fetch owned games, playtime, and potentially profile info. Data is stored/updated in `user_steam_profiles` and `game_stats` tables.
    *   **UI:** A dedicated 'Connect Steam' page or a section in 'Settings'. A 'Sync Now' button on the Dashboard.
    *   **Edge Case:** Invalid SteamID64, Steam API rate limiting, user has no games.

3.  **Dashboard - Linux Gaming Insights:**
    *   **Flow:** Upon login, user lands on the Dashboard. It displays key stats fetched from `game_stats` and potentially `hardware_specs`.
    *   **Content:** Overall playtime on Linux, Most played games (list/chart), Recent activity, System performance overview (CPU/GPU/RAM usage if available/provided), comparison to overall Linux Steam usage trends (fetched from public sources or aggregated anonymized data).
    *   **Data Fetching:** Server-side rendering (SSR) for initial load, client-side fetching/revalidation for dynamic data.
    *   **UI:** Use of charts (Recharts) for playtime trends and game distribution. Cards for key metrics.
    *   **Sample Data:** Display placeholder charts and stats if no user data is synced yet.

4.  **Optimization Guides:**
    *   **Flow:** User navigates to the 'Guides' section. Views a list of guides, filterable by game or tag. Clicks on a guide to read detailed steps.
    *   **Content:** Markdown-based content rendered as HTML. Includes text, code snippets, and potentially images.
    *   **Admin:** A simple admin interface (or direct DB seeding) to add/edit guides.
    *   **UI:** List view with search/filter. Detail view with clean typography and code formatting.
    *   **Edge Case:** Guide not found (404).

5.  **Community Forum:**
    *   **Flow:** User navigates to 'Forum'. Views list of topics. Can create a new topic or reply to existing ones.
    *   **Functionality:** CRUD operations for topics and posts.
    *   **UI:** Paginated list of topics. Thread view showing topic and replies. Simple form for posting.
    *   **Edge Case:** Empty forum, deleted topics/posts, user not logged in to post.

6.  **Hardware Compatibility Check:**
    *   **Flow:** User navigates to 'Compatibility Check'. Enters CPU, GPU, RAM, and optionally Linux Distro/Kernel/Driver versions.
    *   **Logic:** A backend process (or potentially a client-side JS logic for simple checks) compares user specs against a database of game requirements and known Linux performance characteristics. Might involve calling external APIs or using a curated dataset.
    *   **Output:** Displays a list of compatible games or flags potential issues for specific titles.
    *   **UI:** A form for input, followed by a results display section.
    *   **Edge Case:** Insufficient input data, no matching games found.

**API & DATA FETCHING:**
- Use Next.js API Routes or tRPC endpoints for backend logic (e.g., Steam API interaction, database mutations).
- Fetch data for SSR pages using `getServerSideProps` or directly within Server Components.
- Use client-side fetching (e.g., SWR, React Query) for dynamic dashboard updates or interactive elements.
- API Routes examples:
    - `POST /api/auth/steam`: Handles Steam OAuth callback.
    - `POST /api/user/sync-steam`: Initiates Steam data sync for the logged-in user.
    - `GET /api/stats/dashboard`: Fetches aggregated stats for the user's dashboard.
    - `GET /api/guides`: Fetches list of optimization guides.
    - `GET /api/guides/[slug]`: Fetches a specific guide.
    - `POST /api/forum/topics`: Creates a new forum topic.
    - `GET /api/forum/topics`: Fetches forum topics.
    - `POST /api/forum/topics/[id]/posts`: Adds a post to a topic.
    - `POST /api/compatibility/check`: Performs hardware compatibility check.
- Data Fetching Principle: Fetch only necessary data. Use caching strategies where appropriate (CDN, Vercel caching).

**COMPONENT BREAKDOWN (Next.js App Router Structure):**
- **`app/`**
    - **`layout.tsx`**: Root layout (HTML, Head, Body, global providers, Tailwind CSS setup).
    - **`page.tsx`**: Landing Page (Marketing content, CTA).
    - **`auth/`**
        - **`login/page.tsx`**: Login form (Email/Pass).
        - **`signup/page.tsx`**: Signup form (Email/Pass).
        - **`oauth/steam/callback/page.tsx`**: Handles Steam OAuth callback.
    - **`dashboard/`**
        - **`page.tsx`**: Main dashboard view. Contains `StatsOverviewCard`, `PlaytimeChart`, `GameList`, `HardwareStatusCard`.
        - **`loading.tsx`**: Dashboard loading state.
    - **`settings/`**
        - **`page.tsx`**: User settings page. Contains `ProfileForm`, `SteamConnectCard`, `HardwareForm`.
    - **`guides/`**
        - **`page.tsx`**: Guides list page. Contains `GuideList`, `SearchBar`, `FilterComponent`.
        - **`[slug]/page.tsx`**: Individual guide page. Renders guide content.
        - **`loading.tsx`**: Guides list loading state.
    - **`forum/`**
        - **`page.tsx`**: Forum topics list page. Contains `TopicList`, `CreateTopicButton`.
        - **`[topicId]/page.tsx`**: Forum thread view. Contains `PostList`, `ReplyForm`.
        - **`loading.tsx`**: Forum topics loading state.
    - **`compatibility/`**
        - **`page.tsx`**: Hardware compatibility check page. Contains `CompatibilityForm`, `CompatibilityResults`.
    - **`api/`** (For API Routes)
        - **`auth/[...nextauth]/route.ts`**: NextAuth.js handler.
        - **`user/route.ts`**: User-related API endpoints (e.g., sync steam).
        - **`stats/route.ts`**: Stats API endpoints.
        - **`guides/route.ts`**: Guides API endpoints.
        - **`forum/route.ts`**: Forum API endpoints.
        - **`compatibility/route.ts`**: Compatibility API endpoint.
- **`components/`**
    - **`ui/`**: Re-exported shadcn/ui components (Button, Card, Input, Label, Sheet, Dialog, Table, Chart, etc.).
    - **`layout/`**: `Navbar`, `Footer`, `Sidebar` (if applicable).
    - **`dashboard/`**: `StatsOverviewCard.tsx`, `PlaytimeChart.tsx`, `GameList.tsx`, `HardwareStatusCard.tsx`.
    - **`guides/`**: `GuideListItem.tsx`, `GuideContentRenderer.tsx`.
    - **`forum/`**: `TopicListItem.tsx`, `PostListItem.tsx`, `ReplyForm.tsx`.
    - **`common/`**: `LoadingSpinner.tsx`, `ErrorMessage.tsx`, `AuthGuard.tsx`.

**UI/UX DESIGN & VISUAL IDENTITY:**
- **Style:** Modern Minimalist Clean with subtle Dark Mode influence.
- **Color Palette:**
    - Primary: `#4F46E5` (Indigo-600)
    - Secondary: `#6366F1` (Indigo-500)
    - Accent: `#22D3EE` (Cyan-400)
    - Background (Dark Mode): `#111827` (Gray-900)
    - Card/Surface (Dark Mode): `#1F2937` (Gray-800)
    - Text (Dark Mode): `#F3F4F6` (Gray-100)
    - Background (Light Mode): `#FFFFFF` (White)
    - Card/Surface (Light Mode): `#F9FAFB` (Gray-50)
    - Text (Light Mode): `#111827` (Gray-900)
- **Typography:** Inter (or a similar sans-serif like Roboto). Use varying weights for hierarchy.
- **Layout:** Clean, card-based layout for dashboards and lists. Responsive design using Tailwind CSS breakpoints.
- **Sections:** Clear separation using padding and subtle borders/backgrounds.
- **Interactions:** Smooth transitions on hover states, subtle loading indicators.

**ANIMATIONS:**
- **Page Transitions:** Use Next.js `AnimatePresence` (from `framer-motion`) for fade-in/out effects on route changes.
- **Hover Effects:** Subtle scale or background color change on interactive elements (buttons, cards) using Tailwind CSS `hover:` variants.
- **Loading States:** Use `LoadingSpinner.tsx` component with skeleton loaders (shimmer effect) for data fetching.
- **Chart Animations:** Recharts provides basic entry animations; ensure they are smooth and not jarring.

**EDGE CASES:**
- **Authentication:** Handle expired sessions, invalid tokens, failed login attempts gracefully. Implement password reset flow.
- **Empty States:** Design informative empty states for the dashboard, game lists, forum, etc., guiding users on how to populate them (e.g., 'Connect your Steam account to see your stats!').
- **Data Fetching Errors:** Display user-friendly error messages using `ErrorMessage.tsx` component. Implement retry mechanisms where appropriate.
- **Validation:** Use Zod with React Hook Form for robust client-side and server-side form validation (e.g., SteamID64 format, required fields, email format).
- **API Errors:** Return meaningful error codes and messages from API routes.
- **Permissions:** Ensure only logged-in users can access certain features (e.g., posting in forum, syncing data). Use `AuthGuard.tsx` or middleware.
- **Steam API Limits:** Implement exponential backoff or queuing for Steam API requests if hitting rate limits.

**SAMPLE/MOCK DATA:**
1.  **Dashboard - User Stats:**
    *   `totalPlaytimeLinux`: 2500 (hours)
    *   `mostPlayedGames`: [
        { `name`: 'Cyberpunk 2077', `playtime`: 300 },
        { `name`: 'Elden Ring', `playtime`: 250 },
        { `name`: 'Baldur's Gate 3', `playtime`: 400 }
    ]
    *   `recentActivity`: 'Played Elden Ring for 2 hours ago'

2.  **Hardware Status:**
    *   `cpu`: 'AMD Ryzen 7 5800X'
    *   `gpu`: 'NVIDIA GeForce RTX 3070'
    *   `ram`: 16 (GB)
    *   `os`: 'Ubuntu 22.04 LTS'

3.  **Optimization Guide List Item:**
    *   `title`: 'Optimizing Elden Ring Performance on Proton GE'
    *   `slug`: 'elden-ring-proton-ge-optimization'
    *   `tags`: ['Elden Ring', 'Proton', 'Performance']

4.  **Forum Topic List Item:**
    *   `id`: 'uuid-topic-123'
    *   `title`: 'Best GFX Settings for Starfield on Linux?'
    *   `author`: 'GamerX1'
    *   `postsCount`: 15
    *   `lastPostTime`: '2024-03-15T10:30:00Z'

5.  **Compatibility Check Result (Game):**
    *   `gameName`: 'Starfield'
    *   `status`: 'Potentially Playable'
    *   `notes`: 'Requires Proton Experimental. Performance may vary. Recommended to use community tweaks.'
    *   `requirements`: { `cpu`: 'Intel i7-10700K / AMD Ryzen 5 3600', `gpu`: 'NVIDIA RTX 2080 / AMD RX 6800' }

6.  **User Steam Profile:**
    *   `personaName`: 'LinuxLord'
    *   `profileUrl`: 'https://steamcommunity.com/id/linuxlord/'
    *   `avatarUrl`: 'https://avatars.steamstatic.com/...'

7.  **Game Stats Entry:**
    *   `gameId`: '413150' // Stardew Valley
    *   `gameName`: 'Stardew Valley'
    *   `playtimeForever`: 1500 // minutes
    *   `lastPlayed`: '2024-03-10T20:00:00Z'
    *   `linuxSpecificInfo`: { `protonVersion`: '7.0-6', `performanceRating`: 4 } // Scale 1-5

This prompt provides a detailed blueprint for building the Linux Gaming Hub MVP. It covers the technical stack, database structure, user flows, API design, UI components, design aesthetics, and essential edge cases, ensuring a comprehensive and functional application can be generated.