Technical Stack & Architecture

Charted Data is built upon a modern, high-performance web development stack optimized for edge deployment, search engine visibility, and rich interactive experiences.

Here is a detailed breakdown of the tools and frameworks that power the platform.

The Core Framework

Next.js 16 (App Router)

The entire application is built on Next.js 16 utilizing the new App Router (app/ directory). This provides:

• Server Components: By default, components render on the server, sending zero JavaScript to the client for lightning-fast loads.
• Server Actions: All backend mutations (like database writes in the CMS) are handled via secure Server Actions.
• Routing: File-system based routing for intuitive page creation.

React 19

Leveraging the latest React concurrent features and optimized rendering engine, providing smooth interactions even with heavy data visualizations on the screen.

Bun runtime

We use Bun as both the package manager and the runtime. It is significantly faster than Node.js, providing near-instant dependency installation and rapid server startup.

Content & Visualization

MDX (Markdown + JSX)

Content is authored in MDX, allowing you to write standard Markdown while seamlessly embedding complex React components (like our interactive charts) directly into the flow of text.

Recharts

The data visualization engine is powered by Recharts. It is highly composable, fully responsive, and built explicitly for React, making it the perfect tool for our interactive, hoverable, and exportable charts.

Expressive Code

Used for syntax highlighting in code blocks. It provides enterprise-grade, beautiful code formatting that looks stunning out of the box.

Styling & UI

Tailwind CSS 4

Utility-first styling with zero runtime overhead. Version 4 provides a drastically simplified configuration and faster build times.

Shadcn UI & Radix UI

We utilize Shadcn UI built on top of Radix UI primitives. This gives us accessible, unstyled components that we then heavily customize. You have full ownership of the component source code in the components/ui folder.

Framer Motion

Used for subtle micro-interactions, page transition animations, and chart entrance effects to give the application a premium feel.

Lucide React

A clean, consistent icon library providing over 560+ lightweight SVG icons used throughout the dashboard and user interface.

Backend & Database

PostgreSQL (via Neon)

The primary database is a serverless Postgres instance hosted on Neon. Neon provides instant branching, separation of storage and compute, and massive scalability.

Neon Auth

Authentication is handled natively by Neon Auth, providing a secure, passwordless (magic link/email) authentication system right out of the box with zero external dependencies like Clerk or Auth0.

pg driver

We connect to Postgres using the native pg driver with connection pooling configured for optimal performance in serverless environments.

Search & Discovery

Pagefind

A fully static search engine that runs entirely in the browser. It consumes zero backend bandwidth and provides instant, full-text search across all blog posts and charts.

JSON-LD Schema

Automatic generation of Schema.org structured data to ensure Google and other search engines perfectly understand your pages.