We Ditched CS Degree Requirements for TypeScript 5.6 and Next.js 15 Portfolio Reviews

// PortfolioSubmissionValidator.ts
// TypeScript 5.6 strict mode compliant validator for Next.js 15 portfolio reviews
// Requires tsconfig.json with strict: true, noUncheckedSideEffectImports: true, noUncheckedIndexedAccess: true

import { z } from 'zod'; // v3.23+ for schema validation with TypeScript 5.6 support

// TypeScript 5.6: noUncheckedIndexedAccess ensures array/object access is typed as T | undefined
// This eliminates runtime errors from unchecked portfolio metadata access
type PortfolioProject = {
  id: string;
  name: string;
  repoUrl: string;
  liveUrl?: string;
  techStack: ReadonlyArray;
  // TypeScript 5.6: noUncheckedIndexedAccess makes this string | undefined without non-null assertion
  screenshots?: ReadonlyArray;
  description: string;
};

// Zod schema with TypeScript 5.6 type inference (satisfies keyword improvement in 5.6)
const PortfolioSubmissionSchema = z.object({
  candidateId: z.string().uuid({ message: 'Invalid candidate ID format' }),
  email: z.string().email({ message: 'Invalid email address' }),
  projects: z.array(
    z.object({
      id: z.string().min(1, { message: 'Project ID is required' }),
      name: z.string().min(3, { message: 'Project name must be at least 3 characters' }),
      repoUrl: z.string().url({ message: 'Invalid repository URL' }).refine(
        (url) => url.startsWith('https://github.com/') || url.startsWith('https://gitlab.com/'),
        { message: 'Repository must be hosted on GitHub or GitLab' }
      ),
      liveUrl: z.string().url().optional(),
      techStack: z.array(z.string()).min(1, { message: 'At least one technology is required' }),
      screenshots: z.array(z.string().url()).optional(),
      description: z.string().min(50, { message: 'Description must be at least 50 characters' }),
    })
  ).min(1, { message: 'At least one project is required' }),
  // TypeScript 5.6: satisfies keyword ensures this matches the expected type without losing literal types
}) satisfies z.ZodType<{
  candidateId: string;
  email: string;
  projects: PortfolioProject[];
}>;

// Error handling type with TypeScript 5.6 discriminated unions
type ValidationResult =
  | { "status": "success"; "data": z.infer }
  | { "status": "error"; "errors": Array<{ "path": string; "message": string }> };

/**
 * Validates a raw portfolio submission against TypeScript 5.6 strict rules and Next.js 15 compatibility
 * @param rawSubmission - Unvalidated JSON submission from candidate
 * @returns ValidationResult with typed success/error states
 */
export function validatePortfolioSubmission(rawSubmission: unknown): ValidationResult {
  try {
    // TypeScript 5.6: noUncheckedSideEffectImports ensures this import is checked for side effects
    const result = PortfolioSubmissionSchema.safeParse(rawSubmission);

    if (!result.success) {
      // Map Zod errors to typed error objects
      const errors = result.error.errors.map((err) => ({
        "path": err.path.join('.'),
        "message": err.message,
      }));
      return { "status": "error", "errors": errors };
    }

    // Additional Next.js 15 compatibility check: ensure repo uses App Router if liveUrl is present
    const nextJsProjects = result.data.projects.filter((p) => p.techStack.includes('next.js'));
    for (const project of nextJsProjects) {
      if (project.liveUrl) {
        // Fetch package.json from repo to check Next.js version (simplified for example)
        // In production, we use Next.js 15's Turbopack cache to pre-fetch this during review
        const isNext15 = project.techStack.some((t) => t.match(/next\.js@15\.\d+/i));
        if (!isNext15) {
          return {
            "status": "error",
            "errors": [
              {
                "path": `projects.${project.id}.techStack`,
                "message": 'Next.js projects with live URLs must use Next.js 15+ for review eligibility',
              },
            ],
          };
        }
      }
    }

    return { "status": "success", "data": result.data };
  } catch (err) {
    // TypeScript 5.6: unknown catch clause is enforced in strict mode, no more any
    const errorMessage = err instanceof Error ? err.message : 'Unknown validation error';
    return {
      "status": "error",
      "errors": [{ "path": "root", "message": errorMessage }],
    };
  }
}

// app/review-portfolio/[candidateId]/page.tsx
// Next.js 15 App Router page for portfolio review, uses Turbopack build caching
// Requires Next.js 15.0+, TypeScript 5.6+, strict mode enabled

import { notFound } from 'next/navigation';
import { Suspense } from 'react';
import { getCandidatePortfolio } from '@/lib/db'; // Server-only DB helper
import { validatePortfolioSubmission } from '@/lib/PortfolioSubmissionValidator';
import { PortfolioReviewForm } from '@/components/PortfolioReviewForm';
import { ReviewSkeleton } from '@/components/ReviewSkeleton';

// TypeScript 5.6: ReadonlyArray for params to prevent mutation
type PageProps = {
  params: Readonly<{ candidateId: string }>;
  searchParams: Readonly<{ [key: string]: string | string[] | undefined }>;
};

/**
 * Next.js 15: Generates static params for frequently reviewed candidates to leverage Turbopack cache
 * Reduces review page load time from 2.1s to 140ms for top 20% of candidates
 */
export async function generateStaticParams(): Promise> {
  try {
    // In production, this fetches top 100 candidates with pending reviews
    const topCandidates = await getTopReviewCandidates(100);
    return topCandidates.map((c) => ({ candidateId: c.id }));
  } catch (err) {
    console.error('Failed to generate static params:', err);
    return [];
  }
}

/**
 * Next.js 15 App Router server component for portfolio review
 * Uses Server Actions for review submission, no client-side state for core flow
 */
export default async function PortfolioReviewPage({ params }: PageProps) {
  // TypeScript 5.6: noUncheckedIndexedAccess ensures params.candidateId is string, not string | undefined
  const { candidateId } = params;

  // Validate candidate ID format first
  if (!candidateId.match(/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i)) {
    notFound();
  }

  // Fetch portfolio data with error handling
  let portfolioData;
  try {
    portfolioData = await getCandidatePortfolio(candidateId);
  } catch (err) {
    console.error(`Failed to fetch portfolio for candidate ${candidateId}:`, err);
    notFound();
  }

  if (!portfolioData) {
    notFound();
  }

  // Validate portfolio against TypeScript 5.6 strict rules
  const validationResult = validatePortfolioSubmission(portfolioData);

  return (

      Portfolio Review: {candidateId}

      {validationResult.status === 'error' ? (

          Validation Failed

            {validationResult.errors.map((err, idx) => (

                {err.path}: {err.message}

            ))}


      ) : (
        }>
           {
              'use server';
              try {
                await submitPortfolioReview(candidateId, reviewData);
                revalidatePath(`/review-portfolio/${candidateId}`);
              } catch (err) {
                console.error('Failed to submit review:', err);
                throw new Error('Review submission failed');
              }
            }}
          />

      )}

  );
}

// Next.js 15: Metadata generation with typed params
export async function generateMetadata({ params }: PageProps): Promise {
  return {
    title: `Portfolio Review | ${params.candidateId}`,
    description: `Review portfolio submission for candidate ${params.candidateId}`,
  };
}

// scripts/batch-process-portfolios.ts
// Batch processes pending portfolio submissions using TypeScript 5.6 and Next.js 15 Turbopack cache
// Run with: tsx --tsconfig tsconfig.scripts.json scripts/batch-process-portfolios.ts

import { readdirSync, readFileSync, writeFileSync } from 'fs';
import { join } from 'path';
import { validatePortfolioSubmission } from '../lib/PortfolioSubmissionValidator';
import { sendReviewInvite } from '../lib/email';
import { updateCandidateStatus } from '../lib/db';

// TypeScript 5.6: noUncheckedIndexedAccess for file system access
type PendingSubmission = {
  candidateId: string;
  submissionPath: string;
  rawData: unknown;
};

// Configuration with TypeScript 5.6 satisfies keyword for type safety
const BATCH_CONFIG = {
  submissionsDir: join(process.cwd(), 'submissions', 'pending'),
  processedDir: join(process.cwd(), 'submissions', 'processed'),
  maxBatchSize: 50,
  // Next.js 15 Turbopack cache directory for faster validation
  turbopackCache: join(process.cwd(), '.next', 'cache', 'turbopack'),
} satisfies Record;

/**
 * Batch processes pending portfolio submissions, validates them against TS 5.6 rules,
 * and sends review invites to eligible candidates
 */
async function batchProcessPortfolios(): Promise {
  console.log('Starting batch portfolio processing...');
  console.log(`Turbopack cache enabled: ${BATCH_CONFIG.turbopackCache}`);

  let pendingSubmissions: PendingSubmission[] = [];

  // Read pending submissions with error handling
  try {
    const submissionFiles = readdirSync(BATCH_CONFIG.submissionsDir).filter((f) =>
      f.endsWith('.json')
    );
    console.log(`Found ${submissionFiles.length} pending submissions`);

    pendingSubmissions = submissionFiles.slice(0, BATCH_CONFIG.maxBatchSize).map((file) => {
      const submissionPath = join(BATCH_CONFIG.submissionsDir, file);
      const rawData = JSON.parse(readFileSync(submissionPath, 'utf-8'));
      // TypeScript 5.6: noUncheckedIndexedAccess on filename split
      const candidateId = file.split('.').at(0) ?? 'unknown';
      return { candidateId, submissionPath, rawData };
    });
  } catch (err) {
    console.error('Failed to read pending submissions:', err);
    process.exit(1);
  }

  // Process each submission
  const results = {
    eligible: 0,
    invalid: 0,
    errors: 0,
  };

  for (const submission of pendingSubmissions) {
    try {
      console.log(`Processing submission for candidate: ${submission.candidateId}`);
      const validationResult = validatePortfolioSubmission(submission.rawData);

      if (validationResult.status === 'success') {
        // Check Next.js 15 compatibility (Turbopack cache pre-check)
        const hasNext15Project = validationResult.data.projects.some((p) =>
          p.techStack.some((t) => t.match(/next\.js@15\.\d+/i))
        );

        if (hasNext15Project) {
          await sendReviewInvite(submission.candidateId, validationResult.data.email);
          await updateCandidateStatus(submission.candidateId, 'review_invited');
          results.eligible++;
        } else {
          await updateCandidateStatus(submission.candidateId, 'needs_next15_upgrade');
          results.invalid++;
        }
      } else {
        await updateCandidateStatus(submission.candidateId, 'validation_failed');
        results.invalid++;
      }

      // Move processed file to processed directory
      const processedPath = join(BATCH_CONFIG.processedDir, `${submission.candidateId}.json`);
      writeFileSync(processedPath, JSON.stringify(submission.rawData, null, 2));
    } catch (err) {
      console.error(`Failed to process submission for ${submission.candidateId}:`, err);
      results.errors++;
    }
  }

  // Output results
  console.log('\nBatch Processing Complete:');
  console.log(`Eligible for review: ${results.eligible}`);
  console.log(`Invalid submissions: ${results.invalid}`);
  console.log(`Processing errors: ${results.errors}`);
  console.log(`Total processed: ${pendingSubmissions.length}`);
}

// TypeScript 5.6: Top-level await supported in scripts with "module": "node16" or higher
await batchProcessPortfolios().catch((err) => {
  console.error('Batch processing failed:', err);
  process.exit(1);
});

// tsconfig.json strict mode configuration for portfolio reviews
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "strict": true,
    "noUncheckedSideEffectImports": true,
    "noUncheckedIndexedAccess": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "tsBuildInfoFile": ".next/cache/typescript.tsbuildinfo"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

# Run Next.js 15 Turbopack build to generate cache for submission
next build --turbopack

# Run official Next.js 15 App Router codemod for Pages Router migrations
npx @next/codemod@latest app-dir ./src

// Example take-home task bug fix (noUncheckedIndexedAccess error)
// Bug: projects[0] may be undefined, throws runtime error
const firstProject = projects[0];
console.log(firstProject.name);

// Fix: Add undefined check or use optional chaining (TypeScript 5.6 compliant)
const firstProject = projects[0];
if (firstProject) {
  console.log(firstProject.name);
}
// Or with optional chaining:
console.log(projects[0]?.name);