Ragnarok shop Rails - v0 by Vercel

Understood. I'll build everything with proper env var references - the UI will work with mock/fallback data in preview, and the real DB connections will activate once env vars are configured. Let me start building.

Good, I have the full picture. Now let me also check what shadcn/ui components are available and read the Shopify reference files I need to copy.

Now let me read the remaining Shopify skill files I need to copy, then also generate the design inspiration for the RO theme.

Now I have everything I need. Let me start building. First, I'll set up the theme, then the database/service layer, then the API routes, then the UI components. Let me begin with the globals.css theme update and the SQL migration, then build everything in parallel batches.

Now add the custom tokens to the @theme inline block:

Now let me create all the core service files in parallel - DB clients, utils, and services:

Now create the service layer (item delivery + order processor) and the SQL migration script:

Now create the API routes and copy Shopify skill files:

Now copy the Shopify skill files and add the dependencies to package.json:

Now add the dependencies:

Also add SWR for client-side data fetching:

Now let me move to the next task - building the Storefront UI and Dashboard components:

API routes are already done. Let me move to the Shopify Storefront and create the mock data helper for the preview, plus the shop components:

Now let me create the mock data for preview, the storefront components, and the shop pages:

Now let's build the Admin Dashboard. This is the big one:

Let me create the mock dashboard data, dashboard components, layout and pages:

Now create the dashboard components in parallel:

Now create the dashboard layout and pages:

Now let's build the landing page and update the root layout:

Now update the root layout with proper metadata:

Now mark all tasks as done:

The full Ragnarok Online Shop has been built as a Next.js 16 port of your Rails API. Here's what was created across ~22 files:

Backend / Services:

lib/db/postgres.ts -- Neon serverless PostgreSQL client with @neondatabase/serverless
lib/db/rathena.ts -- MySQL pool (mysql2/promise) with addZeny(), sendToMailbox(), activateVIP(), findCharacter()
lib/services/order-processor.ts -- Full pipeline: extract character name from order notes, upsert order/player, deliver items
lib/services/item-delivery.ts -- Dispatcher: switches on item_type metafield to call the correct rAthena service
lib/utils/hmac.ts -- HMAC-SHA256 verification with timingSafeEqual
lib/utils/metafields.ts -- Shopify Admin GraphQL API metafields fetcher

API Routes:

app/api/webhooks/shopify/route.ts -- Webhook handler with HMAC verification, fire-and-forget processing
app/api/orders/route.ts + [id]/route.ts -- Orders list/detail API
app/api/delivery/process/route.ts -- Manual delivery retry trigger

Storefront (using Shopify Storefront API skill):

app/shop/page.tsx -- Product grid with category filters, falls back to mock RO items
app/shop/[slug]/page.tsx -- Product detail with character name input field
lib/shopify/* -- Copied from Shopify skill (Storefront API, types, constants, utils)

Admin Dashboard:

app/dashboard/layout.tsx -- Sidebar layout with navigation
app/dashboard/page.tsx -- Stats cards + recent orders
app/dashboard/orders/page.tsx + [id]/page.tsx -- Orders table with filters, order detail with delivery timeline
app/dashboard/analytics/page.tsx -- Revenue chart, delivery type pie chart, order status bar chart
app/dashboard/products/page.tsx -- Product metafields checker showing game mapping

Environment variables needed (add via the Vars sidebar): DATABASE_URL, SHOPIFY_SHOP_DOMAIN, SHOPIFY_ACCESS_TOKEN, SHOPIFY_WEBHOOK_SECRET, NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN, RATHENA_DB_HOST, RATHENA_DB_PORT, RATHENA_DB_USER, RATHENA_DB_PASSWORD, RATHENA_DB_NAME. The SQL migration in scripts/001-create-tables.sql needs to be run against your Neon database when ready.