✅ feat(app): configure the app

.env.example

@@ -1,49 +1,92 @@
-# !! PLANETSCALE CREDENTIALS (https://planetscale.com)
+# ?? =======================================
+# !! | ENVIRONMENT VARIABLES CONFIGURATION |
+# ?? =======================================
+
+# Since the ".env" file is gitignored, you can use the ".env.example" file to
+# build a new ".env" file when you clone the repo. Keep this file up-to-date
+# when you add new variables to `.env`.
+
+# This file will be committed to version control, so make sure not to have any
+# secrets in it. If you are cloning this repo, create a copy of this file named
+# ".env" and populate it with your secrets.
+
+# When adding additional environment variables, the schema in "/src/env.mjs"
+# should be updated accordingly.
+
+# ?? =======================================================================
+
+# !! DRIZZLE DB: PLANETSCALE CREDENTIALS (https://planetscale.com)
+# Get the Database data from the "prisma" dropdown selector in PlanetScale.
 # Connect -> Connect with `@planetscale/database`:
-DATABASE_HOST="" # ?? aws.connect.psdb.cloud
-DATABASE_USERNAME="" # ?? ********************
-DATABASE_PASSWORD="" # ?? pscale_pw_*******************************************
+DATABASE_HOST="" # ?? [1] aws.connect.psdb.cloud
+DATABASE_USERNAME="" # ?? [2] ****
+DATABASE_PASSWORD="" # ?? [3] pscale_pw_****
+NEXT_SECRET_URL_ORM_DRIZZLE="" # ?? [4] Change the query params at the end of the URL to "?ssl={"rejectUnauthorized":true}"
+
+# !! PRISMA DB: PLANETSCALE CREDENTIALS (https://planetscale.com)
+# https://www.prisma.io/docs/reference/database-reference/connection-urls#env
+# Get the Database URL from the "prisma" dropdown selector in PlanetScale.
+# End of the URL must be: ?sslaccept=strict
 # Connect -> Connect with `Prisma`:
-NEXT_SECRET_URL_PSCALE=""
+NEXT_SECRET_URL_ORM_PRISMA="" # ?? [5] End of the URL must be: ?sslaccept=strict
 
 # !! CLERK CREDENTIALS (https://clerk.com)
+# pk_test, and sk_test are development keys
 # These values should be replaced with production keys on the deployed site
-NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="" # ?? pk_test_********************************
-CLERK_SECRET_KEY="" # ?? sk_test_********************************
+# For production, use pk_live, and sk_live keys (a domain is required)
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="" # ?? [6] pk_test_****
+CLERK_SECRET_KEY="" # ?? [7] sk_test_****
 
 # !! AUTH.JS CREDENTIALS (https://authjs.dev)
-NEXT_PUBLIC_URL_AUTHJS="http://localhost:3000" # ?? http://localhost:3000 when in development
+# Use the production URL when deploying to production, e.g. https://example.com
+NEXT_PUBLIC_URL_AUTHJS="" # ?? [8] For dev env: http://localhost:3000
+# https://next-auth.js.org/configuration/options#secret
+# You can generate a new secret on the command line with: openssl rand -base64 32
+NEXT_SECRET_KEY_AUTHJS="" # ?? [9] ****
 
 # !! FILE UPLOADING (https://uploadthing.com)
-UPLOADTHING_SECRET="" # ?? sk_live_********************************
-UPLOADTHING_APP_ID="" # ?? **********
+UPLOADTHING_SECRET="" # ?? [10] sk_live_****
+UPLOADTHING_APP_ID="" # ?? [11] ****
 
 # !! STRIPE CREDENTIALS (https://stripe.com)
+# Stripe Secret Key found at https://dashboard.stripe.com/test/apikeys
 # These values should be replaced with production keys on the deployed site to accept real payments
-NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="" # ?? pk_test_********************************
-STRIPE_SECRET_KEY="" # ?? sk_test_********************************
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="" # ?? [12] pk_test_****
+STRIPE_API_KEY="" # ?? [13] sk_test_****
+# Stripe Webhook Secret found at https://dashboard.stripe.com/test/webhooks/create?endpoint_location=local
+STRIPE_WEBHOOK_SECRET="" # ?? [14] whsec_****
+# Stripe Product and Price IDs for your created products 
+# found at https://dashboard.stripe.com/test/products
+STRIPE_STD_MONTHLY_PRICE_ID="" # ?? [15] Store Item | price_****
+STRIPE_PRO_MONTHLY_PRICE_ID="" # ?? [16] Subscription | price_****
 
 # !! STRIPE WEBHOOK SECRET (https://stripe.com)
 # Create a webhook inside the stripe dashboard. Make sure to listen to the `payment_intent.succeeded` event.
 # The webhook URL should be: https://<INSERT_YOUR_DOMAIN_HERE>/api/stripe/webhook
-STRIPE_WEBHOOK_SECRET="" # ?? whsec***********************
-
-# !! OTHER ENV VARS
-POSTMARK_SIGN_IN_TEMPLATE="" # ?? ==
-POSTMARK_API_TOKEN="" # ?? ==
-CLOUDFLARE_API="" # ?? ==
-CLOUDFLARE_USER="" # ?? ==
-NEXTAUTH_SECRET="" # ?? ==
-SMTP_FROM="" # ?? ==
-AUTH_SECRET="" # ?? ==
-NEXTAUTH_SECRET="" # ?? ==
-NEXTAUTH_URL="http://localhost:3000" # ?? ==
-DISCORD_CLIENT_ID="" # ?? ==
-DISCORD_CLIENT_SECRET="" # ?? ==
-GITHUB_ID="" # ?? ==
-GITHUB_SECRET="" # ?? ==
-GITHUB_CLIENT_ID="" # ?? ==
-GITHUB_CLIENT_SECRET="" # ?? ==
-GITHUB_ACCESS_TOKEN="" # ?? ==
-GOOGLE_CLIENT_ID="" # ?? ==
-GOOGLE_CLIENT_SECRET="" # ?? ==
+STRIPE_WEBHOOK_SECRET="" # ?? [17] whsec_****
+
+# !! RESEND (REACT EMAIL BUILDER)
+# Resend API Key found at https://resend.com/api-keys
+RESEND_API_KEY="" # ?? [18] re_****
+# We need to register a domain with Resend to send emails from
+# Register a domain at https://resend.com/domains
+# Or we can use this email provided by resend for only testing: "onboarding@resend.dev"
+# It is not recommended tho
+EMAIL_FROM_ADDRESS="" # ?? [19] mail@example.com
+
+# !! UNSORTED ENV VARS
+POSTMARK_SIGN_IN_TEMPLATE="" # ?? [20]
+POSTMARK_API_TOKEN="" # ?? [21]
+CLOUDFLARE_API="" # ?? [22]
+CLOUDFLARE_USER="" # ?? [23]
+SMTP_FROM="" # ?? [24]
+NEXT_SECRET_KEY_AUTHJS="" # ?? [25]
+DISCORD_CLIENT_ID="" # ?? [26]
+DISCORD_CLIENT_SECRET="" # ?? [27]
+GITHUB_ID="" # ?? [28]
+GITHUB_SECRET="" # ?? [29]
+GITHUB_CLIENT_ID="" # ?? [30]
+GITHUB_CLIENT_SECRET="" # ?? [31]
+GITHUB_ACCESS_TOKEN="" # ?? [32]
+GOOGLE_CLIENT_ID="" # ?? [33]
+GOOGLE_CLIENT_SECRET="" # ?? [34]

.eslintrc.cjs

@@ -1,4 +1,5 @@
 // @ts-check
+
 const { defineConfig } = require("eslint-define-config");
 
 module.exports = defineConfig({
@@ -8,9 +9,9 @@ module.exports = defineConfig({
     tailwindcss: { callees: ["cn"], config: "tailwind.config.ts" }
   },
   overrides: [
-    //! ========================================
-    //! | TypeScript EsLint Configuration File |
-    //! ========================================
+    //! =========================================
+    //! | TypeScript EsLint Configuration Rules |
+    //! =========================================
     {
       files: ["*.ts", "*.tsx", "*.mts", "*.cts"],
       parser: "@typescript-eslint/parser",
@@ -30,6 +31,9 @@ module.exports = defineConfig({
         "@next/next/no-html-link-for-pages": "off",
         "@tanstack/query/exhaustive-deps": "error",
         "@tanstack/query/prefer-query-object-syntax": "error",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/no-unsafe-member-access": "off",
+        "@typescript-eslint/no-redundant-type-constituents": "off",
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-misused-promises": "off",
         "@typescript-eslint/no-unnecessary-type-assertion": "off",
@@ -43,9 +47,9 @@ module.exports = defineConfig({
         "react/no-unescaped-entities": "off"
       }
     },
-    //! ========================================
-    //! | JavaScript EsLint Configuration File |
-    //! ========================================
+    //! =========================================
+    //! | JavaScript EsLint Configuration Rules |
+    //! =========================================
     {
       files: ["*.js", "*.jsx", "*.mjs", "*.cjs"],
       extends: ["next/core-web-vitals"]

.vscode/extensions.json

@@ -1,16 +1,17 @@
 {
-    "recommendations": [
-        "aaron-bond.better-comments",
-        "ambar.bundle-size",
-        "bradlc.vscode-tailwindcss",
-        "dbaeumer.vscode-eslint",
-        "esbenp.prettier-vscode",
-        "lokalise.i18n-ally",
-        "mattpocock.ts-error-translator",
-        "mikekscholz.pop-icon-theme",
-        "neptunedesign.vs-sequential-number",
-        "streetsidesoftware.code-spell-checker",
-        "yoavbls.pretty-ts-errors",
-        "yzhang.markdown-all-in-one"
-    ]
-}
+  "recommendations": [
+    "aaron-bond.better-comments",
+    "ambar.bundle-size",
+    "bradlc.vscode-tailwindcss",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "lokalise.i18n-ally",
+    "mattpocock.ts-error-translator",
+    "mikekscholz.pop-icon-theme",
+    "neptunedesign.vs-sequential-number",
+    "streetsidesoftware.code-spell-checker",
+    "yoavbls.pretty-ts-errors",
+    "yzhang.markdown-all-in-one",
+    "davidanson.vscode-markdownlint"
+  ]
+}

.vscode/settings.json

@@ -1,10 +1,15 @@
 {
   "typescript.tsdk": "node_modules\\typescript\\lib",
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
-  "editor.formatOnType": true,
-  "files.associations": {
-    "*.tson": "typescript",
-    "*.txt": "plaintext"
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "tailwindCSS.includeLanguages": { "plaintext": "html" },
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["tw=\"([^\"]*)\""]
+  ],
+  "markdownlint.config": {
+    "MD033": {
+      "allowed_elements": ["img", "p", "a"]
+    }
   }
 }