Refactor Template

.env.example

@@ -4,7 +4,7 @@
 NEXT_PUBLIC_UMAMI_WEBSITE_ID=
 
 
-# ---- STAGING ENVS ------------------------------------------------
+# ---- REMOTE/STAGING ENVS ------------------------------------------------
 
 NEXT_PUBLIC_SUPABASE_URL=https://<YOUR_PROJECT_ID>.supabase.co
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
@@ -15,8 +15,8 @@ DIRECT_URL="postgresql://postgres:<YOUR_PROJECT_PASSWORD>@db.<YOUR_PROJECT_ID>.s
 
 # ---- LOCAL ENVS ------------------------------------------------
 
-# NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
+# NEXT_PUBLIC_SUPABASE_URL=http://localhost:5421
 # NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
 # SUPABASE_SERVICE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
-# DIRECT_URL="postgresql://postgres:postgres@localhost:54322/postgres"
-# DATABASE_URL="postgresql://postgres:postgres@localhost:54322/postgres"
+# DIRECT_URL="postgresql://postgres:postgres@localhost:5422/postgres"
+# DATABASE_URL="postgresql://postgres:postgres@localhost:5422/postgres"

.eslintrc.cjs

@@ -1,38 +1,71 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const path = require("path");
-
 /** @type {import("eslint").Linter.Config} */
 const config = {
+  root: true,
+  extends: [
+    "next",
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  plugins: ["react", "@typescript-eslint", "unused-imports"],
   overrides: [
     {
-      extends: [
-        "plugin:@typescript-eslint/recommended-requiring-type-checking",
-      ],
-      files: ["*.ts", "*.tsx"],
-      parserOptions: {
-        project: path.join(__dirname, "tsconfig.json"),
-      },
+      files: ["*.ts", "*.tsx", "*.js"],
+      parser: "@typescript-eslint/parser",
     },
   ],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: path.join(__dirname, "tsconfig.json"),
-  },
-  plugins: ["@typescript-eslint"],
-  extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
   rules: {
+    "@typescript-eslint/no-misused-promises": "off",
     "@typescript-eslint/consistent-type-imports": [
       "warn",
       {
         prefer: "type-imports",
         fixStyle: "inline-type-imports",
       },
     ],
+    "import/prefer-default-export": "off",
+    "react/jsx-filename-extension": ["warn", { extensions: [".tsx"] }],
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+
     "react/jsx-curly-brace-presence": [
       "warn",
       { props: "never", children: "never" },
     ],
-    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+    "@typescript-eslint/no-shadow": ["error"],
+    "@typescript-eslint/no-unused-vars": "off",
+    "no-param-reassign": ["error"],
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        vars: "all",
+        varsIgnorePattern: "^_",
+        args: "after-used",
+        argsIgnorePattern: "^_",
+      },
+    ],
+    "padding-line-between-statements": [
+      "error",
+      {
+        blankLine: "always",
+        prev: ["const", "let", "var", "directive"],
+        next: "*",
+      },
+      {
+        blankLine: "any",
+        prev: ["const", "let", "var"],
+        next: ["const", "let", "var"],
+      },
+      { blankLine: "always", prev: "*", next: "return" },
+      { blankLine: "always", prev: ["block", "block-like"], next: "*" },
+      { blankLine: "always", prev: "*", next: ["function"] },
+      {
+        blankLine: "always",
+        prev: "import",
+        next: ["const", "let", "var", "function", "export", "block-like"],
+      },
+    ],
+    "no-nested-ternary": "error",
   },
 };
 

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
     env:
       SKIP_ENV_VALIDATION: true
     steps:
@@ -27,5 +27,5 @@ jobs:
           cache: "pnpm"
       - name: Install pnpm
         run: pnpm install
-      - name: Run eslint
+      - name: Run Lint
         run: pnpm lint

.github/workflows/production.yaml

@@ -13,7 +13,7 @@ jobs:
     env:
       SUPABASE_ACCESS_TOKEN: ${{ secrets.SUPABASE_ACCESS_TOKEN }}
       SUPABASE_DB_PASSWORD: ${{ secrets.PRODUCTION_DB_PASSWORD }}
-      PRODUCTION_PROJECT_ID: CHANGE_ME
+      PRODUCTION_PROJECT_ID: <YOUR_PROJECT_ID>
 
     steps:
       - uses: actions/checkout@v3

.github/workflows/staging.yaml

@@ -13,7 +13,7 @@ jobs:
     env:
       SUPABASE_ACCESS_TOKEN: ${{ secrets.SUPABASE_ACCESS_TOKEN }}
       SUPABASE_DB_PASSWORD: ${{ secrets.STAGING_DB_PASSWORD }}
-      STAGING_PROJECT_ID: CHANGE_ME
+      STAGING_PROJECT_ID: <YOUR_PROJECT_ID>
 
     steps:
       - uses: actions/checkout@v3

README.md

@@ -32,13 +32,28 @@ pnpm install
 
 - Copy the .env.example into .env and fill out the envs
 
+### Initial Setup
+
 ## If you want to develop on local supabase instance, follow the steps below:
 
 Then go to supabase/config.toml file and change your service name.
 
-Link the project with your supabase instance:
+Start the database:
+
+- supabase start
+- pnpm prepare:local
+
+## If you want to develop on remote supabase instance, follow the steps below:
+
+Connect supabase to remote instance:
+
+- supabase link --project-ref <_your_project_id_>
+- pnpm prepare:remote
+
+## Common steps
 
-- supabase link --project-ref *<*project-id*>*
+- Fill out environment variables
+- Create Secrets on Github
 
 #### If you want to create migrations by hand, go ahead and use this command:
 

components.json

@@ -11,6 +11,6 @@
   },
   "aliases": {
     "components": "~/components",
-    "utils": "~/utils"
+    "utils": "~/utils/cn"
   }
 }

package.json

@@ -11,7 +11,7 @@
     "lint": "next lint && pnpm check-types",
     "check-types": "tsc --noEmit",
     "update-types-local": "supabase gen types typescript --local > src/server/supabase/supabaseTypes.ts",
-    "update-types-remote": "supabase gen types typescript --project-id \"PUT YOUR SUPABASE REMOTE API KEY\" --schema public > src/server/supabase/supabaseTypes.ts",
+    "update-types-remote": "supabase gen types typescript --project-id \"<YOUR_PROJECT_ID>\" --schema public > src/server/supabase/supabaseTypes.ts",
     "prepare:local": "pnpm update-types-local && pnpm prisma db pull && pnpm prisma generate && pnpm prisma-case-format --file prisma/schema.prisma  && pnpm prisma generate",
     "prepare:remote": "pnpm update-types-remote && pnpm prisma db pull && pnpm prisma generate && pnpm prisma-case-format --file prisma/schema.prisma  && pnpm prisma generate",
     "db:reset": "supabase db reset",
@@ -20,46 +20,53 @@
     "db:diff": "supabase db diff -f"
   },
   "dependencies": {
-    "@prisma/client": "^5.1.1",
+    "@prisma/client": "^5.6.0",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
-    "@supabase/auth-helpers-nextjs": "^0.8.1",
-    "@supabase/supabase-js": "^2.38.0",
-    "@t3-oss/env-nextjs": "^0.6.0",
-    "@tanstack/react-query": "^4.32.6",
-    "@trpc/client": "^10.37.1",
-    "@trpc/next": "^10.37.1",
-    "@trpc/react-query": "^10.37.1",
-    "@trpc/server": "^10.37.1",
-    "@vercel/analytics": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@supabase/auth-helpers-nextjs": "^0.8.7",
+    "@supabase/supabase-js": "^2.39.0",
+    "@t3-oss/env-nextjs": "^0.6.1",
+    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query-devtools": "^5.12.1",
+    "@trpc/client": "^10.44.1",
+    "@trpc/next": "^10.44.1",
+    "@trpc/react-query": "^10.44.1",
+    "@trpc/server": "^10.44.1",
+    "@vercel/analytics": "^1.1.1",
+    "accept-language": "^3.0.18",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-react": "^0.284.0",
-    "next": "^13.4.19",
+    "next": "^14.0.3",
     "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "superjson": "^1.13.1",
+    "react-hook-form": "^7.49.2",
+    "superjson": "^1.13.3",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.21.4"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@types/eslint": "^8.44.2",
-    "@types/node": "^18.16.0",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.3.0",
-    "@typescript-eslint/parser": "^6.3.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.47.0",
-    "eslint-config-next": "^13.4.19",
-    "postcss": "^8.4.27",
-    "prettier": "^3.0.0",
-    "prettier-plugin-tailwindcss": "^0.5.1",
-    "prisma": "^5.1.1",
+    "@types/eslint": "^8.44.8",
+    "@types/node": "^18.19.0",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.54.0",
+    "eslint-config-next": "^13.5.6",
+    "eslint-plugin-unused-imports": "^3.0.0",
+    "postcss": "^8.4.31",
+    "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.7",
+    "prisma": "^5.6.0",
     "prisma-case-format": "^1.7.3",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.1.6"
+    "tailwindcss": "^3.3.5",
+    "typescript": "^5.3.2"
   },
   "ct3aMetadata": {
     "initVersion": "7.20.2"