📝 Table of Contents
🎯 About
L1Beat is a real-time analytics platform designed to provide insights into Avalanche L1s. It enables users to track key performance metrics, validator details, and economic indicators.
✨ Features
Dashboard Analytics
- Track Total Value Locked (TVL) in real-time.
- Monitor Transactions Per Second (TPS).
- Explore comprehensive blockchain performance metrics.
- Interact with detailed data visualizations.
L1 Analysis
- View detailed validator information and statistics.
- Analyze stake distribution with intuitive visualizations.
- Measure network performance metrics and economic indicators.
🌐 Live Demo
Experience L1Beat in action: L1Beat.io
🛠️ Technology Stack
Frontend
- Core
- React 18.x (TypeScript)
- Vite 5.x
- React Router 6
- Tailwind CSS 3.x
- Data Visualization
- Chart.js 4.x
- react-chartjs-2
- State & Validation
- Utilities
- date-fns (Date formatting)
- lucide-react, simple-icons (Icons)
- Build & Tooling
- TypeScript 5.x
- ESLint 9.x
- PostCSS (with Autoprefixer)
🚀 Getting Started
Prerequisites
Ensure you have the following installed:
- Node.js (v18 or higher)
- npm (v9 or higher)
- TypeScript (v5 or higher)
Installation
# Clone the repository
git clone https://github.com/L1Beat/L1Beat-frontend.git
cd L1Beat-frontend
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production (with type checking)
npm run build
# Preview production build
npm run preview
Key Scripts
npm run dev: Start development server with HMRnpm run build: Production build with type checkingnpm run lint: Run ESLint with TypeScript rulesnpm run preview: Preview production build locally
