Useful Packages

npm install prettier prettier-plugin-tailwindcss @ianvs/prettier-plugin-sort-imports

.prettierrc

{
  "plugins": [
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss"
  ],
  "importOrder": [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "",
    "^types$",
    "^@/env(.*)$",
    "^@/types/(.*)$",
    "",
    "^(.*)/helper$",
    "^@/db",
    "",
    "^@/providers/(.*)$",
    "^@/emails/(.*)$",
    "^@/db/(.*)$",
    "^@/config/(.*)$",
    "^@/lib/(.*)$",
    "^@/hooks/(.*)$",
    "",
    "^@/components/ui/(.*)$",
    "^@/components/(.*)$",
    "",
    "^@/styles/(.*)$",
    "^@/app/(.*)$",
    "",
    "^[./]"
  ],
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "singleAttributePerLine": false
}

.prettierrc

  .eslintrc.json
pnpm-lock.yaml
.lintstagedrc
.next

 npm install date-fns

npm install zod

npm install next-themes

"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";

export function NextThemeProviders({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <NextThemesProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
      enableColorScheme
    >
      {children}
    </NextThemesProvider>
  );
}

npm install motion

npm install axios

npm install lucide-react

npm install react-hotkeys-hook

npm install zustand