Charted Data.

Command Palette

Search for a command to run...

3 min readCharted Data

Getting Started with Charted Data

Everything you need to fork, customize, and deploy the ultimate data-driven blog boilerplate.

Developmentmdxcodesyntax-highlightingtutorial

Welcome to Charted Data, the professional blog engine designed for scale and data storytelling. This guide provides a high-level overview of the ecosystem and how to get your blog live in minutes.

🛠️ 1. The Core Tech Stack#

Charted Data is built with the latest, high-performance web technologies:

  • Next.js 16: Utilizing the App Router for optimal Server-Side Rendering and performance.
  • Bun: Our recommended lightning-fast JavaScript runtime and package manager.
  • Tailwind CSS 4: Cutting-edge styling with native CSS variables and optimized build speeds.
  • Neon Postgres: A serverless, scalable database for all your blog posts and metadata.
  • Expressive Code: Professional, IDE-grade syntax highlighting for technical documentation.

🚀 2. Key Features#

We provide everything you need to run a professional publishing platform out of the box:

  • Secure Admin Panel: Manage your full blog lifecycle with a browser-based CMS at /admin.
  • MDX Editor with Preview: Author articles using Markdown and see live previews as you type.
  • Native Data Visualization: Drag-and-drop interactive Bar, Line, and Area charts into your posts.
  • Static Site Search: Instant client-side search across thousands of pages via Pagefind.
  • Automated SEO: Dynamic meta tags, OpenGraph cards, and JSON-LD structured data for every page.
  • Professional Callouts: Built-in UI components for Tips, Notes, and Warnings.

🔧 3. Quick Setup Guide#

Follow these steps to get your instance running:

  1. Fork the Repository: Clone your own copy from GitHub.
  2. Install with Bun: Run bun install for a sub-5-second dependency installation.
  3. Configure Environment: Copy .env.example to .env and provide your Neon Database and Auth credentials.
  4. Launch Dev Server: Run bun run dev and open localhost:3000.
  5. Deploy to Vercel: Connect your fork to Vercel for instant, global distribution.

📊 4. The Data Philosophy#

Charted Data is engineered for Subject Matter Experts.

  • Credibility via Visualization: Use the integrated chart library to prove your claims with data.
  • Typographic-First: We prioritize readability and whitespace to ensure your message is clear.
  • Performance is SEO: sub-second load times are baked into the core to help you rank higher.

🏁 5. Next Steps#

  • Customize: Edit config/site.ts to update your site name and social links.
  • Author: Go to /admin and write your first data-driven article.
  • Deploy: Set up your Vercel project to share your insights with the world.

Build the future of data-driven blogs. Happy writing! ⚡

Download This Boilerplate ⚡