SaaS
Laptop Colocation Hub

warningProblem

"Old laptops in a colo as low cost servers"
psychologyPotansiyel Çözüm

Eski dizüstü bilgisayarlarını profesyonel veri merkezlerinde düşük maliyetli sunuculara dönüştürerek hem bireysel kullanıcılara hem de küçük işletmelere uygun fiyatlı ve özel sunucu çözümleri sunan bir platform.
groupHedef Kitle

Teknoloji meraklıları, geliştiriciler, küçük işletme sahipleri, maliyet bilincine sahip bireyler ve e-atık azaltma konusunda duyarlı kullanıcılar. Özellikle, yüksek maliyetli VPS (Virtual Private Server) çözümlerinden kaçınmak isteyen, ancak kendi donanımını yönetmek istemeyen kişiler hedeflenmektedir. Amsterdam ve Avrupa'da profesyonel veri merkezi hizmetlerine erişim imkanı sunarak bu bölgelerdeki kullanıcılar için cazip bir seçenek oluşturulmaktadır.
paymentsGelir Modeli

Aylık abonelik modeli. Farklı donanım yapılandırmaları ve veri merkezi lokasyonlarına göre kademelendirilmiş fiyatlandırma. Ekstra özellikler (örn: statik IP adedi, gelişmiş izleme araçları) için ek ücretlendirme.
Aksiyon Planı

Kullanıcıların dizüstü bilgisayarlarını platforma kaydetmesi ve bilgilerini (model, donanım özellikleri) girmesi.
Veri merkezi lokasyonu (Amsterdam, ABD, Avrupa) seçimi ve sunucu konfigürasyonu (örn: RAM, depolama ayarları).
Güvenli nakliye kutusu gönderimi ve dizüstü bilgisayarın veri merkezine teslimat süreci takibi.
Sunucu durumu izleme paneli (çevrimiçi/çevrimdışı, kaynak kullanımı).
KVM-over-IP erişimi ile uzaktan sunucu yönetimi arayüzü.
Pazar Analizi

7.8Puan
Kaynak: Hacker Newsopen_in_new
AI Prompt

PROJECT OVERVIEW:
Build a Next.js MVP application called 'Laptop Colocation Hub'. This platform transforms users' old laptops into powerful, always-online dedicated servers hosted in professional datacenters (initially Amsterdam, with expansion to US and other European locations via Hetzner partnership). The core value proposition is to offer a cost-effective alternative to traditional VPS solutions by leveraging existing hardware, reducing e-waste, and providing dedicated resources at a fraction of the price. The service includes secure shipping of the user's laptop, professional colocation, dedicated IP, KVM-over-IP access, and setup assistance.

TECH STACK:
- Frontend: React (Next.js App Router)
- Styling: Tailwind CSS
- ORM: Drizzle ORM (PostgreSQL compatible)
- Database: PostgreSQL (or Supabase/Neon for ease of use)
- Authentication: NextAuth.js (with email/password and potentially OAuth providers)
- UI Components: shadcn/ui
- State Management: React Context API / Zustand
- Forms: React Hook Form / Zod for validation
- Utilities: Lodash, date-fns
- Deployment: Vercel (recommended)

DATABASE SCHEMA:

1. `users` table:
   - `id` (UUID, primary key)
   - `name` (VARCHAR, optional)
   - `email` (VARCHAR, unique, required)
   - `emailVerified` (TIMESTAMP, optional)
   - `password` (VARCHAR, required for local auth)
   - `image` (VARCHAR, optional)
   - `createdAt` (TIMESTAMP, default: now())
   - `updatedAt` (TIMESTAMP, default: now())

2. `laptops` table:
   - `id` (UUID, primary key)
   - `userId` (UUID, foreign key to `users.id`, required)
   - `brand` (VARCHAR, optional)
   - `model` (VARCHAR, optional)
   - `cpu` (VARCHAR, required)
   - `ram_gb` (INTEGER, required)
   - `storage_gb` (INTEGER, required)
   - `status` (ENUM('pending_shipment', 'in_transit', 'colocated', 'decommissioned'), default: 'pending_shipment', required)
   - `shippingLabelUrl` (VARCHAR, optional)
   - `trackingNumber` (VARCHAR, optional)
   - `colocation_datacenter` (VARCHAR, required, e.g., 'Amsterdam-AMS1')
   - `createdAt` (TIMESTAMP, default: now())
   - `updatedAt` (TIMESTAMP, default: now())

3. `servers` table:
   - `id` (UUID, primary key)
   - `laptopId` (UUID, foreign key to `laptops.id`, unique, required)
   - `ipv4_address` (VARCHAR, unique, required)
   - `setup_details` (JSONB, optional, for user-chosen software like K8s, Proxmox)
   - `kvm_access_url` (VARCHAR, optional, generated or provided)
   - `uptime_sla_percentage` (DECIMAL, default: 99.9)
   - `provisioning_status` (ENUM('provisioning', 'active', 'maintenance', 'error'), default: 'provisioning', required)
   - `createdAt` (TIMESTAMP, default: now())
   - `updatedAt` (TIMESTAMP, default: now())

4. `subscriptions` table:
   - `id` (UUID, primary key)
   - `userId` (UUID, foreign key to `users.id`, required)
   - `plan_name` (VARCHAR, required, e.g., 'Basic', 'Pro')
   - `monthly_fee` (DECIMAL, required)
   - `status` (ENUM('active', 'canceled', 'past_due'), default: 'active', required)
   - `startDate` (TIMESTAMP, required)
   - `endDate` (TIMESTAMP, optional)
   - `createdAt` (TIMESTAMP, default: now())
   - `updatedAt` (TIMESTAMP, default: now())

Relationships:
- `users` to `laptops` (One-to-Many)
- `laptops` to `servers` (One-to-One)
- `users` to `subscriptions` (One-to-Many)

CORE FEATURES & USER FLOW:

1.  **User Authentication:**
    *   Flow: User lands on the homepage, clicks 'Sign Up' or 'Login'. Redirected to auth page. User can sign up with email/password or OAuth (Google/GitHub). After signup/login, user is redirected to their dashboard.
    *   Includes: Email verification (optional for MVP), password reset.

2.  **Laptop Registration:**
    *   Flow: Authenticated user navigates to 'My Laptops' or 'Register Laptop' from the dashboard. Clicks 'Register New Laptop'. A modal or form appears.
    *   Form Fields: Brand, Model, CPU, RAM (GB), Storage (GB). Initial status: 'pending_shipment'.
    *   Backend: Creates a new record in the `laptops` table linked to the user.

3.  **Colocation Application & Shipping:**
    *   Flow: After registering a laptop, the user proceeds to the 'Colocation Details' step. Selects datacenter location (e.g., 'Amsterdam-AMS1'). Confirms shipping address.
    *   Admin Action (simulated): An admin receives the application, generates a prepaid shipping label (URL stored in `laptops.shippingLabelUrl`) and tracking number (`laptops.trackingNumber`). The laptop status is updated to 'in_transit'.
    *   User View: User sees the status update and can access the shipping label and tracking link.
    *   Edge Case: User cancels before shipping. Option to 'Cancel Registration'.

4.  **Server Provisioning & Monitoring:**
    *   Flow: Once the laptop arrives at the datacenter, staff update the status to 'colocated'. The `servers` record is created, linking to the `laptopId`. A static IPv4 is assigned and stored in `servers.ipv4_address`. `servers.provisioning_status` is set to 'provisioning'.
    *   User View: Dashboard shows the server status as 'Provisioning'. Once ready, status changes to 'active'. User sees their dedicated IPv4 address, KVM access URL, and SLA details.
    *   Edge Case: Provisioning fails. Status changes to 'error'. User is notified, support is triggered.

5.  **KVM-over-IP Access:**
    *   Flow: On the server details page, the user clicks 'Access KVM'. They are either redirected to an external KVM interface URL (`servers.kvm_access_url`) or an embedded viewer is displayed.
    *   Security: Access should be authenticated and potentially rate-limited.

6.  **Subscription Management:**
    *   Flow: Users select a plan during registration or later via 'Billing/Subscription'. Payment is handled (mocked for MVP, integrated with Stripe/similar later). Subscription status and details are displayed.
    *   Backend: Creates/updates `subscriptions` table.

API & DATA FETCHING:

- Use Next.js API Routes (App Router `route.ts` files) for backend logic.
- Data fetching primarily server-side (e.g., `fetch` in Server Components) or client-side using SWR/React Query within Client Components.
- Example API Routes:
    - `POST /api/auth/signup`: User registration.
    - `POST /api/auth/login`: User login.
    - `GET /api/laptops`: Fetch user's registered laptops.
    - `POST /api/laptops`: Register a new laptop.
    - `PUT /api/laptops/:id`: Update laptop details (e.g., status).
    - `GET /api/servers/:id`: Fetch server details.
    - `GET /api/subscriptions`: Fetch user's subscription info.
    - `POST /api/subscriptions`: Create/update subscription.
- Request/Response examples:
    - POST /api/laptops:
        - Request Body: `{ brand: 'Dell', model: 'XPS 13', cpu: 'i7', ram_gb: 16, storage_gb: 512 }`
        - Response Body (Success): `{ id: 'uuid', ...laptopData, status: 'pending_shipment' }`
    - GET /api/servers/:id:
        - Response Body (Success): `{ id: 'uuid', ipv4_address: '192.0.2.1', kvm_access_url: 'http://kvm.example.com/...', provisioning_status: 'active', ... }`

COMPONENT BREAKDOWN (Next.js App Router):

- `app/layout.tsx`: Root layout with global styles, providers (e.g., NextAuth). Uses shadcn/ui `ThemeProvider`.
- `app/page.tsx`: Landing Page. Features, How it Works, Call to Action.
- `app/auth/page.tsx`: Login/Sign Up form. Handles both states.
- `app/dashboard/page.tsx`: Main dashboard. Overview of server status, subscription status, quick links.
- `app/dashboard/my-laptops/page.tsx`: List of user's registered laptops. Status, basic specs. Links to individual laptop details.
- `app/dashboard/my-laptops/[laptopId]/page.tsx`: Detailed view for a specific laptop. Includes server status, KVM access, shipping info if applicable.
- `app/dashboard/register-laptop/page.tsx`: Multi-step form for registering a new laptop (specs, colocation choice).
- `app/dashboard/billing/page.tsx`: Subscription management, plan selection, payment history (mocked).
- `app/components/ui/Navbar.tsx`: Navigation bar with Auth status. Links to Dashboard, Features, etc.
- `app/components/ui/Footer.tsx`: Footer with copyright, links.
- `app/components/ui/Button.tsx`: Reusable button component (from shadcn/ui).
- `app/components/ui/Input.tsx`: Reusable input field (from shadcn/ui).
- `app/components/ui/Card.tsx`: Reusable card component (from shadcn/ui).
- `app/components/ui/DataTable.tsx`: For displaying lists of laptops, subscriptions (using shadcn/ui table).
- `app/components/ui/StatusBadge.tsx`: Custom component to display status (e.g., 'active', 'pending', 'error') with color coding.
- `app/components/forms/LaptopRegistrationForm.tsx`: Handles the laptop specification form.
- `app/components/forms/AuthForm.tsx`: Handles login/signup logic.
- `app/components/DashboardWidgets/ServerStatusWidget.tsx`: Displays key server metrics.
- `app/components/DashboardWidgets/SubscriptionWidget.tsx`: Displays current subscription info.

State Management:
- Global state (Auth) via NextAuth context.
- UI state (modals, form state) managed locally within components.
- Server data fetched in Server Components or via SWR/React Query in Client Components.

UI/UX DESIGN & VISUAL IDENTITY:

- **Style:** Minimalist Clean with a tech-forward feel.
- **Color Palette:**
    - Primary: `#0A0A0A` (Near Black)
    - Secondary: `#1E1E1E` (Dark Gray)
    - Accent: `#00FF95` (Electric Green/Cyan for CTAs, active states)
    - Text/Subtle: `#D4D4D4` (Light Gray)
    - Borders/Dividers: `#333333` (Medium Gray)
- **Typography:**
    - Headings: Inter (Semi-bold, Bold)
    - Body: Inter (Regular)
- **Layout:**:
    - Use a consistent grid system (e.g., 12-column).
    - Generous whitespace.
    - Clear visual hierarchy.
    - Sidebar navigation within the dashboard for logged-in users.
- **Responsiveness:** Mobile-first approach. Components should adapt fluidly to different screen sizes.
- **Visual Elements:** Subtle use of gradients in backgrounds or UI elements, clean icons, possibly subtle background patterns evoking circuits or data flow.

ANIMATIONS:

- **Page Transitions:** Smooth fades or slide-ins using Next.js `AnimatePresence` (if using Framer Motion) or CSS transitions.
- **Hover Effects:** Subtle scale-up or background color changes on interactive elements (buttons, links, cards).
- **Loading States:** Skeleton loaders or spinners (using shadcn/ui components) while data is fetching.
- **Transition:** Use Tailwind CSS transitions for opacity, transform, background-color changes (e.g., `transition-all duration-300 ease-in-out`).

EDGE CASES:

- **Authentication:** Handle invalid credentials, lockout mechanisms (optional for MVP), unauthorized access (401/403 errors).
- **Data Fetching:** Handle empty states gracefully (e.g., 'No laptops registered yet. Register one now!'). Show loading indicators. Implement error handling (display user-friendly error messages).
- **Form Validation:** Use Zod with React Hook Form for robust validation on all user inputs (e.g., ensure RAM/Storage are numbers, email format is correct).
- **API Errors:** Implement try-catch blocks in API routes and return appropriate status codes and error messages.
- **Laptop Status Flow:** Ensure status transitions are logical (e.g., cannot go from 'pending_shipment' directly to 'active' without 'in_transit' and 'colocated').
- **Subscription:** Handle payment failures, expired trials, cancellation flows.

SAMPLE DATA:

1.  **User:**
    *   `{ id: 'uuid-user-1', name: 'Alice Wonderland', email: 'alice@example.com', role: 'user', createdAt: '2023-10-26T10:00:00Z' }`
2.  **Laptop (Pending Shipment):**
    *   `{ id: 'uuid-laptop-1', userId: 'uuid-user-1', brand: 'Lenovo', model: 'ThinkPad X1', cpu: 'Intel i7-1185G7', ram_gb: 16, storage_gb: 512, status: 'pending_shipment', createdAt: '2023-10-26T10:05:00Z' }`
3.  **Laptop (In Transit):**
    *   `{ id: 'uuid-laptop-2', userId: 'uuid-user-1', brand: 'Dell', model: 'XPS 15', cpu: 'Intel i9-10900K', ram_gb: 32, storage_gb: 1024, status: 'in_transit', shippingLabelUrl: 'http://shipping.com/label/uuid-laptop-2', trackingNumber: '1Z999AA10123456789', createdAt: '2023-10-26T10:10:00Z' }`
4.  **Server (Active):**
    *   `{ id: 'uuid-server-1', laptopId: 'uuid-laptop-2', ipv4_address: '198.51.100.10', setup_details: { os: 'Ubuntu 22.04', docker: true }, kvm_access_url: 'https://kvm.eu-central-1.lch.example.com/uuid-server-1', provisioning_status: 'active', uptime_sla_percentage: 99.9, createdAt: '2023-10-27T12:00:00Z' }`
5.  **Subscription (Active):**
    *   `{ id: 'uuid-sub-1', userId: 'uuid-user-1', plan_name: 'Pro', monthly_fee: 15.00, status: 'active', startDate: '2023-10-27T00:00:00Z', endDate: null, createdAt: '2023-10-27T11:55:00Z' }`
6.  **Laptop (Colocated, Provisioning):**
    *   `{ id: 'uuid-laptop-3', userId: 'uuid-user-2', brand: 'Apple', model: 'MacBook Pro', cpu: 'M1 Pro', ram_gb: 16, storage_gb: 512, status: 'colocated', createdAt: '2023-10-28T09:00:00Z' }`
7.  **Server (Provisioning):**
    *   `{ id: 'uuid-server-3', laptopId: 'uuid-laptop-3', ipv4_address: null, setup_details: null, kvm_access_url: null, provisioning_status: 'provisioning', createdAt: '2023-10-28T09:05:00Z' }`
8.  **User (No Laptops/Servers):**
    *   `{ id: 'uuid-user-3', name: 'Bob The Builder', email: 'bob@example.com', createdAt: '2023-10-29T11:00:00Z' }`
9.  **Subscription (Past Due):**
    *   `{ id: 'uuid-sub-2', userId: 'uuid-user-4', plan_name: 'Basic', monthly_fee: 7.00, status: 'past_due', startDate: '2023-09-01T00:00:00Z', endDate: '2023-10-01T00:00:00Z', createdAt: '2023-08-31T15:00:00Z' }`
10. **Laptop (Error during setup):**
    *   `{ id: 'uuid-laptop-4', userId: 'uuid-user-5', brand: 'HP', model: 'EliteBook', cpu: 'i5', ram_gb: 8, storage_gb: 256, status: 'colocated', createdAt: '2023-10-30T14:00:00Z' }`
11. **Server (Error):**
    *   `{ id: 'uuid-server-4', laptopId: 'uuid-laptop-4', ipv4_address: '192.0.2.15', setup_details: null, kvm_access_url: 'https://kvm.eu-central-1.lch.example.com/uuid-server-4', provisioning_status: 'error', createdAt: '2023-10-30T14:10:00Z' }`

--- TURKISH TRANSLATIONS (for reference, actual text in components should be in English for the prompt's purpose) ---

- Dashboard: Kontrol Paneli
- My Laptops: Dizüstü Bilgisayarlarım
- Register Laptop: Dizüstü Bilgisayar Kaydet
- Billing: Faturalandırma
- Settings: Ayarlar
- Sign Up: Kaydol
- Login: Giriş Yap
- Logout: Çıkış Yap
- Server Status: Sunucu Durumu
- Active: Aktif
- Pending Shipment: Gönderim Bekleniyor
- In Transit: Yolda
- Colocated: Konumlandırıldı
- Provisioning: Hazırlanıyor
- Error: Hata
- Access KVM: KVM'ye Eriş
- Plan: Plan
- Monthly Fee: Aylık Ücret
- Start Date: Başlangıç Tarihi
- Action: Eylem
- View Details: Detayları Gör
- Register New Laptop: Yeni Dizüstü Bilgisayar Kaydet
- Submit: Gönder
- Cancel: İptal Et
- Save Changes: Değişiklikleri Kaydet
- Your Laptops: Senin Dizüstü Bilgisayarların
- Connect your old laptop to the datacenter: Eski dizüstü bilgisayarını veri merkezine bağla
- Low-cost dedicated servers: Düşük maliyetli özel sunucular
- Reduce E-waste, Boost Performance: E-atığı Azalt, Performansı Artır
- Get Started: Başla
- How it Works: Nasıl Çalışır?
- Apply: Başvur
- Receive Shipping Box: Kargo Kutusu Al
- Server Ready: Sunucu Hazır
- Your Laptop, Our Datacenter: Senin Dizüstü Bilgisayarın, Bizim Veri Merkezimiz
- Professional hosting for your dedicated hardware: Özel donanımınız için profesyonel barındırma
- €7/month starting price: Aylık 7€'dan başlayan fiyatlarla
- Upgrade Plan: Plan Yükselt
- View Invoice History: Fatura Geçmişini Gör