project

Engineering Case Studies

Standard case-study format: problem, architecture, outcomes, and implementation tradeoffs. Built to support interviews and technical discussions.

Target role: Frontend Engineer

yflong.dev Terminal Portfolio

production

Terminal-first portfolio with command-driven interaction, embedded CTF mode, and content routes.

problem

Typical portfolio sites are visually polished but do not demonstrate interactive system thinking.

architecture

  • Command engine separated from rendering via typed command handlers and runtime context interfaces.
  • State management in custom hooks for terminal history, boot sequence, and keyboard interaction.
  • Static blog pipeline with frontmatter validation and markdown-to-HTML rendering.

outcomes

  • Delivered a unique interface that directly demonstrates product and engineering personality.
  • Added first-party blog and journal routes to keep all content in one deployable surface.
  • Built reusable UI tokens and page shells to maintain visual and codebase consistency.

stack

Next.jsReactTypeScriptTailwind CSSFramer Motion

Wan's Dine

maintenance

Restaurant discovery platform with location-based browsing and service health instrumentation.

problem

Users need faster restaurant shortlisting without navigating multiple disconnected food platforms.

architecture

  • Frontend client optimized for fast listing queries and category filtering.
  • Service health and incident traces integrated into the same portfolio ecosystem for transparency.
  • Modular feature grouping to isolate recommendation logic, route handlers, and UI concerns.

outcomes

  • Shipped a full product surface with discoverability, filtering, and operational visibility.
  • Documented outage handling and active incident communication through the status dashboard model.
  • Established a platform to discuss reliability and recovery strategy during interviews.

stack

TypeScriptReactNext.jsAPI IntegrationObservability

Been There Series

production

Travel exploration app for curated luxury hotel discovery and trip planning workflows.

problem

Travel research for premium stays is fragmented across content-heavy portals and repetitive comparisons.

architecture

  • Feature-focused frontend architecture with reusable search and detail modules.
  • External service abstraction for destination and stay metadata retrieval.
  • Progressive rendering strategy to keep route transitions responsive across devices.

outcomes

  • Published a polished project that demonstrates product UX, data handling, and deployment workflow.
  • Created a second domain project to show breadth beyond portfolio and blog infrastructure.
  • Added a practical discussion point for frontend architecture and API tradeoffs.

stack

Next.jsTypeScriptFrontend ArchitectureAPI Design