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

Abdelaziz Ouaiji — Sat, 16 May 2026 10:19:56 +0000

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;
}

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)
}

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)
}

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!

DEV Community: Abdelaziz Ouaiji