Company Info App

Problem

A multi-tenant company-profiles app needed fast first-paint, deep-linkable list/detail views, and a forgiving create/edit flow that handled image uploads without blowing up on invalid files. The previous implementation was a CSR app that loaded the whole catalogue before showing anything and had no upload validation.

Approach

• 01

  Server-rendered the list and detail routes via Next.js so the first paint had real content and the URL alone was a shareable record.

• 02

  Modelled the data layer in Apollo GraphQL with explicit error and empty-state branches — a missing record is not the same as an error, and the UI should not pretend they are.

• 03

  Validated logo uploads at the boundary: file type (JPEG / PNG), size cap, and dimension check, with clear inline feedback rather than a generic toast.

• 04

  Used query parameters for deep-link prefill on the create form so a "share this draft" link was free.

Outcome

• 01

  First contentful paint was fast enough that the loading shimmer became unnecessary; we removed it.

• 02

  Upload-related support tickets dropped because rejections happened in the UI with a clear reason instead of failing silently on the server.

• 03

  Detail pages were deep-linkable, which made customer support and sales hand-offs noticeably easier.

Lessons

• 01

  Apollo error handling is not free — every query needs an explicit empty/error branch or you ship a broken UI to a real user.

• 02

  Validate file uploads at the client edge AND the server. Client gives feedback; server is the source of truth.

• 03

  SSR is the cheapest performance win for content-heavy pages. Reach for it before code-splitting or lazy-loading.