A comprehensive killboard and statistics tracker for Warhammer Online: Return of Reckoning, built with React, TypeScript, and GraphQL.
- Node.js (v18 or higher)
- npm or yarn
- Install dependencies:
npm install- Generate GraphQL types:
npm run codegen- Start development server:
npm run startOpen http://localhost:3000 to view the application.
Runs the app in development mode with Vite. Open http://localhost:3000 to view it in the browser.
Builds the app for production to the build folder.
Runs TypeScript compilation, build, and linting checks.
Runs ESLint on the source code.
Generates TypeScript types from GraphQL schema.
Watches for GraphQL changes and regenerates types automatically.
This killboard tracks:
- Player kills and statistics
- Guild performance and rankings
- Scenario results and leaderboards
- Item databases and vendor information
- Quest and creature data
- Instance run statistics
- Advanced filtering and search capabilities
- Data export functionality
- Mobile-responsive design
- Frontend: React 19, TypeScript
- Build Tool: Vite
- Data Layer: Apollo Client (GraphQL)
- Styling: DaisyUI + Tailwind CSS (Modern UI Framework)
- Icons: Font Awesome
- Internationalization: react-i18next
- Performance: Optimized bundle with lazy loading
- 100% Bulma CSS eradication - All 37 components migrated to DaisyUI/Tailwind
- Mobile-first responsive design across all components
- Enhanced accessibility with semantic HTML and ARIA labels
- Modern component architecture with improved type safety
- Performance optimizations with reduced bundle size
- Advanced filtering system with date ranges, careers, and zones
- Data export capabilities (CSV, JSON, PDF)
- User preferences with local storage persistence
- Real-time data integration with GraphQL subscriptions
- Comprehensive analytics and performance monitoring
The project uses GraphQL code generation to maintain type safety. Always run npm run codegen after modifying GraphQL queries or when pulling changes that affect the schema.
All components have been modernized with:
- DaisyUI components for consistent design
- Tailwind CSS utilities for styling
- TypeScript interfaces for type safety
- Responsive design patterns for mobile compatibility
- Error boundaries for graceful error handling
- Original Bulma components are preserved in
src/_ARCHIVE/for reference - All active components use modern DaisyUI/Tailwind CSS
- GraphQL schemas and data structures remain unchanged
- Backward compatibility maintained for all existing functionality