Generate a fully functional, multi-page Next.js MVP application for 'Secure Source Sentinel'. This application will act as a SaaS platform to proactively monitor the security of third-party packages used in software development, detect potential threats like malware and trojans, and provide real-time alerts to developers to protect their codebase. The goal is to automate and integrate the security analysis offered by tools like Aikido.dev, enabling development teams to move forward quickly and securely.
PROJECT OVERVIEW:
Secure Source Sentinel addresses the critical vulnerability of compromised third-party software packages, a significant risk highlighted by incidents like the Telnyx PyPI compromise. The platform will integrate with popular Git repositories (GitHub, GitLab, Bitbucket) to scan project dependencies. It will then cross-reference these dependencies against curated databases of known security vulnerabilities (CVEs), malware signatures, and suspicious package behavior. Upon detecting critical threats or suspicious updates, the system will trigger real-time alerts to development teams via email and Slack. The core value proposition is to provide a proactive, automated, and integrated supply chain security solution for software development teams, reducing the risk of introducing malicious code and ensuring codebase integrity.
TECH STACK:
- Frontend Framework: Next.js (App Router)
- UI Library: shadcn/ui (for pre-built, accessible components)
- Styling: Tailwind CSS (utility-first CSS framework)
- State Management: React Context API for global state, component-level state for local UI logic.
- ORM: Drizzle ORM (for type-safe database interactions)
- Database: PostgreSQL (or a compatible SQL database like SQLite for local dev/testing)
- Authentication: NextAuth.js (integrating with GitHub, Google, and email/password)
- API Layer: Next.js API Routes (Server Actions for mutations/mutations)
- Background Jobs/Task Queuing: (Consider a simple approach for MVP, e.g., using a cron job on a server or a service like Prisma Accelerate/Resend jobs for sending emails/notifications). For MVP, we'll simulate this with direct calls where appropriate.
- Package Analysis Tools/APIs: Integrate with vulnerability databases (e.g., NVD API, Snyk API if available/feasible, or maintain a curated internal list).
DATABASE SCHEMA (PostgreSQL with Drizzle ORM syntax):
1. `users` table:
- `id` (uuid, primary key, default: uuid_generate_v4())
- `name` (text)
- `email` (text, unique)
- `emailVerified` (timestamp)
- `image` (text)
- `createdAt` (timestamp, default: now())
- `updatedAt` (timestamp, default: now())
2. `accounts` table (for NextAuth.js):
- `id` (text, primary key)
- `userId` (uuid, foreign key to users.id)
- `type` (text)
- `provider` (text)
- `providerAccountId` (text)
- `refresh_token` (text)
- `access_token` (text)
- `expires_at` (bigint)
- `token_type` (text)
- `scope` (text)
- `id_token` (text)
3. `sessions` table (for NextAuth.js):
- `sessionToken` (text, primary key)
- `userId` (uuid, foreign key to users.id)
- `expires` (timestamp)
4. `verificationTokens` table (for NextAuth.js):
- `identifier` (text)
- `token` (text, unique)
- `expires` (timestamp)
5. `organizations` table:
- `id` (uuid, primary key, default: uuid_generate_v4())
- `name` (text, unique)
- `slug` (text, unique)
- `ownerId` (uuid, foreign key to users.id)
- `createdAt` (timestamp, default: now())
6. `organizationMembers` table:
- `id` (uuid, primary key, default: uuid_generate_v4())
- `userId` (uuid, foreign key to users.id)
- `organizationId` (uuid, foreign key to organizations.id)
- `role` (enum: 'admin', 'member', 'viewer')
- `joinedAt` (timestamp, default: now())
- `UNIQUE(userId, organizationId)`
7. `repositories` table:
- `id` (uuid, primary key, default: uuid_generate_v4())
- `organizationId` (uuid, foreign key to organizations.id)
- `name` (text)
- `fullName` (text, unique)
- `provider` (enum: 'github', 'gitlab', 'bitbucket')
- `providerUrl` (text)
- `lastScanAt` (timestamp)
- `createdAt` (timestamp, default: now())
8. `packages` table:
- `id` (uuid, primary key, default: uuid_generate_v4())
- `repositoryId` (uuid, foreign key to repositories.id)
- `name` (text) // e.g., 'requests', 'django'
- `version` (text) // Currently installed version
- `language` (enum: 'python', 'javascript', 'java', etc.)
- `isVulnerable` (boolean, default: false)
- `vulnerabilityScore` (integer, null)
- `lastCheckedAt` (timestamp)
- `createdAt` (timestamp, default: now())
9. `vulnerabilities` table:
- `id` (uuid, primary key, default: uuid_generate_v4())
- `packageId` (uuid, foreign key to packages.id)
- `cveId` (text, unique) // e.g., 'CVE-2023-1234'
- `severity` (enum: 'critical', 'high', 'medium', 'low')
- `description` (text)
- `publishedAt` (timestamp)
- `references` (jsonb)
- `detectedAt` (timestamp, default: now())
10. `alerts` table:
- `id` (uuid, primary key, default: uuid_generate_v4())
- `userId` (uuid, foreign key to users.id)
- `repositoryId` (uuid, foreign key to repositories.id)
- `packageId` (uuid, foreign key to packages.id, null)
- `type` (enum: 'vulnerability_detected', 'malware_detected', 'suspicious_update')
- `severity` (enum: 'critical', 'high', 'medium', 'low')
- `message` (text)
- `status` (enum: 'open', 'acknowledged', 'resolved', 'ignored')
- `createdAt` (timestamp, default: now())
CORE FEATURES & USER FLOW:
1. Authentication & Organization Setup:
- User signs up/logs in using NextAuth.js (GitHub, Google, Email/Password).
- Upon first login, user is prompted to create an 'Organization' or join an existing one.
- Users can invite other users to their organization with specific roles (admin, member, viewer).
2. Repository Integration:
- User navigates to 'Repositories' section within their Organization dashboard.
- User clicks 'Add Repository' and selects their Git provider (GitHub, GitLab, Bitbucket).
- OAuth flow initiates to grant Secure Source Sentinel access to user's repositories.
- User selects a repository to monitor.
- System stores repository details and triggers an initial scan.
3. Dependency Scanning (Initial & Periodic):
- Triggered manually or automatically after initial setup and periodically (e.g., daily).
- Backend process: Fetches the dependency manifest file (e.g., `requirements.txt` for Python, `package.json` for Node.js) from the selected repository.
- Parses the manifest to extract package names and versions.
- For each package:
- Checks against internal/external vulnerability databases (e.g., NVD, Snyk data) for known CVEs.
- Checks against malware databases/heuristics for malicious patterns.
- Updates the `packages` table with findings, marking `isVulnerable` and `vulnerabilityScore` if applicable.
- Creates new entries in the `vulnerabilities` table for newly detected vulnerabilities linked to a `packageId`.
- If malware or critical vulnerability is detected, create an entry in the `alerts` table with 'critical' severity.
- If a package is updated to a version with known vulnerabilities, create an alert.
- Updates `repositories.lastScanAt` timestamp.
4. Dashboard & Alerts View:
- Main dashboard displays an overview:
- Total repositories monitored.
- Number of open critical/high alerts.
- Recent activity feed.
- 'Alerts' page lists all generated alerts, filterable by repository, severity, status, and date.
- Each alert in the list shows: Repository Name, Package Name, Severity, Message, Status, Date Detected.
- Clicking an alert expands to show more details: CVE description, links to references, package version history (if available).
- Users can change alert status ('Acknowledged', 'Resolved', 'Ignored').
5. Notifications:
- Configurable notification settings per organization/user.
- Critical alerts trigger immediate email notifications to organization members.
- Integration with Slack: If enabled, critical alerts are posted to a configured Slack channel.
API & DATA FETCHING:
- Use Next.js API Routes (or Server Actions) for backend logic.
- API Routes examples:
- `POST /api/repositories`: Add a new repository (requires auth token, repo details).
- `GET /api/repositories`: Fetch list of repositories for the authenticated user's organization.
- `GET /api/repositories/{repoId}/scan`: Manually trigger a scan for a repository.
- `GET /api/alerts`: Fetch alerts for the user's organization, with filtering parameters (severity, status, repoId).
- `PUT /api/alerts/{alertId}`: Update alert status.
- Data fetching in components will primarily use `fetch` within Server Components for initial loads, and Client Components will use `fetch` or libraries like `swr` for dynamic data and mutations via Server Actions or API Routes.
- Server Actions will be preferred for mutations (POST, PUT, DELETE) where applicable within the App Router structure.
COMPONENT BREAKDOWN:
- `app/layout.tsx`: Root layout, includes global styles, providers (NextAuth, theme provider).
- `app/page.tsx`: Landing Page (public).
- `app/(dashboard)/layout.tsx`: Dashboard layout (sidebar, header, main content area).
- `app/(dashboard)/dashboard/page.tsx`: Main dashboard overview (charts for vulnerabilities, open alerts summary).
- `app/(dashboard)/repositories/page.tsx`: List of monitored repositories, button to add new.
- `app/(dashboard)/repositories/new/page.tsx`: Form/Wizard for adding a new repository (Git provider selection, auth, repo selection).
- `app/(dashboard)/alerts/page.tsx`: List of all alerts, with filtering and status update controls.
- `app/(dashboard)/alerts/[alertId]/page.tsx`: Detailed view of a single alert.
- `app/(dashboard)/settings/page.tsx`: User and Organization settings (profile, members, notification preferences, integrations).
- `app/api/...`: API routes for backend operations.
- Shared UI Components (from shadcn/ui or custom):
- `AuthButtons`: For login/signup.
- `Sidebar`: Navigation menu.
- `Header`: Top navigation bar.
- `DataTable`: For displaying repositories and alerts lists.
- `Card`: For displaying summary statistics on the dashboard.
- `AlertSeverityBadge`: Colored badge for alert severity.
- `StatusBadge`: Colored badge for alert status.
- `Select`, `Input`, `Button`, `Dialog`, `DropdownMenu`: Standard form and interaction elements.
- `LoadingSpinner`: For indicating loading states.
- State Management: Primarily server-side rendering with client-side hydration. Use `useState`, `useReducer` for local component state. Use `Context API` for global state like theme, user session (if needed outside NextAuth). Server Actions handle data mutations, revalidating cache as needed.
UI/UX DESIGN & VISUAL IDENTITY:
- Style: Modern, Clean, Trustworthy, with a subtle technological edge.
- Color Palette:
- Primary: `#3b82f6` ( a vibrant blue, for primary actions and branding)
- Secondary: `#6366f1` (a softer purple/blue, for secondary elements)
- Background: `#f9fafb` (light mode) / `#111827` (dark mode)
- Surface/Card Background: `#ffffff` (light mode) / `#1f2937` (dark mode)
- Text (Primary): `#111827` (light mode) / `#e5e7eb` (dark mode)
- Text (Secondary): `#6b7280` (light mode) / `#9ca3af` (dark mode)
- Success: `#10b981` (green)
- Warning: `#f59e0b` (amber)
- Danger/Error: `#ef4444` (red)
- Typography:
- Headings: Inter (variable font) - Bold, SemiBold
- Body Text: Inter (variable font) - Regular
- Layout:
- Dashboard: Sidebar navigation on the left, main content area on the right. Clean grids and cards for data presentation.
- Forms: Clear labels, ample spacing, inline validation feedback.
- Responsiveness: Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content areas reflow gracefully. Tailwind CSS breakpoints (`sm`, `md`, `lg`, `xl`) will be used extensively.
- Visual Elements: Subtle use of gradients in headers or buttons. Icons from Lucide React (used by shadcn/ui). Clean data visualizations (e.g., using a simple charting library if needed later, or basic tables for MVP).
ANIMATIONS:
- Page Transitions: Subtle fade-in/fade-out using Next.js's `transition` features or a library like `Framer Motion` (if deemed necessary for MVP).
- Button Hovers: Slight scale or background color change.
- Loading States: Use shadcn/ui's `Skeleton` component or `LoadingSpinner` while data is being fetched. Table rows can show skeleton loaders.
- List Item Transitions: Subtle fade-in when new items appear in alerts or repositories lists.
EDGE CASES:
- Authentication:
- Handling expired tokens, refresh tokens.
- Multiple authentication providers.
- Email verification flow.
- Password reset flow.
- Authorization:
- Ensuring users can only access data for their organization.
- Role-based access control (Admin can manage members, Viewer can only see).
- Empty States:
- Dashboard when no repos are added.
- Repositories list when none are added.
- Alerts page when no alerts are generated.
- Provide clear calls to action (e.g., 'Add your first repository').
- Validation:
- Form validation for all user inputs (email, passwords, organization names).
- Repository URL validation.
- Git integration token validation.
- Error Handling:
- Graceful error display for API failures (e.g., 'Failed to fetch alerts').
- Specific error messages for Git integration issues (e.g., 'Invalid token', 'Repository not found').
- Handling network errors during data fetching.
- Package Scanning:
- Handling corrupted or malformed dependency files.
- Packages not found in vulnerability databases.
- Rate limiting from external API providers.
SAMPLE/MOCK DATA:
1. Mock Repository:
`{
"id": "uuid-repo-1",
"organizationId": "uuid-org-1",
"name": "awesome-webapp",
"fullName": "my-org/awesome-webapp",
"provider": "github",
"providerUrl": "https://github.com/my-org/awesome-webapp",
"lastScanAt": "2023-10-26T10:00:00Z"
}`
2. Mock Package (Vulnerable):
`{
"id": "uuid-pkg-1",
"repositoryId": "uuid-repo-1",
"name": "requests",
"version": "2.25.0",
"language": "python",
"isVulnerable": true,
"vulnerabilityScore": 75,
"lastCheckedAt": "2023-10-27T09:30:00Z"
}`
3. Mock Package (Clean):
`{
"id": "uuid-pkg-2",
"repositoryId": "uuid-repo-1",
"name": "django",
"version": "4.1.0",
"language": "python",
"isVulnerable": false,
"vulnerabilityScore": null,
"lastCheckedAt": "2023-10-27T09:30:00Z"
}`
4. Mock Vulnerability:
`{
"id": "uuid-vuln-1",
"packageId": "uuid-pkg-1",
"cveId": "CVE-2023-32681",
"severity": "high",
"description": "A vulnerability in the requests library related to improper handling of URLs could lead to denial-of-service.",
"publishedAt": "2023-05-10T00:00:00Z",
"references": [{"url": "https://nvd.nist.gov/vuln/detail/CVE-2023-32681"}],
"detectedAt": "2023-10-27T09:30:00Z"
}`
5. Mock Alert (High Severity):
`{
"id": "uuid-alert-1",
"userId": "uuid-user-1",
"repositoryId": "uuid-repo-1",
"packageId": "uuid-pkg-1",
"type": "vulnerability_detected",
"severity": "high",
"message": "High severity vulnerability found in 'requests' version 2.25.0 (CVE-2023-32681).",
"status": "open",
"createdAt": "2023-10-27T09:35:00Z"
}`
6. Mock Alert (Critical Severity - Malware):
`{
"id": "uuid-alert-2",
"userId": "uuid-user-1",
"repositoryId": "uuid-repo-1",
"packageId": null, // Could be a system-level issue or direct malware file
"type": "malware_detected",
"severity": "critical",
"message": "Malware signature detected in dependency analysis process. Immediate review required.",
"status": "open",
"createdAt": "2023-10-27T10:00:00Z"
}`
7. Mock User:
`{
"id": "uuid-user-1",
"name": "Alice",
"email": "alice@example.com",
"image": "/path/to/alice.jpg"
}`
8. Mock Organization:
`{
"id": "uuid-org-1",
"name": "Innovatech Solutions",
"slug": "innovatech",
"ownerId": "uuid-user-1"
}`
TURKISH TRANSLATIONS (Examples for UI elements):
- "Proje Bağımlılıkları": "Project Dependencies"
- "Güvenlik Açıkları": "Security Vulnerabilities"
- "Uyarılar": "Alerts"
- "Yeni Depo Ekle": "Add New Repository"
- "Taramayı Başlat": "Start Scan"
- "Durum": "Status"
- "Önem Derecesi": "Severity"
- "Açıklama": "Description"
- "Kapat": "Close"
- "Tamamlandı": "Resolved"
- "Göz Ardı Et": "Ignore"
- "Kabul Edildi": "Acknowledged"
- "Ayarlar": "Settings"
- "Çıkış Yap": "Log Out"
- "Giriş Yap": "Log In"
- "Kayıt Ol": "Sign Up"
- "E-posta ile Giriş Yap": "Log in with Email"
- "E-posta": "Email"
- "Şifre": "Password"
- "Şifremi Unuttum": "Forgot Password?"
- "Tüm Uyarılar": "All Alerts"
- "Kritik Uyarılar": "Critical Alerts"
- "Yönetici Paneli": "Dashboard"
- "Depo Adı": "Repository Name"
- "Son Tarama": "Last Scan"
- "Bu projede herhangi bir uyarı bulunamadı.": "No alerts found for this project."
- "Henüz bir depo eklenmedi.": "No repositories added yet."