Skip to content

frontend

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

frontend

README.md

💎 AdaStat.net Cardano Blockchain Explorer - User Interface

A modern and fast Single Page Application (SPA) for the Cardano Blockchain Explorer, built with Vue 3 and Vite. It provides real-time insights into all the Cardano Blockhain data.

🚀 Tech Stack

  • Framework: Vue 3 (Composition API) with Vue Router and TypeScript.
  • Bundler: Vite 7 with LightningCSS and Terser for heavy production minification.
  • Styling: Tailwind CSS v4.
  • Visualizations: Chart.js, Vue-ECharts, D3-hierarchy, and Matter-js.

🛠 Prerequisites

  • Node.js: v22.x or higher.
  • Package Manager: pnpm is recommended (due to specific native dependency configurations).

⚙️ Setup & Configuration

Install dependencies:

pnpm install

Environment Variables:

Create a .env file in the root of the backend directory. You can use .env.example as a starting template:

cp .env.example .env

🏃 Running the Application

Development

You can run the development server for any specific network by passing the mode flag:

  • Mainnet (Default): pnpm run dev
  • Preprod Testnet: pnpm run dev:preprod
  • Preview Testnet: pnpm run dev:preview

Note: To clear the cache and force Vite to re-bundle optimize dependencies, append "-force" to the commands (e.g., pnpm run dev-force:preprod). The local server will run on http://localhost:5173 by default.

Production

The build process automatically runs TypeScript type-checking and compiles files with heavy minification and asset sorting (outputs are organized into subfolders like js/, css/, images/, and fonts/).

  • Build for Mainnet: pnpm run build
  • Build for Preprod: pnpm run build:preprod
  • Build for Preview: pnpm run build:preview

To locally preview your production build run: pnpm run preview (or preview:preprod / preview:preview)

Code Quality and Linting

Keep the codebase clean using built-in formatting tools:

  • Type checking: pnpm run type-check
  • Linting & auto-fixing: pnpm run lint
  • Code formatting: pnpm run format

🧩 Customizing Proxy & Environment

You can easily adjust development ports and backend proxy targets in your root .env file:

  • HOST and PORT — Customize your local dev server host/port.
  • PROXY_API_TARGET — Target URL for REST API forwarding (Defaults to http://localhost:7828).
  • PROXY_SOCKET_TARGET — Target URL for WebSocket forwarding (Defaults to ws://localhost:7828).

📜 License & Author

  • License: Apache-2.0.
  • Author: AdaStat Team (adastat.net).
⚡