WebTech Stack

Tech Stack

The Quper web frontend is a multi-tenant Next.js application built with modern React patterns. Below is the full technology inventory with rationale for each choice.

Framework

Next.js 16

App Router, React Server Components, static generation for public pages

Language

TypeScript 5

Strict mode enabled across the entire codebase for type safety

Styling

Tailwind CSS v3 + shadcn/ui

Utility-first CSS with a component library built on Radix UI primitives

State Management

React 19 useState / useContext

No external state library — server components eliminate most client state needs

Charts

Recharts

Line, bar, scatter, and pie charts for FinOps dashboards

Auth

Auth0

JWT-based authentication with session cookies and middleware route protection

AI Chat Rendering

react-markdown + remark-gfm

Renders Vidura agent responses with tables, code blocks, and formatting

Icons

Lucide React

Consistent icon set used throughout the UI

Theme

next-themes

Dark / light mode switching with .dark class toggle and system preference detection

API Client

fetch (native)

No axios or additional HTTP libraries — native fetch with custom wrapper

Deployment

Vercel / Docker

Deployed to Vercel for preview branches; Docker for on-premise deployments

Server vs. Client Components

The frontend is a multi-tenant Next.js App Router application. Each route segment is a React Server Component by default — data fetching happens on the server with no client-side loading states. Client components are marked with 'use client' only for interactive elements: charts, forms, modals, and the Vidura chat interface.

Dependency Philosophy

The team deliberately minimizes third-party dependencies. Key decisions:

No Redux or Zustand — React Server Components eliminate most global state. useContext handles the remaining shared state (active environment, theme).
No axios — Native fetch with a thin wrapper handles auth headers and error normalization.
No date library — Native Intl.DateTimeFormat and Date cover all formatting needs.
shadcn/ui instead of full component libraries — Components are copied into the codebase and owned by the team, not fetched from npm at runtime.