DEV Community

Cover image for I built a full analytics dashboard with Next.js 15 — here's everything I used
Abdelaziz Ouaiji
Abdelaziz Ouaiji

Posted on

I built a full analytics dashboard with Next.js 15 — here's everything I used

#nextjs #react #typescript #webdev

I just finished building AnalyticaPro — a full analytics dashboard
template with 8 complete pages. Here's exactly how I built it,
what I learned, and the stack I chose.

🔗 Live Demo

Why I built it

I kept getting requests from clients who wanted dashboards
that "looked like something modern" — but building one from
scratch every time was slow and repetitive.

So I decided to build one properly, once, and make it reusable.

The stack

Tool Why I chose it
Next.js 15 App Router, file-based routing, fast builds
Tailwind CSS v4 Utility-first, no config needed, dark mode easy
Tabler Icons React 5,800+ consistent outline icons, free
Recharts Best React charting library, composable API
Framer Motion Smooth animations with minimal code
TypeScript Catches bugs early, better DX

What I built — 8 pages

1. Dashboard

The main overview page with:

  • 4 KPI stat cards with trend indicators
  • Revenue area chart vs target line
  • Traffic sources donut chart
  • Recent orders table
  • Activity feed + top pages

2. Analytics

Deep-dive metrics:

  • Pageview and bounce rate trends
  • Device breakdown (desktop/mobile/tablet)
  • Top countries with animated bars
  • Monthly revenue bar chart

3. Users

Full data table with:

  • Real-time search
  • Role and status filters (Admin/Editor/Viewer)
  • Pagination
  • Per-row action menus (edit, delete)

4. Orders

Order management with:

  • Checkbox bulk selection
  • Status filters (completed/pending/failed/processing)
  • CSV export button
  • Per-row action dropdown

5. Kanban Board

The most complex page:

  • 4 columns (Backlog, In Progress, Review, Done)
  • Drag and drop between columns
  • Cards with priority badges, tags, assignees, due dates

6. Settings

5-tab settings page:

  • Profile (avatar, name, bio, timezone)
  • Security (password, 2FA, active sessions)
  • Notifications (email + push toggles)
  • Appearance (theme picker, accent colors)
  • Privacy (visibility toggles)

7 & 8. Login + Register

Auth pages with split layout:

  • Social login buttons (Google, GitHub)
  • Password show/hide toggle
  • Remember me checkbox
  • Register success state

Dark / Light mode

I used CSS custom properties for theming:

:root {
  --bg: #f8f8fc;
  --surface: #ffffff;
  --text: #111118;
  --accent: #6c63ff;
}

[data-theme="dark"] {
  --bg: #0c0c14;
  --surface: #12121e;
  --text: #e8e8f0;
}
Enter fullscreen mode Exit fullscreen mode

And a simple React context to persist it:

const toggleTheme = () => {
  const next = theme === 'light' ? 'dark' : 'light'
  setTheme(next)
  localStorage.setItem('theme', next)
  document.documentElement.setAttribute('data-theme', next)
}
Enter fullscreen mode Exit fullscreen mode

Clean, simple, zero dependencies.

The hardest part — Kanban drag and drop

I used the HTML5 native drag API with React state:

const handleDragStart = (card: KanbanCard, fromCol: string) => {
  setDragging({ card, fromCol })
}

const handleDrop = (toColId: string) => {
  if (!dragging || dragging.fromCol === toColId) return

  setColumns(prev => prev.map(col => {
    if (col.id === dragging.fromCol) {
      return { 
        ...col, 
        cards: col.cards.filter(c => c.id !== dragging.card.id) 
      }
    }
    if (col.id === toColId) {
      return { 
        ...col, 
        cards: [...col.cards, dragging.card] 
      }
    }
    return col
  }))
  setDragging(null)
}
Enter fullscreen mode Exit fullscreen mode

No external DnD library needed — just native browser events and
React state updates.

What I'd do differently

1. Use a proper state manager
For a real app I'd use Zustand instead of prop drilling
and multiple useState calls.

2. Add real API integration
Right now everything uses mock data. The next version
will have a Supabase backend.

3. Better mobile sidebar
The sidebar collapses to icons on desktop but needs a
proper slide-in drawer for mobile.

The result

A fully working, production-quality dashboard template with:

  • 8 complete pages
  • Dark + light mode
  • Fully responsive
  • Interactive charts
  • TypeScript throughout
  • Clean, organized code

🔗 Live Demo

If you want the full source code, I put it up on Gumroad:
💰 Get AnalyticaPro — $19

What's next

I'm planning to add:

  • Calendar page
  • Real-time notifications
  • Supabase integration guide
  • Storybook component docs

Feel free to ask any questions in the comments — happy
to help with anything Next.js or dashboard related!

Top comments (1)

Collapse
 
toshihiro_shishido profile image
toshihiro shishido •

@6bees did you end up using Recharts or Tremor for the chart layer? We picked Recharts for our own analytics dashboard but the v3 migration broke our custom shape typing on Bar — ActiveShape<BarShapeProps> ended up being incompatible. Solved it by falling back to default shape rendering, but curious if Next.js 15's React 19 compat had similar surprises for you.