L1Beat

📝 Table of Contents

• About
• Features
• Live Demo
• Technology Stack
• Getting Started

🎯 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
  • Zod (Schema 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 HMR
• npm run build: Production build with type checking
• npm run lint: Run ESLint with TypeScript rules
• npm run preview: Preview production build locally