How the Akash Console Website (deploy-web) Functions: Architecture and Technology Stack

The Akash Console website is a standalone Next.js 14 Progressive Web App built with TypeScript and React 18, located in the apps/deploy-web directory, featuring server-side rendering, Auth0 authentication, Cosmos-Kit wallet integration, and packaged as a standalone Docker image.

The Akash Console serves as the primary web interface for deploying workloads on the Akash Network. Located in the apps/deploy-web directory of the akash-network/console repository, this deploy-web application combines modern React patterns with blockchain-specific integrations. Understanding its architecture reveals how it bridges traditional web development with decentralized cloud computing infrastructure.

Core Technology Stack

Next.js 14 Framework and Routing

The application is built on Next.js 14, utilizing the pages router convention with file-based routing under src/pages/*.tsx. The next.config.js file configures PWA support via next-pwa, Sentry integration for error tracking, bundle analysis, and custom webpack handling. For deployment flexibility, the configuration sets output: "standalone", enabling the app to run as a single Docker container or directly on a VM without requiring the full Next.js development environment.

TypeScript and React 18 UI Layer

The frontend is written in strict TypeScript (tsx/ts files) and compiled via the scripts defined in package.json. React 18 powers the component architecture, styled with a combination of TailwindCSS for utility classes, Emotion for CSS-in-JS, Material-UI (MUI) for component primitives, and Geist for typography. The @akashnetwork/ui library provides shared components imported throughout the application, as seen in src/pages/_app.tsx where global styles and UI providers are initialized.

State Management and Data Fetching

Server data caching relies on React-Query (@tanstack/react-query), while local reactive state uses Jotai atoms. Zod handles runtime validation. Unlike traditional web apps that might use GraphQL, the Akash Console communicates directly with the blockchain via the Akash SDK (@akashnetwork/chain-sdk and @akashnetwork/http-sdk). Wallet integration leverages Cosmos-Kit (@cosmos-kit/*) alongside custom utilities in src/utils/walletUtils.ts to connect providers like Keplr and Leap.

Authentication and Feature Management

User sessions are managed through Auth0 using @auth0/nextjs-auth0, with Next.js API routes handling session persistence. The next.config.js includes specific aliases to ensure the Auth0 session module functions correctly on the server side. Unleash provides remote feature flag capabilities, with local development able to force-enable all flags using NEXT_PUBLIC_UNLEASH_ENABLE_ALL=true.

Analytics and Monitoring

The application implements comprehensive observability through Google Analytics (via nextjs-google-analytics) and Sentry for error tracking with automatic source-map upload. The src/components/layout/CustomGoogleAnalytics.tsx component specifically handles web vitals reporting, capturing metrics like CLS, FID, and LCP to monitor performance in production environments.

Progressive Web App Capabilities

Configured as a Progressive Web App (PWA), the deploy-web app uses next-pwa to generate a service worker and cache static assets in the public/ directory. This enables offline support and allows users to install the Console as a native-like application on supported devices.

Application Structure and Key Files

Understanding the codebase requires familiarity with these critical files:

• apps/deploy-web/package.json – Lists all runtime and development dependencies including React, Next.js, Auth0, Cosmos-Kit, and state management libraries.

• apps/deploy-web/next.config.js – Configures Next.js behavior, PWA settings, Sentry integration, custom webpack rules, and environment variables required for standalone output.

• apps/deploy-web/src/pages/_app.tsx – The root application component that sets up global providers for theme, analytics, navigation guards, wallet connections, and internationalization.

• apps/deploy-web/src/pages/index.tsx – The homepage entry point that renders the main dashboard through the HomeContainer component.

• apps/deploy-web/src/components/layout/CustomGoogleAnalytics.tsx – Implements Google Analytics tracking with web vitals reporting.

• apps/deploy-web/README.md – Contains quick start instructions, feature flag documentation, and Cosmos SDK version requirements.

Request Flow and Rendering Process

The deploy-web application follows this execution path for each user interaction:

1. HTTP Request Handling – The Next.js server (Node.js) receives the request and resolves the route based on the pages/ directory structure.

2. Page Resolution – For the home page, src/pages/index.tsx loads and renders the <HomeContainer /> component.

3. Data Fetching – Components invoke React-Query hooks that request data from Akash REST and RPC endpoints via the Akash SDK.

4. Authentication Check – Protected routes pass through Auth0 session middleware to verify user credentials before rendering.

5. Provider Wrapping – The component tree is wrapped by context providers defined in _app.tsx, including wallet state, feature flags, theme settings, and analytics.

6. Server-Side Rendering – The complete HTML is generated on the server and sent to the browser, where React hydrates the interactive elements.

7. Asset Caching – The PWA service worker (generated by next-pwa) caches static assets for subsequent visits and offline functionality.

8. Feature Evaluation – Unleash evaluates feature flags to conditionally render functionality; locally, all flags can be treated as enabled.

9. Analytics Tracking – Google Analytics records page views and web vital metrics through the CustomGoogleAnalytics component.

10. Error Reporting – Any runtime errors are captured and sent to Sentry if the appropriate environment variables are configured.

Implementation Examples

Minimal Page Component Structure

The following demonstrates the simplicity of adding new pages in the Next.js pages router:

// src/pages/index.tsx
import React from "react";
import { HomeContainer } from "@src/components/home/HomeContainer";

export default function Home() {
  // Server‑rendered page that simply shows the main dashboard
  return <HomeContainer />;
}

This file serves as the application entry point, importing the main dashboard container from the components directory.

Root Application Wrapper

The _app.tsx file reveals the full technology stack through its provider hierarchy:

// src/pages/_app.tsx
import "@akashnetwork/ui/styles";
import "nprogress/nprogress.css";
import "../styles/index.css";

import React from "react";
import { TooltipProvider } from "@akashnetwork/ui/components";
import { CustomSnackbarProvider, PopupProvider } from "@akashnetwork/ui/context";
import { cn } from "@akashnetwork/ui/utils";
import { AppCacheProvider } from "@mui/material-nextjs/v14-pagesRouter";
import { QueryClientProvider } from "@tanstack/react-query";
import { GeistSans } from "geist/font/sans";
import { Provider as JotaiProvider } from "jotai";
import type { AppProps } from "next/app";
import Router from "next/router";
import { NavigationGuardProvider } from "next-navigation-guard";
import type { NextSeoProps } from "next-seo/lib/types";
import { ThemeProvider } from "next-themes";
import NProgress from "nprogress";

import GoogleAnalytics from "@src/components/layout/CustomGoogleAnalytics";
import { CustomIntlProvider } from "@src/components/layout/CustomIntlProvider";
import { PageHead } from "@src/components/layout/PageHead";
import { OnboardingRedirectEffect } from "@src/components/onboarding/OnboardingRedirectEffect/OnboardingRedirectEffect";
import { UserProviders } from "@src/components/user/UserProviders/UserProviders";
import { WalletProvider } from "@src/context/WalletProvider";
import { store } from "@src/store/global-store";

/* ... NProgress setup omitted for brevity ... */

export default function App({ Component, pageProps }: AppProps) {
  return (
    <AppRoot>
      <GoogleAnalytics />
      <UserProviders>
        <WalletProvider>
          <NavigationGuardProvider>
            <OnboardingRedirectEffect />
            <Component {...pageProps} />
          </NavigationGuardProvider>
        </WalletProvider>
      </UserProviders>
    </AppRoot>
  );
}

This configuration establishes the Emotion cache for Material-UI, initializes the React-Query client, sets up Jotai state management, and wraps the application in authentication and wallet contexts.

Analytics and Web Vitals Integration

The Google Analytics implementation demonstrates modern Next.js analytics patterns:

// src/components/layout/CustomGoogleAnalytics.tsx
"use client";
import { useReportWebVitals } from "next/web-vitals";
import { event, GoogleAnalytics as GAnalytics } from "nextjs-google-analytics";
import { useServices } from "@src/context/ServicesProvider";

export default function GoogleAnalytics() {
  const { publicConfig } = useServices();

  useReportWebVitals(({ id, name, label, value }) => {
    event(name, {
      category: label === "web-vital" ? "Web Vitals" : "Next.js custom metric",
      value: Math.round(name === "CLS" ? value * 1000 : value),
      label: id,
      nonInteraction: true,
    });
  });

  // Render the GA component only when the env flag enables it
  return <>{!!publicConfig.NEXT_PUBLIC_GA_ENABLED && <GAnalytics trackPageViews />}</>;
}

This component captures Core Web Vitals and reports them as Google Analytics events, with conditional rendering based on environment configuration.

Summary

• The Akash Console deploy-web application is a Next.js 14 application using the pages router, located in apps/deploy-web.
• It utilizes TypeScript, React 18, TailwindCSS, MUI, and Emotion for the frontend stack.
• Auth0 handles authentication, while Cosmos-Kit manages blockchain wallet connections.
• React-Query and Jotai provide state management, with Zod for validation.
• The app is packaged as a standalone Docker image with PWA capabilities via next-pwa.
• Unleash manages feature flags, and Sentry combined with Google Analytics provides observability.

Frequently Asked Questions

What framework powers the Akash Console deploy-web application?

The application is built on Next.js 14 with TypeScript, utilizing the pages router for file-based routing. It renders React components on both server and client sides, supporting server-side generation and API routes for backend functionality.

How does the Console website handle authentication and wallet connections?

The deploy-web app uses Auth0 (@auth0/nextjs-auth0) for user session management and Cosmos-Kit (@cosmos-kit/*) for blockchain wallet integration. The WalletProvider context in src/context/WalletProvider wires together wallet utilities from src/utils/walletUtils.ts to support Keplr, Leap, and other Cosmos ecosystem wallets.

Can the Akash Console run offline or as a standalone application?

Yes, the deploy-web functions as a Progressive Web App (PWA). The next-pwa configuration in next.config.js generates a service worker that caches static assets, enabling offline functionality and allowing users to install the Console as a native-like app on their devices.

What monitoring and analytics tools does the deploy-web app use?

The application implements Google Analytics via nextjs-google-analytics for traffic analysis and Sentry for error tracking and performance monitoring. The CustomGoogleAnalytics component specifically reports Core Web Vitals metrics to track application performance in real-time.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}