CMNW Next is the modern frontend interface for the CMNW Intelligence Platform, providing an intuitive and responsive user experience for World of Warcraft intelligence gathering, market analysis, and guild management. Built with Next.js 16 and React 19, it delivers blazing-fast performance with server-side rendering and real-time data visualization.
- 🕵️ Character Intelligence: Comprehensive character profiles with stats, gear, and progression tracking
- 🏰 Guild Analytics: Guild roster management, member tracking, and activity monitoring
- 💰 Market Analysis: Real-time auction house data with interactive price charts and heatmaps
- 🎮 LFG System: Looking for Guild matching with advanced filtering
- 📊 Data Visualization: Interactive charts powered by Tremor with beautiful data insights
- 🎨 Modern UI: Beautiful, responsive design with dark/light theme support
- ⚡ Performance: Next.js 16 with Turbopack for lightning-fast development and production builds
- 🔍 Smart Search: Universal search for characters, guilds, items, and hash queries
cmnw-next/
├── app/ # Next.js App Router
│ ├── character/[id]/ # Character profile pages
│ ├── guild/[id]/ # Guild detail pages
│ ├── item/[id]/ # Item analysis pages
│ ├── hash/[id]/ # Hash-based searches
│ ├── blog/ # Blog and articles
│ └── about/ # About and documentation
├── components/ # React components
│ ├── character/ # Character-specific components
│ ├── guild/ # Guild-specific components
│ ├── search-form/ # Universal search interface
│ └── ... # Shared UI components
├── lib/ # Core utilities
│ ├── api/ # API client and hooks
│ │ ├── client.ts # Centralized API client
│ │ ├── hooks.ts # SWR-based data fetching hooks
│ │ └── utils.ts # GUID encoding/decoding utilities
│ ├── types/ # TypeScript type definitions
│ ├── utils/ # Helper functions
│ └── constants/ # Application constants
├── content/ # Markdown content for blog
├── styles/ # Global styles
└── public/ # Static assets
This frontend connects to the CMNW Backend API, a sophisticated microservices architecture built with NestJS that provides:
- 🕵️ OSINT Module: Character and guild intelligence gathering
- 📊 DMA Module: Data Market Analysis and auction house monitoring
- 💰 Valuations Engine: XVA-based financial modeling
- 🔒 OAuth Integration: Battle.net authentication
- Next.js 16 - React framework with App Router and Turbopack
- React 19 - Latest React with enhanced features
- TypeScript - Type-safe development
- HeroUI v2 - Modern React component library
- Tailwind CSS - Utility-first CSS framework
- Tailwind Variants - Component variant handling
- Framer Motion - Animation library
- SWR - React Hooks for data fetching with caching
- React Hook Form - Performant form validation
- Yup - Schema validation
- ESLint - Linting with Next.js and TypeScript configs
- Prettier - Code formatting
- pnpm - Fast, disk space efficient package manager
- Node.js 18+
- pnpm 9+ (recommended) or npm/yarn
- Access to the CMNW Backend API (the frontend now targets https://cmnw.me by default)
# Clone the repository
git clone https://github.com/alexzedim/cmnw-next.git
cd cmnw-next
# Install dependencies
pnpm install
# Set up environment variables (optional)
cp .env.example .env.local
# Edit .env.local to adjust caching settings (optional)# Start development server with Turbopack
pnpm dev
# Access the application at http://localhost:3000# Create production build
pnpm build
# Start production server
pnpm start# Run ESLint
pnpm lint
# Format code with Prettier
pnpm format- Universal search interface for characters, guilds, items, and hash queries
- Quick navigation to all platform sections
- Character Profile: Avatar, class, faction, guild information
- Statistics: Detailed character stats and attributes
- Looking for Guild: Browse characters searching for guilds with filters
- Guild Overview: Guild name, faction, realm, member count
- Guild Roster: Sortable table of all guild members with class/level info
- Activity Timeline: Guild membership changes and events
- Item Details: Comprehensive item information with quality tiers
- Market Valuations: Price history and market analysis
- Quotations: Real-time pricing across realms
- Market Heatmap: Visual representation of price distribution
- Advanced search capabilities using encoded query parameters
- Character and guild search results
- Blog (
/blog): Articles and updates with markdown support - About (
/about): Platform information and documentation - Docs (
/docs): API and feature documentation
CMNW Next includes built-in dark/light theme support powered by next-themes:
// Theme toggle available in navbar
import { ThemeSwitch } from "@/components/theme-switch";Dynamic theming based on World of Warcraft factions:
- Alliance: Blue color scheme
- Horde: Red color scheme
- Neutral: Purple/gray scheme
Character pages display WoW class-specific colors:
- Death Knight, Demon Hunter, Druid, Hunter, Mage, Monk, Paladin, Priest, Rogue, Shaman, Warlock, Warrior, Evoker
The application uses a centralized API client (lib/api/client.ts) for all backend communication:
import { apiClient } from '@/lib/api';
// Example: Fetch character data
const character = await apiClient.get('/api/osint/character', {
name: 'PlayerName',
realm: 'RealmName'
});Client components use SWR hooks for automatic caching and revalidation:
'use client';
import { useCharacter } from '@/lib/api/hooks';
function CharacterComponent({ guid }: { guid: string }) {
const { data, error, isLoading } = useCharacter({ guid });
if (isLoading) return <Spinner />;
if (error) return <ErrorMessage />;
return <CharacterProfile character={data} />;
}Characters and guilds use encoded GUIDs for URLs:
import { encodeGuid, decodeGuid } from '@/lib/api';
// Encode: Player@RealmName -> Player%40RealmName
const encoded = encodeGuid('Player@RealmName');
// Decode: Player%40RealmName -> Player@RealmName
const decoded = decodeGuid('Player%40RealmName');Interactive heatmaps showing price distribution across realms:
import { MarketHeatmap } from '@/components/market-heatmap';
<MarketHeatmap data={valuationData} />Time-series charts for historical pricing:
import { LineChart } from '@tremor/react';
<LineChart
data={priceHistory}
index="date"
categories={["price"]}
colors={["blue"]}
/># .env.local
# Backend API cache revalidation (default: 3600 seconds)
NEXT_PUBLIC_API_REVALIDATION=3600
# Optional: Analytics, monitoring, etc.
# NEXT_PUBLIC_GA_ID=your-google-analytics-id# Install Vercel CLI
pnpm i -g vercel
# Deploy to production
vercel --prod# Build image
docker build -t cmnw-next .
# Run container
docker run -p 3000:3000 cmnw-nextNote: The frontend always targets https://cmnw.me for API calls. Override the hardcoded origin in
config/api-origin.jsif you deploy the API elsewhere.
# Build static site
pnpm build
# Output in ./out directory- ESLint: Configured with Next.js, TypeScript, React, and Prettier rules
- Prettier: Enforces consistent code formatting with LF line endings
- TypeScript: Strict mode enabled for type safety
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Contributions are welcome! This frontend works in tandem with the CMNW Backend.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Follow code style (run
pnpm lintandpnpm format) - Commit with conventional commits (
git commit -m 'feat: add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- 🎨 UI/UX Improvements: Enhance component design and user experience
- 📊 Data Visualization: Add new charts and analytics views
- ♿ Accessibility: Improve ARIA labels and keyboard navigation
- 🌍 Internationalization: Add support for multiple languages
- 📱 Mobile Experience: Optimize for mobile devices
- 🧪 Testing: Add unit and integration tests
This project is licensed under the MIT License - see the LICENSE file for details.
- CMNW Backend - Microservices API backend
- CMNW OSINT Addon - World of Warcraft addon for data collection
- CMNW Oraculum - Discord bot integration
- Built with Next.js by Vercel
- UI components from HeroUI
- Charts powered by Tremor
- Icons from React Icons
🌟 Built with ❤️ by @alexzedim
🌐 Website • 🐛 Issues • 💬 Discussions • 🐦 Twitter
"Intelligence Always Wins" 🎯