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