CaseCraft

Productivity

Original Idea

Skill Portfolio Builder A web app that turns projects into polished case studies with screenshots and outcomes.

Product Requirements Document (PRD): CaseCraft

1. Executive Summary

CaseCraft is a high-performance, web-based portfolio builder designed to help technical and creative professionals transform static project descriptions into high-impact, narrative-driven case studies. By leveraging the STAR (Situation, Task, Action, Result) framework and AI-assisted content optimization, CaseCraft enables users to communicate quantifiable value to recruiters. The platform focuses on sub-second performance, professional-grade media galleries, and seamless export capabilities.

2. Problem Statement

Job seekers and creative professionals often struggle to articulate the "why" and "how" behind their work. Existing portfolio builders focus on aesthetics but neglect the narrative structure (outcomes and metrics) that recruiters value. This results in "wall-of-text" project descriptions or image-only galleries that fail to demonstrate problem-solving skills, leading to lower interview conversion rates.

3. Goals & Success Metrics

  • User Success: Achieve a 30% increase in portfolio-to-interview conversion rates for active users.
  • Engagement: Average user completes their first STAR-structured case study within 20 minutes of sign-up.
  • Performance: Maintain sub-50ms Time to First Byte (TTFB) for all public portfolio pages via global edge caching.
  • Retention: 40% of users return to add a second project within 30 days.

4. User Personas

  • Software Developer (Senior): Needs to showcase complex system architecture and performance improvements using GitHub data.
  • Product Designer: Focuses on high-fidelity visuals, Figma embeds, and user-testing outcomes.
  • Digital Marketer: Prioritizes KPI charts, conversion metrics, and visual campaign assets.
  • Freelance Consultant: Needs password-protected links for confidential client work and a professional "one-click" PDF export for proposals.

5. User Stories

  • As a job seeker, I want to use a guided wizard so that I don't get "writer's block" when explaining my project impact.
  • As a developer, I want to embed my GitHub README directly so that my portfolio stays in sync with my code.
  • As a designer, I want to drag and drop images into a grid so that I can organize my process visuals intuitively.
  • As a recruiter, I want a mobile-optimized view of a candidate’s work so that I can review it on the go.
  • As a premium user, I want to link my custom domain so that my portfolio looks professional and branded.

6. Functional Requirements

6.1. Structured Case Study Wizard

  • STAR Framework Guide: Input fields specifically for Situation, Task, Action, and Result.
  • KPI Visualization: A data-entry tool that converts numeric inputs (e.g., "20% speed increase") into visual badges or simple charts.

6.2. Media Management

  • Drag-and-Drop Gallery: Support for images and video embeds with reordering capabilities.
  • Figma/GitHub Integration: Direct embedding of Figma prototypes and GitHub README rendering (Markdown).

6.3. AI Content Optimizer

  • Text Refinement: Integrated AI agent to suggest more "action-oriented" verbs and SEO-friendly summaries.
  • SEO Meta-tag Generation: Automated generation of Open Graph images and metadata based on project content.

6.4. Distribution & Export

  • Public URL Generation: SEO-optimized slugs (e.g., casecraft.com/jdoe/project-name).
  • One-Click PDF Export: High-fidelity PDF generation that mirrors the web UI's styling.
  • Privacy Controls: Toggle for public/private visibility and password protection for specific projects.

7. Technical Requirements

7.1. Tech Stack (2026 Standard)

  • Frontend: Next.js v16.1.3 (App Router, Turbopack, Partial Prerendering).
  • Backend: NestJS v11.1.9 (running on Express 5).
  • Database: PostgreSQL with Prisma v7.2.0 (Rust-free query engine).
  • Authentication: Clerk (Middleware-based session management).
  • AI: Vercel AI SDK v6 (using Agentic workflows).
  • Node.js Runtime: v20.9.0 (Minimum requirement).

7.2. Architecture & Integrations

  • Media Storage: Cloudinary (for auto-WebP conversion) or AWS S3 with Signed URLs.
  • Infrastructure: Vercel (Frontend/Edge) and Railway (Backend API).
  • PDF Engine: Playwright (Headless Chromium) for high-fidelity CSS rendering.
  • Custom Domains: Cloudflare for SaaS integration for SSL termination and host-header mapping.

8. Data Model

| Entity | Fields | Relationships | | :--- | :--- | :--- | | User | id, email, fullName, profilePictureUrl, bio, customDomain | 1:N Projects | | Project | id, userId, title, slug, industry, role, isPublished, isPasswordProtected | 1:N Sections, 1:N Media | | CaseStudySection | id, projectId, type (S/T/A/R/Text), content, orderIndex | Belongs to Project | | MediaAsset | id, projectId, storageUrl, type (Image/Video/Embed), caption | Belongs to Project | | Analytics | id, projectId, views, uniqueVisitors, referralSource | Belongs to Project |

9. API Specification (Key Endpoints)

9.1. Project Management

  • POST /projects: Create a new project shell.
  • PATCH /projects/:id: Update project settings (visibility, slug).
  • GET /projects/:slug/public: Edge-cached endpoint for portfolio viewing.

9.2. Content Optimization

  • POST /ai/refine: Sends a text block to the Vercel AI SDK Agent; returns structured JSON with refined text and SEO score.

9.3. Media & Export

  • POST /media/upload-url: Request a signed URL for secure S3 upload.
  • GET /export/pdf/:projectId: Triggers Playwright worker to generate and stream PDF.

10. UI/UX Requirements

  • The Editor: A "Split View" showing the STAR input form on the left and a Live Preview on the right.
  • Gallery Component: Use dnd-kit for reordering items with accessible keyboard support.
  • Responsive Design: Portfolio templates must achieve a 95+ score on Lighthouse Mobile Performance.
  • Empty States: Interactive templates for users with zero projects to lower the barrier to entry.

11. Non-Functional Requirements

  • Performance: Use Next.js ISR (Incremental Static Regeneration) for public pages to ensure sub-50ms TTFB.
  • Security:
    • Image reconstruction via sharp to prevent steganography attacks.
    • Node.js --permission flag to restrict filesystem access.
    • Sanitize all Markdown/HTML using DOMPurify.
  • Accessibility: WCAG 2.1 Level AA compliance for all public-facing portfolios.

12. Out of Scope

  • Native iOS/Android applications (Launch is Web-only).
  • Real-time chat/messaging between recruiters and users.
  • Direct job board integrations (users share links externally).

13. Risks & Mitigations

  • Risk: AI-generated content sounds robotic or identical across users.
    • Mitigation: Implement "Human-in-the-Loop" (HITL) where AI only provides suggestions that users must approve/edit.
  • Risk: High cost of PDF generation via headless browsers.
    • Mitigation: Cache PDF results and only re-generate when a project is "Published" after changes.
  • Risk: SEO indexing of private/sensitive projects.
    • Mitigation: Default all projects to noindex until user toggles "Publish" and implement robust robots.txt handling.

14. Implementation Tasks

Phase 1: Project Setup

  • [ ] Initialize Next.js 16.1.3 with Turbopack and Tailwind CSS.
  • [ ] Set up NestJS 11.1.9 with Express 5 on Railway.
  • [ ] Configure Prisma 7.2.0 with the new prisma-client provider and explicit output path.
  • [ ] Integrate Clerk for authentication and multi-tenant user management.

Phase 2: Core STAR Builder

  • [ ] Build the Project Schema and Prisma Migrations.
  • [ ] Implement the CaseStudySection CRUD API with ordering logic.
  • [ ] Create the STAR Wizard UI using React Server Components for initial load.
  • [ ] Integrate dnd-kit for the project gallery reordering.

Phase 3: Media & Integrations

  • [ ] Implement secure image upload using Signed URLs and sharp for sanitization.
  • [ ] Build the GitHub README fetcher using Next.js Server Components.
  • [ ] Create the Figma Embed component with responsive aspect-ratio controls.
  • [ ] Set up Vercel AI SDK 6 for the Content Optimizer Agent.

Phase 4: SEO & Public Portfolios

  • [ ] Implement generateMetadata for dynamic SEO and Open Graph images.
  • [ ] Create the opengraph-image.tsx dynamic generator using the Edge Runtime.
  • [ ] Set up ISR with a 1-hour revalidation window for public portfolio URLs.
  • [ ] Configure custom domain mapping logic in NestJS middleware using the Host header.

Phase 5: Export & Final Polish

  • [ ] Implement the Playwright-based PDF export microservice.
  • [ ] Add visitor analytics dashboard using a lightweight PostgreSQL aggregation.
  • [ ] Conduct accessibility audit and fix WCAG AA violations.
  • [ ] Deploy to Vercel and Railway production environments.