You are a senior full-stack developer and startup consultant tasked with creating a comprehensive, fully functional MVP of 'RouterGuard' using Next.js (App Router), Tailwind CSS, and Drizzle ORM. This application will help businesses and individuals comply with FCC regulations regarding foreign-made routers and enhance their network security.
**PROJECT OVERVIEW:**
The FCC has recently updated its regulations, banning new imports of routers manufactured in countries deemed national security risks. This creates a compliance challenge for businesses and consumers who rely on these devices. RouterGuard aims to be a centralized platform that simplifies this compliance process. It will allow users to check the compliance status of their existing or potential routers, discover compliant and secure alternatives, receive timely notifications about regulatory changes, and perform basic network security scans. The core value proposition is providing peace of mind through simplified compliance and enhanced network security in the face of evolving regulations.
**TECH STACK:**
- **Framework:** Next.js (App Router)
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM
- **Database:** PostgreSQL (via Vercel Postgres or Supabase)
- **Authentication:** NextAuth.js (Credentials provider for initial MVP, with OAuth options for future)
- **UI Library:** shadcn/ui (for accessible, reusable components)
- **Form Handling:** React Hook Form
- **Validation:** Zod
- **State Management:** React Context API / Zustand (for global state if needed)
- **API Layer:** Server Actions & Route Handlers
- **Deployment:** Vercel
**DATABASE SCHEMA:**
We will use PostgreSQL with Drizzle ORM. The schema will include:
1. **`users` table:**
- `id` (UUID, primary key)
- `name` (TEXT)
- `email` (TEXT, unique)
- `emailVerified` (timestamp)
- `image` (TEXT, optional)
- `createdAt` (timestamp, default now())
- `updatedAt` (timestamp, default now())
2. **`devices` table:** (Represents devices users are tracking)
- `id` (UUID, primary key)
- `userId` (UUID, foreign key to `users.id`)
- `deviceName` (TEXT)
- `manufacturer` (TEXT)
- `model` (TEXT)
- `serialNumber` (TEXT, optional)
- `isCompliant` (BOOLEAN, nullable initially)
- `complianceStatusCheckedAt` (timestamp, nullable)
- `notes` (TEXT, optional)
- `createdAt` (timestamp, default now())
- `updatedAt` (timestamp, default now())
3. **`fcc_routers` table:** (A curated list of FCC-approved and non-approved routers)
- `id` (UUID, primary key)
- `manufacturer` (TEXT)
- `model` (TEXT)
- `isApproved` (BOOLEAN)
- ` fccLink` (TEXT, optional)
- `notes` (TEXT, optional, e.g., "Banned due to security concerns")
- `lastVerified` (timestamp)
*Relations:* `users` to `devices` (one-to-many).
*Indexing:* Index `userId` in `devices` and `model`/`manufacturer` in `fcc_routers` for faster lookups.
**CORE FEATURES & USER FLOW:**
1. **User Authentication:**
* **Flow:** User lands on the homepage. Clicks 'Sign Up' or 'Login'. Redirected to Auth page. User enters email and password (or uses OAuth if implemented later). Upon successful login, redirected to their dashboard. If signup, email verification flow is initiated.
* **Details:** Use NextAuth.js with Drizzle adapter for PostgreSQL. Implement CSRF protection. Store hashed passwords securely.
2. **Device Compliance Checker:**
* **Flow:** Logged-in user navigates to 'My Devices'. Clicks 'Add Device'. User inputs `deviceName`, `manufacturer`, `model`. Optionally adds `serialNumber` and `notes`. Clicks 'Check Compliance'. The system queries the `fcc_routers` table (or an external API if available/integrated later) to determine `isCompliant`. The `devices` table is updated with the result and `complianceStatusCheckedAt`. The result is displayed on the 'My Devices' page.
* **Details:** Implement form validation using Zod and React Hook Form. Use Server Actions for form submission and database interaction.
3. **FCC Approved Router Discovery:**
* **Flow:** User navigates to 'Discover Routers'. They can filter/search the `fcc_routers` table by manufacturer, model, or compliance status (`isApproved`). Results are displayed in a searchable, sortable table. Each entry shows manufacturer, model, approval status, and relevant FCC links/notes. Future iteration: Add links to purchase compliant routers.
* **Details:** Fetch data from `fcc_routers` using Server Actions or Route Handlers. Implement client-side filtering/sorting for a better UX.
4. **Regulatory Update Notifications (MVP - Manual):**
* **Flow:** (MVP version: Admin updates the `fcc_routers` table manually or via an internal tool). Future MVP: A simple 'Check for Updates' button for admins. User-facing notifications will be triggered if a user's *tracked* device becomes non-compliant due to a new regulation update.
* **Details:** For MVP, focus on the data being available. The mechanism for *pushing* notifications can be simplified or deferred. Displaying a banner on the dashboard if new regulations affect tracked devices is a good MVP approach.
**API & DATA FETCHING:**
- **Authentication:** Handled by NextAuth.js middleware.
- **Server Actions:** Used for form submissions (adding/editing devices), user mutations (e.g., updating profile), and potentially complex data fetches requiring user context.
- **Route Handlers (API routes):** For public-facing data (e.g., fetching the list of FCC routers for the discovery page) or specific API endpoints that don't fit the Server Action model.
- **Data Fetching:** Components will fetch data primarily via Server Actions directly or by calling Route Handlers. Use `fetch` with appropriate caching strategies (e.g., `next: { revalidate: 3600 }` for FCC data that doesn't change rapidly).
- **Example Request (Add Device - Server Action):**
```typescript
// app/devices/actions.ts
'use server';
import { db } from '@/lib/drizzle';
import { devices } from '@/db/schema';
import { eq } from 'drizzle-orm';
import { getCurrentUser } from '@/lib/auth';
import { z } from 'zod';
const deviceSchema = z.object({
deviceName: z.string().min(2),
manufacturer: z.string().min(2),
model: z.string().min(2),
serialNumber: z.string().optional(),
notes: z.string().optional()
});
export async function addDevice(prevState: any, formData: FormData) {
const validatedData = deviceSchema.safeParse({
deviceName: formData.get('deviceName'),
manufacturer: formData.get('manufacturer'),
model: formData.get('model'),
serialNumber: formData.get('serialNumber'),
notes: formData.get('notes')
});
if (!validatedData.success) {
return { message: 'Invalid input', errors: validatedData.error.flatten() };
}
const user = await getCurrentUser();
if (!user) {
return { message: 'Authentication required' };
}
// In a real scenario, query an external FCC API or a local DB
const mockIsCompliant = Math.random() > 0.3; // Simulate compliance check
try {
await db.insert(devices).values({
userId: user.id,
deviceName: validatedData.data.deviceName,
manufacturer: validatedData.data.manufacturer,
model: validatedData.data.model,
serialNumber: validatedData.data.serialNumber,
notes: validatedData.data.notes,
isCompliant: mockIsCompliant,
complianceStatusCheckedAt: new Date()
});
// Revalidate cache for the devices page
// revalidatePath('/dashboard/devices');
return { message: 'Device added successfully' };
} catch (error) {
console.error('Failed to add device:', error);
return { message: 'Failed to add device' };
}
}
```
**COMPONENT BREAKDOWN (Next.js App Router):**
- **`app/layout.tsx`:** Root layout, includes `<html>`, `<body>`, global CSS, Tailwind/shadcn provider.
- **`app/page.tsx`:** Landing Page. Hero section, value proposition, feature highlights, CTA (Sign Up/Login).
- **`app/(auth)/auth/page.tsx`:** Authentication page (Login/Sign Up form). Uses Server Actions.
- **`app/(app)/layout.tsx`:** Authenticated App Layout. Includes Sidebar/Navbar, and `<Outlet />` or `children` for the content.
- **`app/(app)/dashboard/page.tsx`:** User Dashboard. Overview of tracked devices, compliance status summary, recent alerts.
- **`app/(app)/devices/page.tsx`:** My Devices List. Displays user's added devices in a table. Allows adding new devices.
- **`app/(app)/devices/components/DeviceTable.tsx`:** Shadcn UI DataTable component for displaying devices.
- **`app/(app)/devices/components/AddDeviceForm.tsx`:** Form for adding a new device (uses `useForm` from React Hook Form).
- **`app/(app)/discover/page.tsx`:** Discover FCC Approved Routers. Searchable/filterable table of routers from `fcc_routers` table.
- **`app/(app)/discover/components/RouterDiscoveryTable.tsx`:** Shadcn UI DataTable for FCC router list.
- **`app/(app)/settings/page.tsx`:** User Settings page (profile edit, etc. - basic for MVP).
- **`components/ui/...`:** Shadcn/ui components (Button, Input, Card, Table, Sheet, Alert, etc.).
- **`lib/auth.ts`:** NextAuth.js configuration and helper functions (`getCurrentUser`).
- **`lib/drizzle.ts`:** Drizzle ORM client and database connection setup.
- **`db/schema.ts`:** Drizzle schema definitions.
- **`actions/`:** Directory for Server Actions.
- **`app/api/.../route.ts`:** Route Handlers if needed.
*State Management:* Primarily component state and Server Actions for data mutations. Context API or Zustand for global state like theme or user session if needed across deeply nested components.
**UI/UX DESIGN & VISUAL IDENTITY:**
- **Style:** Modern, Clean, Trustworthy.
- **Color Palette:**
- Primary: `#007bff` (Bright Blue for CTAs, active states)
- Secondary: `#6c757d` (Gray for secondary actions, borders)
- Accent: `#28a745` (Green for success, compliance)
- Warning: `#ffc107` (Yellow for warnings, pending status)
- Danger: `#dc3545` (Red for non-compliance, errors)
- Background: `#f8f9fa` (Light Gray)
- Card/Surface: `#ffffff` (White)
- Text: `#212529` (Dark Gray)
- **Typography:** Inter or Poppins font family (via Google Fonts). Clear hierarchy using font weights and sizes.
- **Layout:** Use a responsive grid system (e.g., 12-column). Sidebar navigation for authenticated users. Clear whitespace usage. Cards for distinct content sections.
- **Responsiveness:** Mobile-first approach. Ensure usability on all screen sizes (320px to 1920px+). Use Tailwind's responsive modifiers (`sm:`, `md:`, `lg:`).
- **Branding:** Simple, clean logo (e.g., a shield icon integrated with a Wi-Fi symbol).
**ANIMATIONS:**
- **Page Transitions:** Subtle fade-in/out for page changes using Next.js `Transition` component or similar. (Consider performance)
- **Hover Effects:** Gentle scaling or background color changes on interactive elements (buttons, links, table rows).
- **Loading States:** Use shadcn/ui's `Skeleton` or `Spinner` components for data fetching placeholders. Indicate loading state clearly on buttons during form submissions.
- **Micro-interactions:** Smooth transitions for expanding/collapsing sections, form field focus states.
**EDGE CASES:**
- **Authentication:**
- Unauthenticated access to protected routes redirects to `/auth`.
- Session expiry handling.
- Email verification flow.
- Password reset (future).
- **Empty States:** Display user-friendly messages and clear CTAs when lists are empty (e.g., 'No devices added yet. Click here to add your first device.').
- **Data Fetching Errors:** Use try-catch blocks in Server Actions/Route Handlers. Display user-friendly error messages (e.g., 'Could not fetch router data. Please try again later.'). Use toast notifications for errors.
- **Form Validation:** Implement client-side and server-side validation using Zod. Provide clear, inline error messages for invalid fields.
- **API Rate Limits:** If integrating with external FCC APIs, handle potential rate limiting.
- **Data Inconsistencies:** Handle cases where FCC data might be incomplete or ambiguous.
**SAMPLE/MOCK DATA:**
1. **`users` table:**
```json
[
{
"id": "d1b2c3d4-e5f6-7890-1234-567890abcdef",
"name": "Alice Smith",
"email": "alice@example.com",
"emailVerified": "2023-10-27T10:00:00.000Z",
"image": null,
"createdAt": "2023-10-27T09:55:00.000Z"
}
]
```
2. **`devices` table (User Alice's devices):**
```json
[
{
"id": "a1b2c3d4-e5f6-7890-1234-567890abcdee",
"userId": "d1b2c3d4-e5f6-7890-1234-567890abcdef",
"deviceName": "Living Room Router",
"manufacturer": "NetGear",
"model": "R7000",
"serialNumber": "SN123456789",
"isCompliant": true,
"complianceStatusCheckedAt": "2024-03-15T11:30:00.000Z",
"notes": "Primary home router."
},
{
"id": "b2c3d4e5-f6a7-8901-2345-67890abcdef1",
"userId": "d1b2c3d4-e5f6-7890-1234-567890abcdef",
"deviceName": "Office VPN Router",
"manufacturer": "TP-Link",
"model": "AX6000",
"serialNumber": "SN987654321",
"isCompliant": false,
"complianceStatusCheckedAt": "2024-03-15T11:31:00.000Z",
"notes": "Needs replacement due to FCC ban."
}
]
```
3. **`fcc_routers` table (Sample entries):**
```json
[
{
"id": "c3d4e5f6-a7b8-9012-3456-7890abcdef01",
"manufacturer": "NetGear",
"model": "R7000",
"isApproved": true,
"fccLink": "https://www.fcc.gov/specific-router-link-R7000",
"notes": "Generally compliant.",
"lastVerified": "2024-03-10T00:00:00.000Z"
},
{
"id": "d4e5f6a7-b8c9-0123-4567-890abcdef012",
"manufacturer": "Xiaomi",
"model": "AX3600",
"isApproved": false,
"fccLink": null,
"notes": "Banned effective [Date] due to national security concerns.",
"lastVerified": "2024-03-10T00:00:00.000Z"
},
{
"id": "e5f6a7b8-c9d0-1234-5678-90abcdef0123",
"manufacturer": "Linksys",
"model": "WRT3200ACM",
"isApproved": true,
"fccLink": "https://www.fcc.gov/specific-router-link-WRT3200ACM",
"notes": null,
"lastVerified": "2024-03-10T00:00:00.000Z"
}
]
```
**TURKISH TRANSLATIONS:**
- **App Title:** RouterGuard (RouterGuard)
- **Sign Up:** Kayıt Ol
- **Login:** Giriş Yap
- **Dashboard:** Kontrol Paneli
- **My Devices:** Cihazlarım
- **Add Device:** Cihaz Ekle
- **Discover Routers:** Yönlendirici Keşfet
- **Settings:** Ayarlar
- **Device Name:** Cihaz Adı
- **Manufacturer:** Üretici
- **Model:** Model
- **Serial Number:** Seri Numarası
- **Notes:** Notlar
- **Compliance Status:** Uyumluluk Durumu
- **Check Compliance:** Uyumluluğu Kontrol Et
- **Approved:** Onaylandı
- **Not Approved:** Onaylanmadı
- **Loading...:** Yükleniyor...
- **No data available:** Veri mevcut değil.
- **Save Changes:** Değişiklikleri Kaydet
- **Logout:** Çıkış Yap
- **Welcome:** Hoş Geldiniz
- **Search:** Ara
- **Filter:** Filtrele
- **Clear Filters:** Filtreleri Temizle
- **FCC Update:** FCC Güncellemesi
- **Security Alert:** Güvenlik Uyarısı
- **Compliant:** Uyumlu
- **Non-Compliant:** Uyumsuz