https://github.com/boopi7/cardano-explorer
A lightweight, vanilla JavaScript block explorer for the Cardano blockchain using the Blockfrost API. This project demonstrates building a secure client-server application with real-time blockchain data display.
https://github.com/boopi7/cardano-explorer
css html javascript
Last synced: about 16 hours ago
JSON representation
A lightweight, vanilla JavaScript block explorer for the Cardano blockchain using the Blockfrost API. This project demonstrates building a secure client-server application with real-time blockchain data display.
- Host: GitHub
- URL: https://github.com/boopi7/cardano-explorer
- Owner: Boopi7
- Created: 2025-11-02T09:43:24.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-11-02T09:43:24.000Z (8 months ago)
- Last Synced: 2026-02-17T20:51:44.124Z (5 months ago)
- Topics: css, html, javascript
- Language: JavaScript
- Homepage: https://www.web3studio.dev/
- Size: 2.02 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Security: docs/SECURITY.md
Awesome Lists containing this project
README
# Cardano Block Explorer
A lightweight, high-performance block explorer for the Cardano blockchain built with vanilla JavaScript and the Blockfrost API. This application provides real-time blockchain data visualization with robust security features and a clean, responsive interface.
```mermaid
graph TD
A[Client Application] --> B[API Layer]
B --> C[Service Layer]
C --> D[Blockfrost API]
```
## 🚀 Features
### Real-time Block Information
- Latest block data auto-refresh
- Detailed block information display
- Transaction list viewing with pagination
- Block navigation and search
- Advanced transaction details with UTXO tracking
- Address tracking and balance display
### Performance Optimized
- Efficient DOM updates with modular renderers
- Debounced search and event handlers
- Optimized rendering cycles
- BigInt support for precise calculations
- Smart date formatting and validation
- Responsive UI components
### Security First
- Rate limiting protection
- Secure headers (Helmet)
- CORS protection
- API key validation
- Input validation and sanitization
- Error handling and logging
- Type checking and validation
For detailed security information, see [SECURITY.md](docs/SECURITY.md).
### Clean UI/UX
- Responsive design with mobile support
- Enhanced loading states
- Comprehensive error handling
- Clear navigation with breadcrumbs
- Smooth transitions
- Copy-to-clipboard functionality
- Warning/Error differentiation
## 🛠️ Prerequisites
- Node.js (v18 or higher)
- npm (v8 or higher)
- Blockfrost API key ([Get one here](https://blockfrost.io))
## 📦 Installation
1. Clone the repository:
```bash
git clone https://github.com/Jimmyh-world/cardano-explorer.git
cd cardano-block-explorer
```
2. Install dependencies:
```bash
npm install
```
3. Create `.env` file:
```env
BLOCKFROST_API_KEY=your_api_key_here
NODE_ENV=development
```
## 🚀 Deployment Options
### Local Development
```bash
# Start the development server
npm run dev
# The application will be available at http://localhost:3001
```
### Production Deployment (Vercel)
1. Connect your repository to Vercel
2. Set environment variables in Vercel dashboard
3. Deploy using the provided `vercel.json` configuration
For detailed deployment information, see [TECHNICAL.md](/docs/TECHNICAL.md#deployment-process).
## 🏗️ Project Structure
```
cardano-block-explorer/
├── server/
│ ├── middleware/ # Error handling, validation, and async handlers
│ │ ├── errorHandler.js # Centralized error handling
│ │ ├── asyncHandler.js # Async operation wrapper
│ │ └── validators.js # Input validation
│ ├── services/ # Business logic and external services
│ │ └── blockfrost/ # Blockfrost API integration
│ ├── utils/ # Server utilities
│ │ ├── APIError.js # Custom error handling
│ │ └── validators.js # Validation utilities
│ └── server.js # Express server setup
├── public/ # Client-side assets
│ ├── js/ # JavaScript modules
│ │ ├── api.js # API client
│ │ ├── utils.js # Client utilities
│ │ ├── main.js # Application entry
│ │ ├── wallet.js # Wallet functionality
│ │ ├── ui.js # UI controllers
│ │ └── renderers/ # UI components
│ │ ├── shared.js # Shared components
│ │ ├── search.js # Search functionality
│ │ └── transactions.js # Transaction views
│ ├── css/ # Stylesheets
│ │ ├── modules/ # CSS modules
│ │ └── styles.css # Main styles
│ └── assets/ # Static assets
│ ├── images/ # Image resources
│ └── icons/ # Icon assets
├── docs/ # Documentation
│ ├── ARCHITECTURE.md # System architecture
│ ├── TECHNICAL.md # Technical details
│ ├── API.md # API documentation
│ └── SECURITY.md # Security guidelines
├
├── vercel.json # Vercel configuration
└── index.html # Entry point
```
For detailed architecture information, see [ARCHITECTURE.md](/docs/ARCHITECTURE.md).
## 🔒 Security Features
For comprehensive security documentation, see [SECURITY.md](/docs/SECURITY.md).
Key security features include:
- Rate limiting (100 requests per 15 minutes)
- HTTP security headers via Helmet
- CORS protection with environment config
- API key validation and security
- Comprehensive error handling
- Input validation and sanitization
- Production error sanitization
- Secure number handling with BigInt
## 📚 Documentation
- [Architecture Overview](docs/ARCHITECTURE.md)
- [Technical Documentation](docs/TECHNICAL.md)
- [API Documentation](docs/API.md)
- [Security Guidelines](docs/SECURITY.md)
## 🧪 Testing
For detailed API testing information, see [API.md](/docs/API.md#testing).
Quick test examples:
```bash
# Get latest block
curl http://localhost:3001/api/blocks/latest | json_pp
# Get specific block
curl http://localhost:3001/api/blocks/{block_hash} | json_pp
# Get block transactions
curl http://localhost:3001/api/blocks/{block_hash}/transactions | json_pp
# Get transaction details
curl http://localhost:3001/api/tx/{tx_hash} | json_pp
# Search
curl http://localhost:3001/api/blocks/search?q={query} | json_pp
```
## 🤝 Contributing
1. Fork the repository
2. Create your feature branch
3. Follow code style guidelines:
- Use meaningful variable names
- Add JSDoc comments
- Follow type checking practices
- Update documentation
- Test thoroughly
4. Submit a pull request
For detailed contribution guidelines, see [TECHNICAL.md](/docs/TECHNICAL.md#contributing-guidelines).
## 📧 Contact
James Barclay - jamesqbarclay@gmail.com
## 🗺️ Roadmap
Upcoming Features:
- [ ] Asset information display
- [ ] Stake pool integration
- [ ] WebSocket updates
- [ ] Caching layer
- [ ] TypeScript migration
For detailed enhancement plans, see [TECHNICAL.md](/docs/TECHNICAL.md#future-enhancements).