HONGSHIANG | 鴻象科技
Agency:
Freelance / Independent
Year:
2024
Industry:
Focus:
Premise“A precision-engineered digital ecosystem for Hongshiang — uniting a bespoke storefront, an intelligent operations dashboard, and a type-safe payment layer within a single monorepo, designed to carry a legacy retail brand into the next era of commerce.”
Premise &
Provocation
A traditional retailer stood at the threshold of reinvention — caught between the certainty of legacy processes and the promise of a unified digital future.
Hongshiang
2025
E-commerce /
Traditional Business
Full Stack Dev
UX Strategy
System Arch
“Fragmented channels, manual workflows, and no unified system to bridge legacy retail with the speed of modern commerce.”
The business faced mounting pressure to digitize, yet lacked a cohesive platform for payments, logistics, and content management.
Scalability
Built on a monorepo architecture with Turborepo, enabling independent scaling.
End-to-End Integrity
End-to-end type safety from Prisma through oRPC to TanStack Start.
Editorial Autonomy
Sanity CMS empowers clients to update content without touching code.
A Unified
Codebase
A centralized architecture built with Turborepo, designed for maximum code reuse, type safety across boundaries, and scalable service deployment.
store/
Customer Storefront
admin/
Operations Dashboard
sanity/
Sanity Studio
api
Type-safe API Layer
auth
Authentication Gateway
db
Schema & Migrations
ecpay
Commerce Integration
inngest
Event-driven Workflows
types
Shared Type Contracts
The Stack
Framework
TanStack Start
Monorepo
Turborepo
Runtime
Bun
Database
Prisma + PostgreSQL
Content
Sanity CMS
API Layer
oRPC
Auth
Better-Auth
Workflows
Inngest
Guiding
Convictions
“Development First” — leveraging the best of the open-source ecosystem to accelerate delivery without compromising quality.
“Craft is not about building everything from scratch. It is about knowing precisely which pieces to choose — and having the discipline to assemble them without compromise.”
shadcn/ui
Accessible, composable primitives that deliver polish without sacrificing the freedom to diverge.
MagicUI
Curated micro-animations and interactive patterns that elevate the storefront beyond the ordinary.
Performance
TanStack Start with file-based routing delivers sub-second loads and search-engine fluency.
Type Safety
From database schema to API boundary to rendered view — every data flow is verified at compile time.
Type & Tone
Manrope — a typeface born from geometric primitives, lending neutrality and warmth in equal measure across every surface of the product.
Manrope
Background
Secondary
Muted
White
Primary (Glow)
Accent (Green)
Where Precision
Meets Legacy
The intersection of modern type systems and legacy payment infrastructure — where every abstraction must earn its place through reliability.
Commerce Integration Layer
Payment
Credit card, ATM, & CVS with webhook confirmation.
Logistics
Shipping label generation & real-time tracking.
Invoice
Taiwan e-invoice carrier support.
Two Sources of Truth,
One Seamless Experience
By decoupling transactional data (Prisma/PostgreSQL) from editorial content (Sanity), we achieved 100ms instant previews for the client while maintaining rigid data integrity for orders.
Editorial Freedom
Live previews & real-time schema updates without deployments.
Performance
TanStack Start loaders for SEO-optimized static-dynamic hybrid rendering.
Built a complete type-safe ECPay SDK — a Rosetta Stone translating between legacy XML/Form APIs and modern TypeScript, turning undocumented behavior into verifiable contracts.
“ECPay's documentation is often contradictory. Zod schemas became our single source of truth — turning vague specifications into living, executable validation.”
From Repository
to Reality
Every commit traverses an automated gauntlet of type verification, build validation, and review gates before reaching production on Railway.
Storefront
hs-magic.com
Admin Panel
[SECRET]
Sanity CMS
[SECRET]
The Verification Chain
Branching
Feature-based workflow
Verification
CI Type-check & Build
Review
Automated PR analysis
Deployment
Railway Auto-scaling
Measurable Outcomes
Tools & Technologies
TypeScript
Language
TanStack Start
Framework
Turborepo
Monorepo
Bun
Runtime
Prisma
ORM
PostgreSQL
Database
Sanity CMS
CMS
oRPC
API Layer
Better-Auth
Auth
Inngest
Workflows
TailwindCSS
Styling
shadcn/ui
Components
Zustand
State
Arcjet
Security
PostHog
Analytics