A modern admin dashboard built with Next.js, shadcn/ui, and Tailwind CSS, featuring live data tables, multiple chart types, a Supabase-backed todo list, and real external data feeds.
- Dashboard Home — bar, area, line, and pie charts; latest transactions; browser usage donut; popular content feed; and a live todo list
- Payments Table — sortable, filterable data table with row selection and pagination (built with
@tanstack/react-table) - User Profile Page — user badges, editable user info (via a slide-out
Sheet), and a per-user activity line chart - Todo List (CRUD) — fully wired to Supabase: create, read, update (toggle complete), and delete tasks in real time
- Popular Content Feed — pulls real, live article data from the public dev.to API
- Dark / Light Mode — powered by
next-themes - Responsive sidebar & navbar — collapsible app navigation
- Fully responsive — built on shadcn/ui components and Tailwind CSS 4
| Layer | Technology | Version |
|---|---|---|
| Framework | Next.js (App Router, Turbopack) | ^16.2.6 |
| Language | TypeScript | ^5 |
| UI Library | React / React DOM | 19.2.4 |
| UI Components | shadcn/ui (Radix / Base UI primitives) | ^4.13.0 |
| Styling | Tailwind CSS | ^4 |
| Data Tables | TanStack Table | latest |
| Charts | Recharts | ^3.9.2 |
| Icons | Lucide React | ^1.24.0 |
| Dates | date-fns / react-day-picker | ^4.4.0 / ^10.0.1 |
| Theming | next-themes | ^0.4.6 |
| Class utilities | class-variance-authority, clsx, tailwind-merge | latest |
| Backend (Todos) | Supabase (Postgres + Auto-generated API) | JS client |
| External Data | dev.to public API | — |
| Linting/Formatting | ESLint, Prettier | ^9 / ^3.8.3 |
Dashboard Master/
├── app/
│ ├── layout.tsx # Root layout, ThemeProvider
│ ├── page.tsx # Dashboard home
│ ├── payments/
│ │ ├── page.tsx # Payments table page
│ │ ├── columns.tsx # Table column definitions
│ │ └── data-table.tsx # Reusable data table component
│ └── users/[username]/
│ └── page.tsx # Single user profile page
├── components/
│ ├── AppAreaChart.tsx # Area chart widget
│ ├── AppBarChart.tsx # Total Revenue bar chart
│ ├── AppLineChart.tsx # User activity line chart
│ ├── AppPieChart.tsx # Browser usage donut chart
│ ├── AppSidebar.tsx # Collapsible sidebar navigation
│ ├── Navbar.tsx # Top navigation bar
│ ├── CardList.tsx # Transactions / popular content lists
│ ├── TodoList.tsx # Supabase-backed CRUD todo list
│ ├── EditUser.tsx # Edit user form (Sheet content)
│ ├── TablePagination.tsx # Pagination controls for data tables
│ ├── theme-provider.tsx # next-themes wrapper
│ ├── img/ # Static image assets
│ ├── providers/ # Context providers
│ └── ui/ # shadcn/ui primitives
├── hooks/ # Custom React hooks
├── images/ # Public-facing images
├── lib/
│ ├── supabaseClient.ts # Supabase client instance
│ └── utils.ts # cn() helper, etc.
├── public/
├── .env.local # Environment variables (not committed)
├── components.json # shadcn/ui config
├── next.config.ts
├── eslint.config.mjs
├── .prettierrc / .prettierignore
└── package.json
npm installThis installs everything already listed in package.json. If you're setting the project up from scratch (or adding these features to a new project), here's what each piece was installed with:
# Next.js, React, and TypeScript are typically scaffolded together via:
npx create-next-app@latest
# shadcn/ui CLI + components used in this project
npx shadcn@latest init
npx shadcn@latest add button card badge avatar breadcrumb checkbox \
hover-card progress select sheet input label calendar popover \
scroll-area dropdown-menu tablenpm install rechartsnpm install @tanstack/react-tablenpm install lucide-reactnpm install date-fns
npx shadcn@latest add calendar # installs react-day-picker as a dependencynpm install next-themesnpm install @supabase/supabase-jsnpm install class-variance-authority clsx tailwind-merge tw-animate-css
Create a .env.local file in the project root:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
⚠️ Never commit.env.local— it's already covered by.gitignore.
Run this in your Supabase project's SQL Editor to create the todos table:
create table todos (
id uuid default gen_random_uuid() primary key,
task text not null,
completed boolean default false,
created_at timestamp with time zone default now()
);
alter table todos enable row level security;
create policy "Allow all access" on todos
for all
using (true)
with check (true);This policy is permissive for demo purposes. Restrict it to authenticated users before shipping to production.
The code is from: https://www.youtube.com/watch?v=SjsQdfvxjL8, being used to master the Shadcn
In next.config.ts, whitelist any external image hosts used by the app:
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
images: {
remotePatterns: [
{ protocol: "https", hostname: "placecats.com" },
{ protocol: "https", hostname: "media2.dev.to" },
{ protocol: "https", hostname: "avatars.githubusercontent.com" },
],
},
};
export default nextConfig;npm run devVisit http://localhost:3000.
| Command | Description |
|---|---|
npm run dev |
Start the development server |
npm run build |
Build the app for production |
npm run start |
Run the production build |
npm run lint |
Run ESLint |
npm run format |
Format code with Prettier |
npm run typecheck |
Run TypeScript type checking |
- Rebuild the Payments feature on a Laravel API backend, as a learning exercise alongside the existing Supabase-powered Todo feature
- Add authentication (Supabase Auth or a custom backend)
- Add due dates to todos
- Persist and paginate transactions from a real database instead of static data
This project is for personal learning purposes.