About.
The story behind Charted Data and why this blog exists.
Charted Data is a billion-dollar-aesthetic, typographic-first blog toolkit engineered for speed, advanced content management, and professional data storytelling.
Architecture & Backend
Unlike many other templates, Charted Data is designed for scale and dynamic management. The platform is powered by a Serverless PostgreSQL database (via Neon) which serves as the single source of truth for all primary content.
- Data Storage — All blog posts, including their metadata and content, are stored in a
blogstable in PostgreSQL. - Admin Interface — Content is managed through a secure Admin Dashboard that performs full CRUD operations on the database.
- Authentication — Secure access is handled via Neon Auth using Email OTP for authorized administrators.
While the primary content is database-driven, we provide a content/blog/ directory in the repository. This directory is strictly for examples and documentation. These local MDX files serve as a reference for available components and formatting options.
How it Works
Every article you write can include interactive React components—from dynamic charts to complex UI blocks—all written using standard Markdown syntax stored within the database. The system uses high-performance Regex to detect these blocks and inject the corresponding React components safely.
Key Features
- Interactive Charts — Render beautiful, data-driven charts directly in your content using Recharts. Check out the interactive guide.
- Database CMS — Manage all your content from a browser-based dashboard.
- Full SEO — Comprehensive meta tags, Open Graph, Twitter cards, and JSON-LD structured data.
- Light/Dark Mode — Automatic theme switching based on system preferences.
- Search — Fast, full-text static search powered by Pagefind.
- RSS Feed — Automated feed generation at /feed.xml.
- Syntax Highlighting — Beautiful code blocks with line numbers and copy functionality.
- Table of Contents — Auto-generated TOC with active section highlighting.
Technology Stack
- Next.js 16 — React framework with App Router for ultimate performance.
- TypeScript — Robust, type-safe development.
- Tailwind CSS v4 — Cutting-edge utility-first CSS.
- Neon Postgres — Scalable, serverless database backend.
- Shadcn UI — Accessible and elegant component primitives.
- Framer Motion — Smooth, professional animations.
- Pagefind — Lightning-fast site-wide search.
Examples & Inspiration
To see the full capabilities of the platform, check out the provided samples: