System architecture
Wonder Port Hobbies runs on a single shared platform: three experiences, one backend, one source of truth. Each site has its own purpose and audience; all data, logic, and operations stay centralized.
Altitude
Internal control surface. Administration, inventory, orders, workflows.
Frontend stack
Next.js app with Tailwind CSS and app router, tuned for this experience.
WonderPort Hobbies
Main customer storefront. Browse products, place orders, core brand.
Frontend stack
Next.js app with Tailwind CSS and app router, tuned for this experience.
BlindBox
Themed, curated experience. Same data, different presentation.
Frontend stack
Next.js app with Tailwind CSS and app router, tuned for this experience.
Mobile app
Customer-facing mobile app. Same shared data, mobile-native experience.
Frontend stack
React Native app built with Expo; talks to a dedicated app API that shares backend logic and database with the web stack.
Altitude – request layer
Requests from this site flow through Hono routes and Zod validation before reaching the shared API.
WonderPort Hobbies – request layer
Requests from this site flow through Hono routes and Zod validation before reaching the shared API.
BlindBox – request layer
Requests from this site flow through Hono routes and Zod validation before reaching the shared API.
Mobile app – request layer
App traffic flows through dedicated mobile API endpoints before joining the shared backend.
Shared API and business logic
Typed API layer enforcing shared business rules for web and mobile.
Powered by JStack (Hono, procedures, Drizzle ORM)
Single source of truth
Shared database powering all frontends (web + mobile app)
Serverless PostgreSQL via Neon
This architecture allows us to ship multiple experiences quickly while keeping data integrity, operational control, and long-term scalability intact.