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

> Explore the Akash Console website's architecture and technology stack. Learn how this Next.js 14 PWA, built with TypeScript and React, integrates Auth0 and Cosmos-Kit wallet.

- Repository: [Akash Network/console](https://github.com/akash-network/console)
- Tags: architecture
- Published: 2026-02-24

---

**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`](https://github.com/akash-network/console/blob/main/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`](https://github.com/akash-network/console/blob/main/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`](https://github.com/akash-network/console/blob/main/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`](https://github.com/akash-network/console/blob/main/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`](https://github.com/akash-network/console/blob/main/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`](https://github.com/akash-network/console/blob/main/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`](https://github.com/akash-network/console/blob/main/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`](https://github.com/akash-network/console/blob/main/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`](https://github.com/akash-network/console/blob/main/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`](https://github.com/akash-network/console/blob/main/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`](https://github.com/akash-network/console/blob/main/apps/deploy-web/src/components/layout/CustomGoogleAnalytics.tsx)** – Implements Google Analytics tracking with web vitals reporting.

- **[`apps/deploy-web/README.md`](https://github.com/akash-network/console/blob/main/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`](https://github.com/akash-network/console/blob/main/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`](https://github.com/akash-network/console/blob/main/_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:

```tsx
// 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`](https://github.com/akash-network/console/blob/main/_app.tsx) file reveals the full technology stack through its provider hierarchy:

```tsx
// 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:

```tsx
// 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`](https://github.com/akash-network/console/blob/main/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`](https://github.com/akash-network/console/blob/main/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.