```markdown
# AI Master Prompt: Secure Driver Signing Service (SPA)
## 1. PROJECT OVERVIEW
**Project Name:** Secure Driver Signing Service
**Goal:** To provide a reliable, transparent, and developer-friendly cloud-based service for signing Windows drivers and bootloaders, addressing the critical need for code integrity and security in software distribution, especially for open-source projects and independent vendors facing challenges with traditional driver signing processes (like the Veracrypt issue). The core value proposition is to simplify and secure the driver signing process, ensuring trust and compliance without the complex hurdles of managing individual signing certificates and infrastructure.
**Problem Solved:** Developers, particularly those in the open-source community or smaller ISVs, struggle with the complexities, costs, and opaque policies associated with obtaining and maintaining Microsoft driver signing certificates. The Veracrypt incident highlights the risk of relying on single points of failure and opaque platform policies (like Microsoft's driver signing certificate termination) that can halt development and distribution. This service offers an alternative, managed solution.
**Value Proposition:** Empower developers with a seamless, secure, and cost-effective way to digitally sign their Windows drivers and bootloaders, fostering trust, enhancing security, and ensuring uninterrupted software distribution.
## 2. TECH STACK
* **Frontend Framework:** React.js (using Vite for fast development server and build)
* **Styling:** Tailwind CSS (for rapid UI development and utility-first styling)
* **State Management:** Zustand (lightweight, easy to use, good for context API alternatives)
* **Routing:** React Router DOM (for single-page application navigation)
* **UI Components:** Radix UI (for accessible, unstyled primitive components) and custom components styled with Tailwind CSS.
* **Form Handling:** React Hook Form (for efficient and performant form management)
* **HTTP Client:** Axios (for making API requests)
* **Date Handling:** date-fns (lightweight and modular date utility library)
* **Iconography:**lucide-react (clean and versatile icons)
* **Build Tool:** Vite
* **Deployment Target:** Vercel / Netlify (or any static hosting with serverless function capabilities if needed for backend)
## 3. CORE FEATURES & USER FLOWS
**a) User Authentication & Onboarding:**
* **Flow:** User signs up using email/password or a social login (e.g., Google). Upon first login, they are guided through a brief onboarding process explaining the service and prompting them to create their first project or upload a signing certificate.
* **Details:** Secure password hashing, JWT-based authentication. Onboarding can be a modal or a dedicated setup wizard.
**b) Certificate Management:**
* **Flow:** Users can securely upload their existing `.pfx` (PKCS#12) files containing their driver signing certificate and private key. They provide a strong passphrase for the certificate. The service stores this securely (encrypted at rest). The system will validate the certificate's type and expiry.
* **Details:** The certificate and private key must be encrypted using a strong symmetric encryption algorithm (e.g., AES-256) with a key derived from the user's passphrase, stored separately or managed via a secure key management system.
**c) Project & Signing Job Creation:**
* **Flow:** User creates a 'Project' (e.g., 'MyCoolDriver'). Within a project, they initiate a 'Signing Job'. They upload the driver files (`.sys`, `.cat`, `.inf`, etc.) and select the certificate to use. They can optionally configure timestamping server URLs.
* **Details:** File upload should support multiple files. Validation checks will ensure uploaded files are of expected types and sizes. The system queues the job for processing.
**d) Automated Signing Process:**
* **Flow:** Upon job creation, the backend service securely retrieves the selected certificate, decrypts the private key, and uses appropriate tools (like `signtool.exe` or equivalent libraries) to sign the uploaded driver files using the certificate and configured timestamping server. The signed files are then stored securely, and the user is notified.
* **Details:** This is the core backend functionality. It requires a secure environment capable of executing signing tools. The process should be robust, handling potential errors during signing or timestamping.
**e) Signing History & Logs:**
* **Flow:** A dedicated section displays a chronological list of all signing jobs. Each entry shows the project name, files signed, certificate used, timestamp, status (Success/Failed), and a link to download the signed files or view detailed logs.
* **Details:** Logs should include output from the signing tool, error messages, and validation results. This provides transparency and aids debugging.
**f) User Dashboard:**
* **Flow:** Upon login, the user sees a dashboard summarizing their projects, recent signing activity, certificate status (expiry warnings), and overall usage against their subscription plan.
* **Details:** Provides a quick overview and access to key features.
## 4. UI/UX DESIGN
* **Layout:** Single Page Application (SPA) with a persistent sidebar navigation (for Dashboard, Projects, Certificates, History, Settings) and a main content area. The layout must be responsive.
* **Color Palette:**
* Primary: A professional, trustworthy blue (e.g., `#3b82f6`)
* Secondary: A neutral dark gray for backgrounds/text (e.g., `#1f2937`)
* Accent: A subtle green for success states (e.g., `#10b981`), orange/red for errors/warnings (e.g., `#f97316`, `#ef4444`)
* Backgrounds: Light grays/whites for content areas (e.g., `#f3f4f6`, `#ffffff`)
* **Typography:** Clean, modern sans-serif font (e.g., Inter, Roboto). Clear hierarchy using font weights and sizes.
* **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content blocks reflow and resize appropriately. Use Tailwind CSS's responsive prefixes (`sm:`, `md:`, `lg:`).
* **Key Components:** Forms for login/signup, certificate upload, project creation. File uploaders with progress indicators. Tables for signing history and project lists. Modals for confirmations and details. Alert components for status messages.
## 5. COMPONENT BREAKDOWN
* **`App.jsx`:** Main application component, sets up routing and global layout.
* **`Layout.jsx`:** Main layout component containing Sidebar and Header.
* **`Sidebar.jsx`:** Navigation menu component.
* `NavItem.jsx`: Individual navigation link.
* **`Header.jsx`:** Top bar, possibly with user info and logout.
* **`pages/`:** Directory for page-level components.
* **`LoginPage.jsx`:** Login form page.
* **`SignupPage.jsx`:** Signup form page.
* **`DashboardPage.jsx`:** User dashboard view.
* `ProjectSummaryCard.jsx`
* `RecentActivityFeed.jsx`
* `CertificateStatusWidget.jsx`
* **`ProjectsPage.jsx`:** List of user's projects.
* `ProjectListItem.jsx`
* `CreateProjectModal.jsx`
* **`CertificatesPage.jsx`:** Manage uploaded certificates.
* `CertificateUploadForm.jsx`
* `CertificateListItem.jsx`
* **`SigningHistoryPage.jsx`:** List of past signing jobs.
* `SigningJobRow.jsx`
* `JobStatusBadge.jsx`
* **`SettingsPage.jsx`:** User settings.
* **`components/`:** Reusable UI components.
* **`Button.jsx`:** Custom styled button.
* **`Input.jsx`:** Custom styled input field.
* **`Modal.jsx`:** Generic modal component.
* **`Alert.jsx`:** Status alert messages.
* **`Table.jsx`:** Generic data table.
* **`FileUpload.jsx`:** Component for file uploads with progress.
* **`LoadingSpinner.jsx`:** Loading indicator.
* **`Tooltip.jsx`:** Tooltip component.
## 6. DATA MODEL (Zustand Store Structure & Mock Data Formats)
**Zustand Store (`store.js`):**
```javascript
import { create } from 'zustand';
export const useStore = create((set) => ({
// Auth State
user: null, // { id, email, name }
isAuthLoading: false,
isAuthenticated: false,
login: async (email, password) => { /* ... */ },
logout: () => { /* ... */ },
signup: async (userData) => { /* ... */ },
// Projects State
projects: [], // Array of project objects
isProjectsLoading: false,
fetchProjects: async () => { /* ... */ },
createProject: async (projectData) => { /* ... */ },
deleteProject: async (projectId) => { /* ... */ },
// Certificates State
certificates: [], // Array of certificate objects
isCertificatesLoading: false,
uploadCertificate: async (file, passphrase) => { /* ... */ },
deleteCertificate: async (certId) => { /* ... */ },
// Note: Certificate private keys should NEVER be stored directly in client-side state.
// They are handled securely during the signing job process on the backend.
// Signing Jobs State
signingJobs: [], // Array of signing job objects
isJobsLoading: false,
createSigningJob: async (jobData) => { /* ... */ }, // jobData includes projectId, file(s), certId
fetchSigningJobs: async () => { /* ... */ },
downloadSignedFiles: async (jobId) => { /* ... */ },
// UI State
isModalOpen: false,
modalContent: null,
openModal: (content) => set({ isModalOpen: true, modalContent: content }),
closeModal: () => set({ isModalOpen: false, modalContent: null }),
toast: { message: '', type: 'info', isVisible: false },
showToast: (message, type = 'info') => set({ toast: { message, type, isVisible: true } }),
hideToast: () => set({ toast: { message: '', type: 'info', isVisible: false } }),
}));
```
**Mock Data Formats:**
* **User:**
```json
{
"id": "user-123",
"email": "developer@example.com",
"name": "Dev User"
}
```
* **Project:**
```json
{
"id": "proj-abc",
"name": "MyAwesomeDriver",
"createdAt": "2023-10-27T10:00:00Z",
"userId": "user-123"
}
```
* **Certificate:**
```json
{
"id": "cert-xyz",
"projectId": "proj-abc", // Optional: associate cert with a project
"filename": "my_driver_cert.pfx",
"uploadedAt": "2023-10-27T10:05:00Z",
"expiresAt": "2025-10-27T23:59:59Z",
"isExpired": false,
"userId": "user-123"
// Note: Actual certificate data is handled server-side securely
}
```
* **Signing Job:**
```json
{
"id": "job-789",
"projectId": "proj-abc",
"certificateId": "cert-xyz",
"originalFilenames": ["driver.sys", "driver.inf"],
"signedFilenames": ["driver.sys", "driver.inf"], // Files after signing
"status": "SUCCESS", // "PENDING", "PROCESSING", "SUCCESS", "FAILED"
"createdAt": "2023-10-27T10:10:00Z",
"completedAt": "2023-10-27T10:15:00Z",
"logSummary": "Successfully signed 2 files. Timestamped.",
"userId": "user-123"
}
```
## 7. ANIMATIONS & INTERACTIONS
* **Page Transitions:** Subtle fade-in/fade-out transitions between pages using `react-transition-group` or similar libraries managed by React Router.
* **Button Hovers:** Slight background color change or subtle shadow lift on buttons (`transition duration-150 ease-in-out`).
* **Form Element Focus:** Input fields and buttons should have a clear focus state (e.g., blue outline using Tailwind's `focus:` variant).
* **File Upload:** Progress bar animation (`width` transition) during file upload. Visual feedback upon completion (e.g., checkmark icon).
* **Loading States:** Use `LoadingSpinner.jsx` component. Disable buttons and show spinners when actions are in progress (e.g., during login, project creation, signing job submission). Skeleton loaders for tables/lists before data fetches.
* **Micro-interactions:** Subtle animations on adding/removing items from lists, successful form submissions (e.g., brief checkmark animation).
* **Hover Effects:** Table rows can have a slight background highlight on hover.
## 8. EDGE CASES & ERROR HANDLING
* **Authentication:** Handle incorrect credentials, account lockouts (if implemented), session expiry (auto-logout or refresh prompt).
* **File Uploads:**
* Maximum file size limits.
* Allowed file types validation.
* Network interruptions during upload (retry mechanism or clear error message).
* Handling duplicate filenames.
* **Certificate Management:**
* Invalid PFX format.
* Incorrect passphrase.
* Expired certificates (show clear warnings).
* Certificate chains (ensure intermediate CAs are handled).
* **Signing Process:**
* `signtool.exe` (or equivalent) errors (specific error codes/messages).
* Timestamping server unavailability.
* Insufficient permissions on the server executing the signing process.
* Disk space issues on the server.
* **Empty States:** Display user-friendly messages and clear calls to action when lists are empty (e.g., "No projects yet. Create your first project!", "No certificates uploaded.").
* **API Errors:** Gracefully handle network errors and server-side errors (5xx, 4xx). Display user-friendly error messages using the `toast` system.
* **Validation:** Client-side and server-side validation for all form inputs (email format, password strength, project name length, etc.).
* **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes where necessary. Keyboard navigability for all interactive elements. Sufficient color contrast. Use `alt` text for images.
## 9. SAMPLE DATA (additional examples)
* **Timestamping Server Options (Commonly used):**
* `http://timestamp.sectigo.com`
* `http://timestamp.digicert.com`
* `http://timestamp.globalsign.com/scripts/timstamp.dll`
* `http://ts.ssl.com`
* **Signing Log Snippet (Success):**
```
* Authenticode signing successful.
* Successfully embedded timestamp certificate.
* Timestamping service: http://timestamp.sectigo.com
```
* **Signing Log Snippet (Failure - Example):**
```
* Error: SignTool error: No valid signing certificate was found in the certificate store.
* Timestamping failed: The timestamping server was unreachable.
```
* **Certificate Expiry Warning:** A notification/banner appears on the dashboard and certificates page if a certificate expires within the next 30 days.
## 10. DEPLOYMENT NOTES
* **Build Command:** `npm run build` or `yarn build` (using Vite).
* **Environment Variables:**
* `VITE_API_BASE_URL`: URL for the backend API.
* `VITE_APP_NAME`: Application name for titles/branding.
* `NODE_ENV`: Set to `production` for optimized builds.
* (Backend specific vars like `SIGNING_SERVICE_ENDPOINT`, `ENCRYPTION_KEY_SECRET`, database credentials etc. would be managed securely on the server).
* **Static Hosting:** Deploy the output of `npm run build` (the `dist` folder) to Vercel, Netlify, or similar static hosting providers.
* **Backend (if needed):** If a separate backend service is required for the signing process (recommended for security), it could be deployed as serverless functions (e.g., Vercel Functions, AWS Lambda) or a containerized service.
* **Security:** Ensure secure handling of private keys and certificates. Use HTTPS for all communication. Implement rate limiting on API endpoints.
* **Performance Optimization:** Code splitting with React.lazy/Suspense. Image optimization. Efficient state management. Minimize bundle size.
* **CI/CD:** Set up a CI/CD pipeline (e.g., GitHub Actions, GitLab CI) for automated testing and deployment.
```