Injective-MiniDashboard
A lightweight Injective market dashboard featuring live price tracking, real-time orderbook depth, recent trades, spreads, and on-chain candlestick charts — built with React and Tailwind.
Videos
Descripción
This project is a lightweight Injective market analytics dashboard designed to visualize real-time on-chain trading activity in a clear and accessible way.
The application provides a live view of Injective markets, combining current price tracking, orderbook depth visualization, recent trades, bid–ask spread analysis, and on-chain candlestick charts derived directly from trade data. All market data updates automatically at short intervals, delivering a responsive, near–real-time experience without relying on centralized price feeds.
Built with React and Tailwind CSS, the dashboard emphasizes performance, clarity, and minimalism. Subtle animations highlight live updates across prices, trades, and orderbook changes, helping users quickly identify market movement while keeping the interface clean and readable.
Rather than aiming to be a full trading platform, this project serves as a compact market terminal and a reference implementation for developers interested in consuming and visualizing Injective data. It demonstrates how raw on-chain data can be transformed into practical market insights using simple, modern frontend tooling.
Core Features
Real-time Injective market data
Live price widget with 24h high / low
Orderbook depth with bid–ask spread calculation
Recent trades feed with side indicators
OHLC candlestick charts built from on-chain trades
Automatic refresh and update animations
Responsive UI built with React and Tailwind CSS
Use Cases
Learning how to consume Injective market data
Embedding a lightweight market widget
Prototyping analytics or trading dashboards
Hackathon and demo reference implementation
Progreso del hackathon
This project was built during the 2025 Builder Break: Chill Building Weeks hackathon in an incremental, feature-driven approach. Phase 1 – Project Setup & Market Integration Set up a React + Tailwind CSS frontend optimized for rapid iteration Integrated Injective market APIs to fetch live trades, orderbook data, and market metadata Implemented auto-refresh logic to keep data in sync without manual reloads Phase 2 – Core Market Widgets Built a real-time Price Widget with live updates and 24h high/low calculations Implemented a Recent Trades table with side indicators and time-based formatting Added subtle animations to visually highlight new trades and price changes Phase 3 – Orderbook & Depth Visualization Developed a dynamic Orderbook with bid/ask depth bars Implemented real-time spread and spread percentage calculations Added update indicators to signal live data changes without overwhelming the UI Phase 4 – Candlestick Charts Generated OHLC candlestick data directly from on-chain trades Visualized price action across configurable timeframes Ensured chart data stays consistent with live trade updates Phase 5 – UX Polish & Stability Improved loading and error states across all components Added responsive layout adjustments for different screen sizes Refined animations and visual hierarchy for clarity and readability Ensured the app remains performant under frequent data updates
Pila tecnológica
Estado de recaudación de fondos
no fundraising