PRODUCT ENGINEERING

FreshFish RM

Commercial site for a seafood supplier Next.js SSG with product showcase and quote funnel.

YEAR

2025

ROLE

Designed • Developed • Shipped

STACK

Next.jsReactTypeScriptTailwind CSSFigmaAdobe Photoshop

01/PROBLEM → SOLUTION

02/SYSTEM ARCHITECTURE

How the system fits together

  1. Customer
  2. Next.js Application
  3. React UI
  4. Contact / Quote Form
  5. Next.js API Route
  6. SMTP Relay
DRAG / SWIPE TO PAN DIAGRAM↔
CustomerBROWSERWeb ServerCPANEL / HOSTNext.js ApplicationSTATIC PRE-RENDERINGReact UIMODULAR COMPONENTSTailwind CSSOPTIMIZED STYLESProduct Showcase EngineSTATE / PROPSImage OptimizerNEXT/IMAGEContact / Quote FormUI COMPONENTNext.js API RouteSANITIZATIONSMTP RelayEMAIL DISPATCHFreshFish Sales TeamINBOX

Drag to pan or Hover to trace or Click to inspect

03/KEY ENGINEERING DECISIONS

Component Reuse

Reusable React components replace isolated pages, cutting duplication and easing future product and price updates.

Next/Image Optimization

Product imagery runs through Next/Image, controlling payload while keeping the showcase sharp.

API-Routed Leads

Quote-form input is sanitized in a Next.js API route before SMTP relay to the sales team.

04/IMPACT & TAKEAWAYS

Deployed in Production. Live at freshfishrm.com since 2025.

Scalable Foundation. Planned as step one of a larger platform, with a future admin dashboard for products, pricing, and inquiries.

SEO-First Build. Static generation gives search-engine visibility for products and services.