initial commit

.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": "next/core-web-vitals",
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "off",
+    "import/no-unresolved": "error",
+    "import/named": "off"
+  }
+}

.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Serwist
+public/sw*
+public/swe-worker*

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "semi": true,
+  "useTabs": false,
+  "trailingComma": "none",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["cuid"]
+}

README.md

@@ -0,0 +1,66 @@
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/9113740/201498864-2a900c64-d88f-4ed4-b5cf-770bcb57e1f5.png">
+  <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/9113740/201498152-b171abb8-9225-487a-821c-6ff49ee48579.png">
+</picture>
+
+<div align="center"><strong>Next.js 14 Admin Dashboard Starter Template With Shadcn-ui</strong></div>
+<div align="center">Built with the Next.js App Router</div>
+<br />
+<div align="center">
+<a href="https://next-shadcn-dashboard-starter.vercel.app">View Demo</a>
+<span>
+</div>
+
+## Overview
+
+This is a starter template using the following stack:
+
+- Framework - [Next.js 14](https://nextjs.org/13)
+- Language - [TypeScript](https://www.typescriptlang.org)
+- Styling - [Tailwind CSS](https://tailwindcss.com)
+- Components - [Shadcn-ui](https://ui.shadcn.com)
+- Schema Validations - [Zod](https://zod.dev)
+- State Management - [Zustand](https://zustand-demo.pmnd.rs)
+- Search params state manager - [Nuqs](https://nuqs.47ng.com/)
+- Auth - [Auth.js](https://authjs.dev/)
+- Tables - [Tanstack Tables](https://ui.shadcn.com/docs/components/data-table)
+- Forms - [React Hook Form](https://ui.shadcn.com/docs/components/form)
+- Command+k interface - [kbar](https://kbar.vercel.app/)
+- Linting - [ESLint](https://eslint.org)
+- Pre-commit Hooks - [Husky](https://typicode.github.io/husky/)
+- Formatting - [Prettier](https://prettier.io)
+
+_If you are looking for a React admin dashboard starter, here is the [repo](https://github.com/Kiranism/react-shadcn-dashboard-starter)._
+
+## Pages
+
+| Pages                                                                             | Specifications                                                                                                                      |
+| :-------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------- |
+| [Signup](https://next-shadcn-dashboard-starter.vercel.app/)                       | Authentication with **NextAuth** supports Social logins and email logins (Enter dummy email for demo).                              |
+| [Dashboard](https://next-shadcn-dashboard-starter.vercel.app/app)                 | Cards with recharts graphs for analytics.                                                                                           |
+| [Employee](https://next-shadcn-dashboard-starter.vercel.app/app/employee)         | Tanstack tables with server side searching, filter, pagination by Nuqs which is a Type-safe search params state manager in nextjs). |
+| [Employee/new](https://next-shadcn-dashboard-starter.vercel.app/app/employee/new) | A Employee Form with shadcn form (react-hook-form + zod).                                                                           |
+| [Product](https://next-shadcn-dashboard-starter.vercel.app/app/product)           | Tanstack tables with server side searching, filter, pagination by Nuqs which is a Type-safe search params state manager in nextjs   |
+| [Product/new](https://next-shadcn-dashboard-starter.vercel.app/app/product/new)   | A Product Form with shadcn form (react-hook-form + zod).                                                                            |
+| [Profile](https://next-shadcn-dashboard-starter.vercel.app/app/profile)           | Mutistep dynamic forms using react-hook-form and zod for form validation.                                                           |
+| [Kanban Board](https://next-shadcn-dashboard-starter.vercel.app/app/kanban)       | A Drag n Drop task management board with dnd-kit and zustand to persist state locally.                                              |
+| [Not Found](https://next-shadcn-dashboard-starter.vercel.app/app/notfound)        | Not Found Page Added in the root level                                                                                              |
+| -                                                                                 | -                                                                                                                                   |
+
+## Getting Started
+
+Follow these steps to clone the repository and start the development server:
+
+- `git clone https://github.com/Kiranism/next-shadcn-dashboard-starter.git`
+- `npm install`
+- Create a `.env.local` file by copying the example environment file:
+  `cp env.example.txt .env.local`
+- Add the required environment variables to the `.env.local` file.
+- `npm run dev`
+
+You should now be able to access the application at http://localhost:3000.
+
+> [!WARNING]  
+> After cloning or forking the repository, be cautious when pulling or syncing with the latest changes, as this may result in breaking conflicts.
+
+Cheers! 🥂

app/(auth)/(signin)/page.tsx

@@ -0,0 +1,19 @@
+import { Metadata } from 'next';
+import GoogleSignInButton from '../_components/google-auth-button';
+
+export const metadata: Metadata = {
+  title: 'Sign-in',
+  description: 'Sign-in with Google'
+};
+
+export default function SignInViewPage() {
+  return (
+    <div className="relative h-screen flex-col items-center justify-center">
+      <div className="flex h-full items-center p-4 lg:p-8">
+        <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+          <GoogleSignInButton />
+        </div>
+      </div>
+    </div>
+  );
+}

app/(auth)/_components/google-auth-button.tsx

@@ -0,0 +1,20 @@
+'use client';
+import { useSearchParams } from 'next/navigation';
+import { signIn } from 'next-auth/react';
+import { Button } from '@/components/ui/button';
+import { DrumIcon } from 'lucide-react';
+import { Icons } from '@/components/icons';
+import { RainbowButton } from '@/components/ui/rainbow-button';
+
+export default function GoogleSignInButton() {
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams.get('callbackUrl');
+  return (
+    <RainbowButton
+      onClick={() => signIn('google', { callbackUrl: callbackUrl ?? '/app' })}
+    >
+      <Icons.google className="mr-2 size-4" />
+      Sign-in with Google
+    </RainbowButton>
+  );
+}

app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,2 @@
+import { handlers } from '@/auth';
+export const { GET, POST } = handlers;

app/app/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import { cookies } from 'next/headers';
+
+export const metadata: Metadata = {
+  title: 'Next-Shadcn-TWA',
+  description:
+    'Trusted Web Activities Template built with Next.js, TailwindCSS and Shad-CN'
+};
+
+export default function DashboardLayout({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  // Persisting the sidebar state in the cookie.
+  const cookieStore = cookies();
+  const defaultOpen = cookieStore.get('sidebar:state')?.value === 'true';
+  return <>{children}</>;
+}

app/app/loading.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { Loader } from '@/components/ui/loader';
+
+export default function Loading() {
+  return (
+    <div className="h-[85vh]">
+      <div className="flex h-full items-center justify-center">
+        <Loader />
+      </div>
+    </div>
+  );
+}

app/app/overview/page.tsx

@@ -0,0 +1,23 @@
+import PageContainer from '@/components/layout/page-container';
+
+import { auth } from '@/auth';
+import { redirect } from 'next/navigation';
+import AuthInfo from '@/components/layout/auth-info';
+
+export default async function OverViewPage() {
+  const session = await auth();
+
+  if (!session?.user) {
+    redirect('/signin');
+  }
+
+  return (
+    <div className="relative h-screen flex-col items-center justify-center">
+      <div className="flex h-full items-center p-4 lg:p-8">
+        <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+          <AuthInfo />
+        </div>
+      </div>
+    </div>
+  );
+}

app/app/page.tsx

@@ -0,0 +1,12 @@
+import { auth } from '@/auth';
+import { redirect } from 'next/navigation';
+
+export default async function Dashboard() {
+  const session = await auth();
+
+  if (!session?.user) {
+    return redirect('/');
+  } else {
+    redirect('/app/overview');
+  }
+}

app/globals.css

@@ -0,0 +1,115 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 99%;
+    --foreground: 20 51% 4%;
+    --muted: 67 60% 90%;
+    --muted-foreground: 20 7% 25%;
+    --popover: 20 66% 98%;
+    --popover-foreground: 20 51% 3%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 51% 3%;
+    --border: 20 15% 94%;
+    --input: 20 15% 94%;
+    --primary: 67 94% 54%;
+    --primary-foreground: 0 0% 12%;
+    --secondary: 20 12% 92%;
+    --secondary-foreground: 20 100% 32%;
+    --accent: 67 94% 54%;
+    --accent-foreground: 0 0% 5%;
+    --destructive: 0 80% 50%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 67 94% 54%;
+    --radius: 0.5rem;
+    --chart-1: 67 94% 44%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --sidebar-background: 0 0% 100%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 0 0% 0%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 67 94% 54%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+    --color-1: 0 100% 63%;
+    --color-2: 270 100% 63%;
+    --color-3: 210 100% 63%;
+    --color-4: 195 100% 63%;
+    --color-5: 90 100% 63%;
+  }
+
+  .dark {
+    --background: 0 0% 3%;
+    --foreground: 253 31% 98%;
+    --muted: 253 7% 13%;
+    --muted-foreground: 253 0% 63%;
+    --popover: 0 0% 1%;
+    --popover-foreground: 253 31% 98%;
+    --card: 0 0% 1%;
+    --card-foreground: 253 31% 99%;
+    --border: 0 0% 15%;
+    --input: 0 0% 15%;
+    --primary: 67 94% 54%;
+    --primary-foreground: 0 0% 1%;
+    --secondary: 0 0% 9%;
+    --secondary-foreground: 253 7% 69%;
+    --accent: 67 94% 54%;
+    --accent-foreground: 0 0% 0%;
+    --destructive: 339.2 90.36% 51.18%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 67 94% 54%;
+    --chart-1: 67 94% 54;
+    --chart-2: 253 13% 74%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 0 0% 0%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 67 94% 54%;
+    --sidebar-primary-foreground: 0 0% 0%;
+    --sidebar-accent: 67 94% 54%;
+    --sidebar-accent-foreground: 0 0% 0%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 253 91% 58%%;
+    --color-1: 0 100% 63%;
+    --color-2: 270 100% 63%;
+    --color-3: 210 100% 63%;
+    --color-4: 195 100% 63%;
+    --color-5: 90 100% 63%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply box-border bg-background text-foreground;
+  }
+}
+
+@layer utilities {
+  .min-h-screen {
+    min-height: 100vh; /* Fallback */
+    min-height: 100dvh;
+  }
+  .h-screen {
+    height: 100vh; /* Fallback */
+    height: 100dvh;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}