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 #webdev #typescript #react

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 (0)