A modern, performant blockchain explorer for the Hoosat Network built with React.
Live Version: https://network.hoosat.fi
- Real-time Block Explorer - View the latest blocks and transactions as they happen
- Address Lookup - Search and track addresses, balances, and transaction history
- Transaction Details - Comprehensive transaction information with inputs and outputs
- Network Statistics - Live network metrics including hashrate, difficulty, and block count
- Responsive Design - Optimized for both desktop and mobile devices
- Performance Optimized - Built with React best practices for fast rendering and smooth UX
- React - UI framework
- React Router - Client-side routing
- Bootstrap - Responsive grid and components
- SCSS - Styling with variables and mixins
- Moment.js - Date formatting
- Framer Motion - Smooth animations
- React Tooltip - Interactive tooltips
- Node.js (v14 or higher)
- npm or yarn
# Clone the repository
git clone https://github.com/yourusername/hoosat-explorer.git
# Navigate to the explorer directory
cd Hoosat/explorer
# Install dependencies
npm install# Start development server
npm startThe app will open at http://localhost:3000
# Create production build
npm run buildThe optimized build will be in the build/ directory.
Create a .env file in the root directory:
REACT_APP_API=https://api.hoosat.fi
explorer/
├── public/ # Static assets
├── src/
│ ├── components/ # React components
│ ├── htn-api-client.js # API client
│ ├── App.js # Main app component
│ └── App.scss # Global styles
└── package.json
This explorer connects to the Hoosat API to fetch blockchain data. The API base URL is configured via the REACT_APP_API environment variable.
- React.memo for component memoization
- useMemo and useCallback hooks for expensive computations
- Optimized mobile rendering with disabled backdrop-blur
- Efficient WebSocket handling for real-time updates
Contributions are welcome! Please feel free to submit a Pull Request.
This project was bootstrapped with Create React App.