Interview Q&A

Frontend and Backend

This is a direct questionnaire from the Study Plan aimed at Full-Stack and Front-end engineers, covering React, Node.js, TypeScript, and DevOps.

1. TypeScript Patterns

TypeScript patterns generally fall into standard software design patterns and TypeScript-specific type patterns:

Classic Patterns (GoF): Factory, Singleton, Observer, Decorator (widely used with classes in Angular/NestJS).
Utility Types: Leveraging built-in types like Partial<T>, Omit<T, K>, Pick<T, K> to manipulate existing types dynamically without repetition.
Generics: Reusable components or functions (function useFetch<T>(url: string)).
Discriminated Unions: Using a common literal property (like type: 'SUCCESS' | 'ERROR') to safely narrow down types in a switch statement, common in Redux and State Machines.

To reduce the initial bundle and increase performance:

Route-Based: Using React.lazy() and Suspense. The code for the “Settings” page is only downloaded if the user accesses that route.
Component-Level: Lazy loading heavy components that aren’t immediately visible (e.g., complex modals, charts).
Utility-Based: Using dynamic import() to load heavy calculation or PDF export libraries only when the action occurs.
Vendor Chunking: Configuring Webpack/Vite to split node_modules from the application code, improving browser caching.

To ensure safe adoption in micro-frontends:

SemVer (Semantic Versioning): Strictly respect MAJOR.MINOR.PATCH.
Peer Dependencies: React and ReactDOM MUST be declared as peerDependencies to avoid multiple instances of React running in parallel, which breaks the app.
Tools: Lerna, Turborepo, or Bit to manage versions and changelogs in a monorepo.
Output Bundles: Build ESM and CJS formats, exporting TypeScript type definitions (.d.ts).

Basic structure of an azure-pipelines.yml:

Install: npm ci to install dependencies faithfully based on the lockfile.
Quality: Linting scripts (npm run lint).
Test: Run tests (npm test) configured to generate Cobertura/JaCoCo coverage reports.
Gates (Reports): PublishTestResults@2 and PublishCodeCoverageResults@1 tasks. Use Branch Policies to block PRs with coverage below the target.
Build and Artifacts: npm run build and publish using PublishBuildArtifacts@1.
Deploy: Release pipelines with manual pre-deployment approvals before shipping to Production.

The execution order is sequential and critical:

Globals/Security: helmet(), cors(), and body parsers (express.json()).
Rate Limiting: Block abuse or DDoS attacks early.
Authentication: Extract and validate the JWT (returns 401 Unauthorized if failed).
Validation (Zod/Joi): Validate req.body and parameters. If it fails, returns 400 Bad Request before hitting the database.
Controller: Business logic and data access.
Global Error Handler: The (err, req, res, next) middleware must be at the very end to catch crashes and return a formatted 500 Internal Server Error.

I approach this using React Testing Library (RTL) and Mock Service Worker (MSW).

Mocking with MSW: Instead of mocking Axios or Fetch, intercept network requests directly (e.g., returning status 200 with mock data).
Loading State: Use expect(screen.getByTestId('spinner')).toBeInTheDocument() on the first render.
Success State: Use async queries (await screen.findByText('Mocked Data')) to wait for the UI to update after the mocked API resolves.
Error State: Force MSW to return a 500 error within the test block, ensuring the error message (e.g., await screen.findByText('Failed to load')) appears.

Async I/O: Never use synchronous methods like fs.readFileSync inside a route handler (they block the main thread).
CPU-Intensive Tasks: Offload heavy computations (encryption, CSV/PDF generation) to Worker Threads or Message Queues (e.g., Redis + BullMQ) to be processed by a separate microservice.
Connection Pooling: Optimize database connections to prevent exhaustion under load.
Caching: Use Redis to serve near-static data, saving CPU cycles and database queries.