Tech Stack & Design System

Core Tech Stack

The Indian Startup Funding Tracker is built using a bleeding-edge web stack focused on performance, type safety, and a distinct visual identity.

Framework & Runtime

Next.js 15 (App Router): Utilizes the latest React 19 features, including improved Client and Server Component architecture.
TypeScript: Provides strict type safety across the data layer and component props.
Vercel Analytics: Integrated via @vercel/analytics for production insight tracking.

Styling & Design

Tailwind CSS 4: Leverages the latest version of Tailwind, utilizing the @theme block for CSS variable-based configuration and improved build performance.
Modern Color Space: Uses OKLCH color values for consistent perceived brightness and better color gamut support in modern browsers.
Typography: Features Space Grotesk for headings and the Geist sans/mono family for UI elements, ensuring high readability and a "tech-forward" aesthetic.

Design System: Neo-Brutalism

The project implements a Neo-Brutalist design system. Unlike traditional "flat" or "minimalist" UI, this style emphasizes bold borders, high-contrast shadows, and raw geometric shapes.

Utility Classes

The following custom utility classes are available for maintaining the design language:

Usage Example:

<div className="neo-border neo-shadow neo-hover p-6 bg-white">
  <h3 className="font-bold">Brutalist Card</h3>
  <p>This card uses the custom design system utilities.</p>
</div>

Data Visualization

Analytics and trends are powered by Recharts, a composable charting library. The system is configured to handle:

Time-series Analysis: Line charts for funding velocity.
Categorical Data: Bar charts for sector and stage-wise distribution.
Proportional Data: Pie charts for investor and market share.

All charts are wrapped in ResponsiveContainer to ensure they adapt to the Neo-Brutalist grid system across mobile and desktop views.

Utility Functions

The lib/utils.ts module provides public helpers for data formatting and DOM class management.

`cn(...inputs)`

A utility for merging Tailwind CSS classes safely using clsx and tailwind-merge.

import { cn } from "@/lib/utils"

// Usage
<div className={cn("base-class", isActive && "active-class", customClassName)} />

`formatFundingAmount(amount: number)`

Formats raw numerical data (stored in Lakhs) into a human-readable Indian Currency format (Crores/Billions).

Input: amount (number) - The value in Lakhs (e.g., 100 = 1 Crore).
Output: string - Formatted value with the ₹ symbol.

import { formatFundingAmount } from "@/lib/utils"

formatFundingAmount(100)    // Returns "₹1Cr"
formatFundingAmount(10000)  // Returns "₹100Cr"
formatFundingAmount(0)      // Returns "Not Disclosed"

`isFundingDisclosed(amount: number)`

A helper to determine if a deal's financial details are public.

Input: amount (number).
Output: boolean - Returns true if the amount is greater than 0.