Let me read the plan and start building systematically.
Now let me set up the todo list and start building. First, let me get the Neon integration and check the current globals.css for theming.
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/serverlesslib/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 itemslib/services/item-delivery.ts -- Dispatcher: switches on item_type metafield to call the correct rAthena servicelib/utils/hmac.ts -- HMAC-SHA256 verification with timingSafeEquallib/utils/metafields.ts -- Shopify Admin GraphQL API metafields fetcherAPI Routes:
app/api/webhooks/shopify/route.ts -- Webhook handler with HMAC verification, fire-and-forget processingapp/api/orders/route.ts + [id]/route.ts -- Orders list/detail APIapp/api/delivery/process/route.ts -- Manual delivery retry triggerStorefront (using Shopify Storefront API skill):
app/shop/page.tsx -- Product grid with category filters, falls back to mock RO itemsapp/shop/[slug]/page.tsx -- Product detail with character name input fieldlib/shopify/* -- Copied from Shopify skill (Storefront API, types, constants, utils)Admin Dashboard:
app/dashboard/layout.tsx -- Sidebar layout with navigationapp/dashboard/page.tsx -- Stats cards + recent ordersapp/dashboard/orders/page.tsx + [id]/page.tsx -- Orders table with filters, order detail with delivery timelineapp/dashboard/analytics/page.tsx -- Revenue chart, delivery type pie chart, order status bar chartapp/dashboard/products/page.tsx -- Product metafields checker showing game mappingEnvironment 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.
You can send messages while the preview loads