Next.js 14 Dashboard App

Dashboard App is a Next.js 14 dashboard template built on the official Next Learn tutorial by Vercel that lets users register with credentials or OAuth, create customers, assign invoices to them, and view an invoice summary on the Dashboard page. This project is a multi-tenant SaaS dashboard modified by developer Josias Buday to add multiuser support, OAuth authentication, customer pagination, and a profile-based dark theme on top of the original course project.

What is the Dashboard App?

The Dashboard App is a single-page application (SPA) built with Next.js 14 using the App Router. It takes user authentication details (credentials or OAuth provider) as input and produces a private workspace with customer and invoice management pages. The project is based on the official Next Learn course created by Vercel, and this version was extended by developer Josias Buday to strengthen full-stack skills. The live demo is hosted at josiasbudaydeveloper-next-14-dashboard-app.vercel.app.

Key Features

• Authentication and multiuser system — Users create accounts with credentials or an OAuth provider; the version 2.0 multiuser system isolates each user's customers and invoices.
• Dashboard summary — The Dashboard page shows a summary of all invoices, so users see totals and statuses without opening individual records.
• Invoice CRUD with search and pagination — The Invoices page lets users search, create, edit, or delete invoices and navigate pages with pagination controls at the bottom.
• Customer management — The Customers page includes a search bar to filter customers; version 2.0 adds pagination to handle larger customer lists.
• Profile-based dark theme — Dark mode is implemented with Tailwind CSS and, in version 2.0, follows the user's profile theme rather than just the browser theme.
• Full-stack TypeScript stack — Uses Next.js 14 App Router with server and client components, TypeScript, Tailwind CSS, Zod for validation, and the useFormState hook for form state.

Who is it for?

• Next.js developers — They can use it as a reference for building authenticated dashboards with App Router, server components, client components, and server actions.
• Freelancers and agencies — They can adapt this project as a starting point for client-facing SaaS dashboards where each client manages their own customers and invoices.
• Students of full-stack development — They can study how Auth.js, JWT, Zod validation, and form state handling fit together in a working application.

What can you do with the Dashboard App?

• Sign up and log in — Register with credentials or an OAuth provider (Auth.js/NextAuth) to get a private dashboard.
• Manage invoicing — Create customers, assign invoices to them, then track all invoice summaries on the Dashboard page.
• Search and paginate records — Use the search bars on both Invoices and Customers pages to filter, and use pagination to navigate through larger datasets.

How does the Dashboard App work?

Users first create an account using credentials or an OAuth provider. After logging in, they can create customers and assign invoices to those customers, which then appear in the Dashboard summary. The project uses the App Router's server components for data fetching and client components for interactive features like search, pagination, and form actions.

FAQ

Does the Dashboard App support OAuth?

Yes. Version 2.0 added OAuth authentication via Auth.js (NextAuth), so users can sign in with an OAuth provider in addition to standard credentials. Sessions are managed with JWT.

Is this the official Next.js tutorial project?

It is based on the official Next Learn course created by Vercel. The developer modified it by adding a multiuser system, OAuth authentication, customer pagination, and a profile-based dark theme.

What tech stack does it use?

The project uses Next.js 14 with the App Router, TypeScript, Tailwind CSS, Auth.js/NextAuth, Zod for schema validation, and the useFormState hook for form handling. It also uses React server and client components.

Is there a live demo?

Yes. The live version is hosted on Vercel and accessible at josiasbudaydeveloper-next-14-dashboard-app.vercel.app/dashboard, so you can try the dashboard without setting up the project locally.

Does the Customers page have pagination?

In version 1.0 the Customers page displayed all customers at once, but version 2.0 added pagination for customer lists to keep the page responsive with more data.