Pulse-Analytics — Next.js 后台模板

SHA-256: 1539007254aa90520febb6a8a20ee1d563a3895a216b97253b896b9438579737

2026-10-15T12:02:53.641Z

<div align="center">

# Pulse Analytics

**A free, open-source Next.js 16 SaaS template — marketing site *and* a working dashboard.**

All six charts included. No chart library installed.

[![Next.js](https://img.shields.io/badge/Next.js-16.3-000000?logo=nextdotjs)](https://nextjs.org)
[![React](https://img.shields.io/badge/React-19-087ea4?logo=react)](https://react.dev)
[![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6?logo=typescript)](https://www.typescriptlang.org)
[![VivekUI](https://img.shields.io/npm/v/@the_viveksingh/vivek-ui?color=6d28d9&label=VivekUI)](https://www.npmjs.com/package/@the_viveksingh/vivek-ui)
[![runtime deps](https://img.shields.io/badge/UI%20runtime%20deps-0-6d28d9)](#zero-runtime-ui-dependencies)
[![licence](https://img.shields.io/badge/licence-MIT-6d28d9)](LICENSE)

### [**Live demo →**](https://pulseanalytics.vivekkumarsingh.in)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fintellectwithvivek%2FPulse-Analytics)

</div>

![Pulse — free Next.js SaaS template with a dashboard and charts](https://pulseanalytics.vivekkumarsingh.in/opengraph-image)

> The card above is generated by [`app/opengraph-image.tsx`](app/opengraph-image.tsx) at
> build time from the same revenue series the dashboard plots — not a stock image. For a
> real screenshot of `/dashboard`, drop one at `public/screenshot.png` and reference it
> here.

---

## What this is

A complete, production-shaped template for a product-analytics SaaS, built to show what
[VivekUI](https://ui.vivekkumarsingh.in/docs?utm_source=vivekui-template&utm_campaign=saas&utm_medium=readme)
can do without any other UI dependency:

- A **marketing site** — hero, logo cloud, features, stats, testimonials, pricing, FAQ,
  CTA, newsletter, footer.
- A **mock logged-in dashboard** — KPI cards, six chart types, a data table, a Kanban
  board, and a reports view with a date range and an export.
- **SEO and AEO wiring** — per-route Metadata API with canonicals, `sitemap.ts`,
  `robots.ts` (AI crawlers named and allowed), a generated OG card, a web app manifest,
  and `WebSite` + `SoftwareApplication` + `SoftwareSourceCode` + `Offer` + `FAQPage` +
  `BreadcrumbList` + `Person` JSON-LD, plus `public/llms.txt`.

The hero "screenshot" is the detail worth clicking through for: it is **not an image**. It
is a live `AreaChart` and four live `Sparkline`s inside a framed panel, server-rendered
from the same mock data the dashboard uses. The product demo *is* the hero.

## Quick start

Requires **Node.js 20.9+** (22 LTS recommended).

```bash
git clone https://github.com/intellectwithvivek/Pulse-Analytics.git
cd Pulse-Analytics
npm install
npm run dev
```

Open <http://localhost:3000>. There is no `.env` to fill in and no database to start —
every number lives in typed modules under [`data/`](data/).

Before deploying, set your own domain in [`lib/site.ts`](lib/site.ts) — `SITE.url` is what
`metadataBase`, the canonical URLs, the sitemap and every JSON-LD node are built from.

## Make it yours

Five files cover almost everything. In the order you will want them:

| # | File | What to change |
| --- | --- | --- |
| 1 | [`lib/site.ts`](lib/site.ts) | Domain, repo URL, product name. **Change `SITE.url` first** — `metadataBase`, every canonical tag, the sitemap, the manifest and all JSON-LD derive from it. |
| 2 | [`data/`](data/) | `analytics.ts`, `customers.ts`, `roadmap.ts` — every number on the site, as typed modules. |
| 3 | [`lib/content.ts`](lib/content.ts) | Pricing plans, the comparison matrix, and the FAQ (which also feeds the `FAQPage` schema, so the two cannot disagree). |
| 4 | [`app/globals.css`](app/globals.css) | The accent, in about eight custom properties at the top of the file. |
| 5 | [`components/site/logo.tsx`](components/site/logo.tsx) + [`app/icon.svg`](app/icon.svg) + [`app/opengraph-image.tsx`](app/opengraph-image.tsx) | The brand: navbar mark, favicon, social card. |

### Rebranding checklist

- [ ] `SITE.url` and `SITE.repo` in `lib/site.ts`
- [ ] Swap the mark in `components/site/logo.tsx`, `app/icon.svg`, `public/logo.svg` and `public/logo-mark.svg`
      (all three share one path — `M4 18h4.5l2.5-6 3 11 3.5-14 3 9H28`)
- [ ] Accent tokens in `app/globals.css` (`--vk-color-primary`, `--vk-chart-1`)
- [ ] `theme_color` in [`app/manifest.ts`](app/manifest.ts) and `themeColor` in `app/layout.tsx`
- [ ] Copy in `app/page.tsx`, `lib/content.ts` and `public/llms.txt`
- [ ] Point the footer credit wherever you like, or remove it — MIT, no attribution required

### Brand assets

| Asset | Source | Served at |
| --- | --- | --- |
| Favicon | [`app/icon.svg`](app/icon.svg) | `/icon.svg` |
| iOS home screen | [`app/apple-icon.tsx`](app/apple-icon.tsx) (generated PNG) | `/apple-icon` |
| Social card | [`app/opengraph-image.tsx`](app/opengraph-image.tsx) (generated PNG) | `/opengraph-image` |
| Full logo | [`public/logo.svg`](public/logo.svg) | `/logo.svg` |
| Mark only | [`public/logo-mark.svg`](public/logo-mark.svg) | `/logo-mark.svg` |
| Manifest | [`app/manifest.ts`](app/manifest.ts) | `/manifest.webmanifest` |

The two generated images use the Geist faces committed under `assets/`. `next/og` bundles
only Geist *Regular*, so without a real 700 face every bold weight silently renders as
regular — which is why the files are in the repo rather than fetched at build time.

## Routes

| Route | What it demonstrates |
| --- | --- |
| `/` | Hero with a live chart panel, logo cloud, features, stats, testimonials, pricing preview, FAQ, CTA, newsletter |
| `/pricing` | Three tiers, a monthly/yearly `Switch`, a feature comparison `Table`, an FAQ |
| `/dashboard` | **All six charts** — four KPI cards with sparklines, area, bar, line, pie, progress rings, activity timeline |
| `/dashboard/customers` | `DataTable` — sortable, searchable, paginated, selectable, with row actions and an empty state |
| `/dashboard/roadmap` | `KanbanBoard` with drag-and-drop, WIP limits, and a full keyboard move path |
| `/dashboard/reports` | Date range, four-chart grid, export → `Toast` |
| `/built-with` | Every component mapped to the section it draws, deep-linked to its docs |

## The six charts

| Chart | Where |
| --- | --- |
| [`AreaChart`](https://ui.vivekkumarsingh.in/docs/charts/area-chart) | Hero panel · dashboard revenue · reports |
| [`BarChart`](https://ui.vivekkumarsingh.in/docs/charts/bar-chart) | Signups by channel · feature adoption (horizontal) |
| [`LineChart`](https://ui.vivekkumarsingh.in/docs/charts/line-chart) | Retention across three cohorts |
| [`PieChart`](https://ui.vivekkumarsingh.in/docs/charts/pie-chart) | Plan mix, as a donut |
| [`ProgressRing`](https://ui.vivekkumarsingh.in/docs/charts/progress-ring) | Three quarterly goals |
| [`Sparkline`](https://ui.vivekkumarsingh.in/docs/charts/sparkline) | The trend inside each KPI card |

They are pure SVG with no measurement step, so **every one renders in a React Server
Component** — view source on `/dashboard` and the paths are already in the HTML. Each also
emits a visually hidden data table, and tells series apart by dash pattern and marker
shape as well as colour, so they stay readable in greyscale and with any form of colour
blindness.

### Zero runtime UI dependencies

```jsonc
// package.json — dependencies, in full
{
  "@the_viveksingh/vivek-ui": "^0.5.0",
  "next": "16.3.2",
  "react": "19.2.8",
  "react-dom": "19.2.8"
}
```

No Tailwind, no PostCSS plugin, no shadcn, no MUI. No Recharts, no Chart.js, no D3. Setup
is one install and two CSS imports in [`app/layout.tsx`](app/layout.tsx):

```tsx
import '@the_viveksingh/vivek-ui/styles.css'
import '@the_viveksingh/vivek-ui/charts.css'  // charts ship as a separate entry point
```

## Project layout

```
app/
  layout.tsx              root layout — fonts, theme, viewport, WebSite + SourceCode JSON-LD
  page.tsx                marketing homepage
  globals.css             the Violet accent, and this site's own CSS
  icon.svg                favicon
  apple-icon.tsx          generated 180x180 iOS icon
  opengraph-image.tsx     generated 1200x630 social card
  manifest.ts  sitemap.ts  robots.ts
  pricing/                plans, comparison table, FAQ
  built-with/             the component map
  dashboard/
    layout.tsx            wraps every dashboard page in the shell
    page.tsx              all six charts
    loading.tsx           Skeleton state matched to the real layout
    customers/ roadmap/ reports/
components/
  site/                   logo, navbar, footer, install snippet, JSON-LD helpers
  marketing/              hero panel, pricing tiers, logos, newsletter
  dashboard/              shell, KPI card, tables, board, reports, icons
data/                     typed mock series — swap these for your API
lib/                      site config, UTM helpers, copy, component inventory
assets/                   Geist 400/700 TTF, for the generated images only
public/
  llms.txt                attribution and structure, for answer engines
  logo.svg  icon.svg      brand assets at stable paths
```

## Theming

Every value is a CSS custom property, so the whole library re-skins from one block —
see the top of [`app/globals.css`](app/globals.css):

```css
:root {
  --vk-color-primary: #6d28d9;   /* Violet, 7:1 against white */
  --vk-chart-1: #6d28d9;         /* what Sparkline and ProgressRing default to */
}
```

Marketing pages are light-first and the dashboard is dark-first. There is one
`ThemeProvider` for the site, so the dashboard takes the global theme unless the visitor
has expressed no preference at all (`'system'`), in which case it goes dark. An explicit
choice from the toggle always wins — see the note in
[`components/dashboard/dash-shell.tsx`](components/dashboard/dash-shell.tsx) for why the
override is applied in two places.

## Connecting a real backend

1. Replace the exports in [`data/`](data/) with your own fetches. The chart shapes are
   the library's own types (`ChartDatum[]`, `PieDatum[]`, `number[]`), so nothing needs a
   transform layer.
2. For server-driven tables, set `manual` on the `DataTable` and use `onSortChange`,
   `onSearchChange` and `onPageChange` with `totalRows`.
3. There is no auth to unpick — "Login" is a `<Link href="/dashboard">`.

## Accessibility

The quality bar this was built to, and what the library gives you for free:

- One `<h1>` per page, and heading level kept separate from visual size.
- Charts carry `title`/`description` plus a hidden data table; series never rely on
  colour alone.
- The Kanban board has a complete keyboard path — the HTML5 drag API has none — announced
  through a live region.
- Every icon-only control has a real accessible name (`IconButton` requires it at the
  type level).
- Visible focus rings, `prefers-reduced-motion` respected, and a skip link on every
  marketing page.

## Scripts

```bash
npm run dev      # Turbopack dev server
npm run build    # production build — should finish with zero errors
npm run start    # serve the production build
npm run lint     # eslint
```

## Powered by VivekUI

Built with ❤️ using [VivekUI](https://ui.vivekkumarsingh.in/docs?utm_source=vivekui-template&utm_campaign=saas&utm_medium=readme)
— 91 React components · 6 SVG charts · zero runtime dependencies. One install, one CSS
import, no config.

```bash
npm i @the_viveksingh/vivek-ui
```

[Docs](https://ui.vivekkumarsingh.in/docs?utm_source=vivekui-template&utm_campaign=saas&utm_medium=readme)
· [npm](https://www.npmjs.com/package/@the_viveksingh/vivek-ui)
· [GitHub](https://github.com/intellectwithvivek/vivek_UI)
· [Vivek Kumar Singh](https://vivekkumarsingh.in/?utm_source=vivekui-template&utm_campaign=saas&utm_medium=readme)

## Licence

MIT — free for commercial use. **The credit in the footer is removable**; a star on the
repository is appreciated instead.