A comprehensive real-time blockchain statistics dashboard for the DigiByte network. This React-based web application provides detailed analytics, visualizations, and monitoring tools for the DigiByte blockchain.
- Live blockchain statistics with WebSocket updates
- Current block height, network hashrate, and difficulty
- Supply economics and market capitalization
- Recent blocks and transaction monitoring
- Home - Main dashboard with key metrics
- Blocks - Real-time block explorer with mining details
- Mining Pools - Pool distribution analysis with interactive charts
- Algorithms - Multi-algorithm mining statistics (SHA256, Scrypt, Skein, Qubit, Odocrypt)
- Hashrate - Network hashrate trends and analysis
- Difficulties - Mining difficulty tracking per algorithm
- Nodes - Geographic visualization of network nodes worldwide
- Supply - Supply economics, emission rate, and distribution metrics
- Transactions - Transaction volume and fee analytics
- Taproot - Network upgrade activation monitoring
- Downloads - DigiByte Core wallet download statistics
- Roadmap - Development priorities and upcoming features
- Material-UI v5 components with DigiByte branding
- Responsive design optimized for mobile and desktop
- Interactive D3.js and Chart.js visualizations
- Dark theme with gradient backgrounds
- Real-time data updates without page refresh
- Node.js v14.x or higher (tested with v21.7.2)
- DigiByte Node with RPC enabled (digibyte-core)
- dgbstats-server backend (repository)
# Install Homebrew if not already installed
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# Install Node.js
brew update
brew install node
# Verify installation
node -v
npm -v
# Optional: Install specific Node version
sudo npm install -g n
sudo n install 21.7.2
sudo n use 21.7.2# Clone frontend and backend
git clone https://github.com/JaredTate/dgbstats.git
git clone https://github.com/JaredTate/dgbstats-server.git
# Install dependencies
cd dgbstats
npm installEdit your digibyte.conf file:
# RPC Configuration
rpcuser=your_username
rpcpassword=your_password
server=1
txindex=1
debug=1
# Performance Settings
rpcworkqueue=64
rpcthreads=8
maxconnections=128
# Network Settings
dandelion=0
# Block Notifications (optional)
blocknotify=/path/to/dgbstats-server/blocknotify.sh %sUpdate credentials in dgbstats-server/server.js:
const rpcUser = 'your_username';
const rpcPassword = 'your_password';
const rpcUrl = 'http://127.0.0.1:14022';The frontend configuration is in src/config.js:
const config = {
apiBaseUrl: process.env.REACT_APP_API_URL || 'http://localhost:5001',
wsBaseUrl: process.env.REACT_APP_WS_URL || 'ws://localhost:5002'
};cd dgbstats-server
sudo npm start
# Server runs on port 5001 (API) and 5002 (WebSocket)cd dgbstats
npm start
# Application opens at http://localhost:3005dgbstats/
├── src/
│ ├── pages/ # Page components (12 pages)
│ ├── components/ # Reusable components
│ ├── utils/ # Utility functions
│ ├── tests/ # Test suites
│ ├── config.js # Configuration
│ └── App.js # Main application
├── public/ # Static assets
└── package.json # Dependencies
npm start # Start development server
npm run build # Create production build
npm test # Run tests in watch mode
npm run test:run # Run tests once
npm run test:coverage # Generate coverage report
npm run test:e2e # Run end-to-end tests
npm run test:all # Run all test suitesThe project maintains 95%+ code coverage with:
- 214 Unit Tests - Component and function testing
- 1,112 E2E Tests - Cross-browser integration testing
- 7 Browser Engines - Chrome, Firefox, Safari, Edge, Mobile Chrome, Mobile Safari
- ✅ WebSocket mocking for real-time data
- ✅ D3.js and Chart.js visualization testing
- ✅ WCAG accessibility compliance
- ✅ Performance benchmarking
- ✅ Mobile responsiveness testing
- ✅ Cross-browser compatibility
# Unit & Integration Tests (Vitest)
npm test # Watch mode
npm run test:run # Single run
npm run test:coverage # Coverage report
npm run test:ui # Vitest UI
# End-to-End Tests (Playwright)
npm run test:e2e # All browsers
npm run test:e2e:ui # Playwright UI
# Combined Testing
npm run test:all # All tests
npm run test:all:clean # Tests + cleanup- React.memo for component memoization
- useMemo/useCallback for expensive operations
- WebSocket batching for real-time updates
- Virtual scrolling for large datasets
- Responsive charts with mobile optimizations
- Code splitting for faster initial load
- Performance: 90+
- Accessibility: 95+
- Best Practices: 100
- SEO: 90+
- Chrome (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
- Edge (latest 2 versions)
- Mobile Chrome
- Mobile Safari
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow existing code patterns and styling
- Maintain 95%+ test coverage
- Test on mobile and desktop viewports
- Ensure WCAG 2.1 AA accessibility compliance
- Update documentation for new features
- TAP Route Activation: Successfully activated and buried - UI elements removed
- Enhanced Testing: Comprehensive test suite with 95%+ coverage
- Performance Improvements: Optimized chart rendering and WebSocket handling
- Mobile Optimization: Improved responsive design for all screen sizes
- CLAUDE.md - Comprehensive AI agent documentation
- Testing Guide - Detailed testing documentation
- API Documentation - Backend API reference
This project is open-source and available under the MIT License.
For issues, feature requests, or questions:
- Open an issue on GitHub
- Contact the development team
Developed by the DigiByte community for real-time blockchain analytics and monitoring.