repository·main·Indexed 20 days ago
https://github.com/qualiora/shadboardAn open-source admin dashboard template built with Next.js 15, React 19, and Shadcn/UI. It features a production-ready foundation with Tailwind CSS 4, NextAuth.js for authentication, and a built-in theme customizer. The template includes pre-built productivity apps (Email, Chat, Calendar, Kanban), business pages, and a comprehensive authentication flow.
Shadboard is an open-source admin dashboard template designed for building scalable web applications. It is built on a modern stack including Next.js 15, React 19, and Tailwind CSS 4.
Shadboard utilizes the following technology stack:
Route protection is managed in src/configs/auth-routes.ts using a routeMap. The middleware checks the current pathname against this map to determine access.
"guest": Accessible only to unauthenticated users. Authenticated users are redirected away (e.g., to the dashboard)."public": Accessible to both authenticated and unauthenticated users."protected" (Default): Any route not explicitly defined in the map is considered protected and requires authentication.For "public" routes, you can define an exceptions array to protect specific sub-paths within that route.
import type { RouteType } from "@/types"
export const routeMap = new Map<string, RouteType>([
["/sign-in", { type: "guest" }],
["/home", { type: "public", exceptions: ["/home/items"] }],
["/docs", { type: "public" }],
])import type { RouteType } from "@/types"
export const routeMap = new Map<string, RouteType>([
["/sign-in", { type: "guest" }], // Only unauthenticated users can access sign-in
["/register", { type: "guest" }], // Only unauthenticated users can access register
["/forgot-password", { type: "guest" }], // Only unauthenticated users can access forgot-password
["/verify-email", { type: "guest" }], // Only unauthenticated users can access verify-email
["/new-password", { type: "guest" }], // Only unauthenticated users can access new-password
["/home", { type: "public", exceptions: ["/home/items"] }], // Home is public, but /home/items is protected
["/docs", { type: "public" }], // Docs page is public
])To add a new top-level section to the sidebar, append a new object to the navigationsData array in src/data/navigation.ts. Ensure you include a title and an items array. Root items should include an iconName to display the icon in the main menu.
export const navigationsData: NavigationType[] = [
{
title: "Support",
items: [],
},
]To start the development server for the Shadboard starter-kit, use your preferred package manager to run the dev script. Once running, the application will be available at http://localhost:3000.
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devAfter adding authentication files, perform these final setup steps:
src/providers/index.tsx, ensure the NextAuth provider is included and that you pass the session prop.package.json: Add the following scripts to handle Prisma migrations and client generation:"scripts": {
"migrate": "pnpm exec prisma migrate dev",
"postinstall": "pnpm exec prisma generate"
}pnpm exec prisma generate to initialize the client."scripts": {
"migrate": "pnpm exec prisma migrate dev",
"postinstall": "pnpm exec prisma generate"
}Follow these steps to set up your Shadboard project. You can choose between the Full Kit (includes all features, apps, and pages) or the Starter Kit (minimal setup for easy customization).
Ensure your system meets these requirements:
npm install -g pnpmtypescript-version and javascript-version folders.Navigate to your project directory in the terminal and execute the following commands:
Install dependencies:
pnpm installLaunch the development server:
pnpm run devThe application will be available at http://localhost:3000 by default.
pnpm install
pnpm run devTo add a link under an existing section, insert a new object into the items array of that section. The item must contain either an href or a nested items array.
export const navigationsData: NavigationType[] = [
{
title: "Dashboards",
items: [
{
title: "Dashboard",
href: "/dashboard",
iconName: "ChartPie",
},
],
},
]app/page.tsx. Editing this file will trigger an automatic hot-reload in the browser to reflect your changes.To set up authentication using NextAuth.js and Prisma, install the following packages via pnpm:
pnpm install next-auth @auth/prisma-adapter @prisma/client prisma
pnpm install --save-dev @types/picomatch