What is Ryoko

Ryoko is a full-stack online travel agency platform. It handles visa applications, airport transfers, flight bookings, and holiday packages. The system serves three audiences through three separate applications: resellers (B2B), end consumers (B2C), and internal operations (Admin CRM).

This is the most complex project I've worked on.

Architecture

The platform consists of four main applications that work together:

• B2B Reseller Site (reseller.ryoko.world) built with SvelteKit 5 and Svelte 5
• B2C Consumer Site (ryoko.world) built with SvelteKit 5 and Svelte 5
• Admin CRM (admin.ryoko.world) built with Next.js 15 and Payload CMS 3.x
• Backend API built with Hono.js, Drizzle ORM, and PostgreSQL

Each app has its own Docker setup and is deployed to Dokploy. A central backend API handles all business logic, authentication, and data management so the frontends stay focused on their specific user experience.

Key Technical Decisions

Hono.js for the backend gave us a lightweight, type-safe API layer with automatic OpenAPI documentation. Drizzle ORM handles the database layer. Background processing runs on BullMQ with Redis. Files go to Cloudflare R2, emails through Resend, and PDFs are generated with Puppeteer.

Authentication uses better-auth with email/password and OTP. Role-based access control ensures each user type only sees what they should.

The Flow Engine

This was the biggest engineering challenge. We built a custom node-based flow builder that lets the operations team visually design dynamic visa application forms and eligibility questionnaires without writing code.

The admin CRM has a visual drag-and-drop editor where nodes represent steps (questions, conditions, form fields, score calculations, results) and edges define the paths between them. The backend runs a custom execution engine that processes these flows at runtime, supporting conditional branching, multi-traveler form sections, scoring with weighted criteria, and flow versioning.

AI Features

Passport OCR lets applicants scan their passport during visa applications. We combine Google with some AI magic for parsing the raw output into structured data.

Eligibility AI generates personalized responses after a user completes an eligibility questionnaire, explaining their result based on their specific answers and scores.

The Visa Application Flow

This is the core product. Customers browse visa products, check their eligibility through a dynamic questionnaire, fill out application forms with passport scanning and document uploads, and pay through an integrated payment gateway. The entire form structure is dynamic and configured by the operations team through the flow builder.

On the admin side, the CRM handles application review, document generation, status tracking, and communication with applicants.

B2B and B2C

The B2B site serves travel agency resellers with features like wallet-based payments, bulk applications, saved travelers, and an approval workflow for onboarding. The B2C site is the consumer-facing version with a more guided experience including the eligibility checker.

Both are built with SvelteKit 5, sveltekit-superforms, and shadcn-svelte.

Admin CRM

The admin app combines Payload CMS for content management with a custom CRM for operations. Roles like visa coordinator, finance admin, support coordinator, and key account manager each have scoped access to the features they need.

What I Learned

Building a platform with multiple apps sharing a database and external APIs taught me how important system boundaries and data ownership are. We went through a full backend rework early on because the original approach didn't scale. The flow engine was the hardest problem I've solved, and getting it to work reliably in production with all its moving parts was deeply satisfying.