maboni82/nextdns-optimized-analytics-frontend repository overview

⁠🎨 NextDNS Optimized Analytics - Frontend Dashboard

⁠Modern React 19 dashboard for comprehensive NextDNS analytics and visualization

⁠🎯 What This Container Provides

This is the web dashboard frontend for NextDNS Optimized Analytics - delivering beautiful, interactive DNS analytics that go far beyond NextDNS's standard interface. Built with React 19, TypeScript, and Tailwind CSS, this container offers:

• 📊 Interactive charts with time-series DNS query visualization
• 🔍 Advanced filtering by domain, status, profile, and time ranges
• 📱 Responsive design that works perfectly on desktop and mobile
• ⚡ Real-time updates with modern React hooks and TanStack Query
• 🎨 Beautiful UI using shadcn/ui components and Tailwind CSS
• 🛡️ Secure authentication with API key integration

⁠🚀 Quick Start

⁠Using Docker Compose (Recommended)

services:
  frontend:
    image: maboni82/nextdns-optimized-analytics-frontend:latest
    ports:
      - "5003:80"
    depends_on:
      - backend

⁠Standalone Docker Run

docker run -d \
  --name nextdns-frontend \
  -p 5003:80 \
  maboni82/nextdns-optimized-analytics-frontend:latest

⁠🌟 Features

⁠Dashboard Overview

• Real-time statistics - Total queries, blocked percentage, most active devices
• Time-series charts - Visualize DNS activity patterns over time
• Top domains - See most queried and blocked domains
• Profile switching - Analyze multiple NextDNS profiles

⁠Advanced Log Viewer

• Powerful search - Find specific domains instantly
• Smart filtering - Filter by blocked/allowed status, profile, time range
• Domain exclusion - Hide noise from frequent system queries
• Export capabilities - Download filtered results

⁠Modern User Experience

• Dark/Light modes - Comfortable viewing in any environment
• Responsive layout - Perfect on phones, tablets, and desktops
• Fast performance - Optimized with Vite and modern React patterns
• Accessibility - WCAG compliant with screen reader support

⁠🏷️ Version Tags

• latest - Latest stable build (automatically updated)
• 25.9.X - Specific patch versions for September 2025
• 25.9 - Latest September 2025 build
• 25.10.0 - Official monthly releases (immutable)

⁠🌐 Access Your Dashboard

After starting the container:

• Web Interface: http://localhost:5003
• No additional setup required - connects automatically to backend API

⁠🔧 Configuration

The frontend automatically detects and connects to the backend API. For custom configurations:

# Optional environment variables
VITE_API_BASE_URL=http://localhost:5002  # Backend API URL
VITE_APP_TITLE=NextDNS Analytics          # Custom dashboard title

⁠🏗️ Built With

• React 19 - Latest React with concurrent features
• TypeScript 5.5 - Type-safe development
• Vite 7.1 - Lightning-fast build tool
• Tailwind CSS 3.4 - Utility-first styling
• shadcn/ui - Beautiful, accessible UI components
• TanStack Query 5 - Powerful data fetching and caching
• Chart.js 4 - Interactive, responsive charts
• Radix UI - Unstyled, accessible component primitives

⁠📱 Browser Support

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+

⁠🔗 Related

• Backend API: nextdns-optimized-analytics-backend⁠
• Source Code: GitHub Repository⁠
• Documentation: Complete Setup Guide⁠

⁠🏢 Maintained By

BondIT ApS⁠ - Danish IT consultancy specializing in modern web applications and DNS analytics.

Made with ❤️ and ☕ in Denmark 🇩🇰