mtg-online-drafter/docs/development/devlog/2025-12-14-190500_initial_project_setup.md

PROJ001: Initial Project Setup and Logic Refactoring (Node.js Migration)

Status: COMPLETED

Achievements

• Architecture: Pivoted from .NET to a Node.js Monolith structure to natively support real-time state synchronization via Socket.IO.
• Frontend Infrastructure: Configured React 19 + Vite + Tailwind CSS (v3) in src/client.
• Backend Infrastructure: Initialized Express server with Socket.IO in src/server for handling API requests and multiplayer draft state.
• Refactoring: Successfully ported legacy gemini-generated.js logic into specialized TypeScript services:
  • CardParserService.ts: Regex-based list parsing.
  • ScryfallService.ts: Data fetching with caching.
  • PackGeneratorService.ts: Pack creation logic.
• UI Implementation: Developed CubeManager, PackCard, and StackView components.
• Cleanup: Removed all .NET artifacts and dependencies.
• Tooling: Updated Makefile for unified Node.js development commands.

How to Run

• Install: make install (or cd src && npm install)
• Run Development: make dev (Runs Server and Client concurrently)
• Build: make build

Manual Verification Steps

1. Run: make dev
2. Access: Open http://localhost:5173 (Client).
3. Test:
   • Click "Load Demo List" in the Cube Manager.
   • Verify cards are fetched from Scryfall.
   • Click "Generate Pools".
   • Verify packs are generated and visible in Stack/Grid views.

Next Steps

• Implement DraftSession state management in src/server.
• Define Socket.IO events for lobby creation and player connection.