A boilerplate template using Next.js for HHN projects.

Getting Started

First, install required dependencies and initialize the prisma client:

bun install
bun db:gen
bun db:push

Then run the development server:

bun dev

Open http://localhost:3000 with your browser to see the result.

NOTE: Bun is not required. NPM, PNPM or Yarn can be used instead. To do this, delete bun.lockb and node_modules then proceed with the installation.

rm -rf node_modules
rm bun.lockb
npm install
# or
pnpm install
# or
yarn install

Documentation

This tempalte is built using:

		lucia-auth

Key file locations:

• Lucia instance initializer and validateSession: @/lib/lucia.ts
• Lucia useSession: @/providers/session-provider.tsx
• Lucia Prisma Adapter: @/lib/db/adapter.ts
• Prisma client instance initializer: @/lib/db/index.ts
• Auth functions: @/lib/services/auth-service.ts
• Theme colors: @/app/globals.css

Custom scripts:

• "db:push": updates the database with the latest schema changes
• "db:pull": retrieves the database schema directly from the database
• "db:gen": generates client-side types for database typesafety
• "db:studio": launches an interactive GUI for exploring and manipulating the database
• "db:seed": populates the database with initial data for development or testing
• "shadcn": runs the latest version of the shadcn-ui using a custom bunx command
  • "bunx": is defined in ~/.zshrc or ~/.bashrc

  alias bunx="bunx --bun"

• "prisma.seed": defines "prisma db seed"

  "prisma": {
    "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
  },

Modified components:

• toast.tsx

  Before:

  

  After:

  

• button.tsx

  Before:

  

  After:

  

Modified default files:

• next.config.mjs
  • added "images.remotePatterns"
• tailwind.config.tss
  • removed default animations and key frames
• .gitignore
  • renamed .env*.local to .env

Shadcn component configuration:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Optional .prettierrc file:

This file is configured for my purposes, it is not required, and can be deleted at any time.

NOTE: When deleted, however, Tailwind CSS classes will no longer be automatically sorted using Prettier.

{
  "bracketSameLine": true,
  "semi": false,
  "plugins": ["prettier-plugin-tailwindcss"]
}

Environment variables:

• REACT_EDITOR specifies which text editor to open when an error occurs.

  For Example when REACT_EDITOR is set to "code" VSCode will open upon clicking the file url in your browser.

• DATABASE_URL connects prisma to your development database.

  The url should look like this:

  mysql://username:password@localhost:3906/database

Deployment

To deploy this app you must define a database url inside a .env file at the root of your file tree.

The url should look like this:

mysql://username:password@localhost:3906/database

Support

For any questions or support feel free to email me or connect with me on LinkedIn.