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/analyticsfor production insight tracking.
Styling & Design
- Tailwind CSS 4: Leverages the latest version of Tailwind, utilizing the
@themeblock 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:
| Class | Description |
| :--- | :--- |
| neo-border | Applies a thick (4px) solid black border. |
| neo-border-accent | Applies a thick (4px) solid green border (#1a5d1a). |
| neo-shadow | Adds a hard, non-blurred offset shadow for a 3D effect. |
| neo-hover | A transition utility that shifts the element and deepens the shadow on hover. |
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- Returnstrueif the amount is greater than 0.