Merge pull request #33 from danybeltran/chore-deps-and-docs

Chore deps and docs

README.md

@@ -1,20 +1,22 @@
 ### A Next.js template
 
-A Next.js app that uses Shadcn, Prisma ORM, MongoDB and Next auth
+A Next.js app that uses Shadcn, Prisma ORM, MongoDB and Next Auth
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdanybeltran%2Fnextjs-typescript-and-mongodb)
 
 ### Updating deps
 
-To update deps to their latest versions, run:
+To update the dependencies to their latest versions, run:
 
 ```
 ./scripts/update-deps.sh
 ```
 
 ---
 
-You need to pass an env. variable with the URI for the MongoDB connection, as well as `next-auth` env. variables:
+### Development
+
+You need to pass an env. variable with the MongoDB connection string, as well as any variables required by `next-auth`:
 
 ```
 MONGO_URI=
@@ -24,25 +26,81 @@ GOOGLE_APP_CLIENT_SECRET=
 NEXTAUTH_URL=
 ```
 
-To create the `NEXTAUTH_SECRET` hash, run this in your terminal:
+How to get these variables?
 
-```
+---
+
+- [`MONGO_URI`](https://www.mongodb.com/docs/manual/reference/connection-string/)
+
+The connection string looks something like this:
+
+`mongodb+srv://<user>:<password>@cluster0.<org>.mongodb.net/<database_name>?retryWrites=true&w=majority`
+
+In your cluster, click **Connect**:
+
+![alt text](docs/connect-1.png)
+
+Under the **Connect your application** section, click **Drivers**:
+
+![alt text](docs/drivers.png)
+
+Click the Copy button next to the connection string:
+
+![alt text](docs/connection-string.png)
+
+Replace `<password>` with the password for your user. Ensure any option params are [URL encoded](https://dochub.mongodb.org/core/atlas-url-encoding).
+
+---
+
+- [`GOOGLE_APP_CLIENT_ID` and `GOOGLE_APP_CLIENT_SECRET`](https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid)
+
+---
+
+Use your preferred tool to generate the `NEXTAUTH_SECRET` hash:
+
+Using [This tool](https://generate-secret.vercel.app/32) is the quickest way to generate a hash. You can change the last segment of the url to get a hash of your preferred length, such as `https://generate-secret.vercel.app/44`
+
+**OpenSSL :**
+
+```bash
 openssl rand -base64 32
 ```
 
-It will generate a 44-character random string
+**Urandom :**
 
-You can also place those variables inside a `.ENV` file (don't forget to add it to your `.gitignore` file)
+```bash
+head -c 32 /dev/urandom | base64
+```
 
-Related documentation:
+**Python :**
 
-- [`nextjs`](https://nextjs.org/docs)
+```py
+import base64
+import os
 
-- [`next-auth`](https://next-auth.js.org/getting-started/introduction)
+random_bytes = os.urandom(32)
+base64_string = base64.b64encode(random_bytes).decode('utf-8')
+print(base64_string)
+```
 
-- [`http-react`](https://http-react.netlify.app/docs)
+**JavaScript :**
 
+```js
+const crypto = require('crypto')
 
+const randomBytes = crypto.randomBytes(32)
+const base64String = randomBytes.toString('base64')
+console.log(base64String)
+```
+
+You can add those variables to a `.ENV` file (don't forget to add it to your `.gitignore` file!)
+
+Related documentation:
+
+- [`nextjs`](https://nextjs.org/docs)
+
+- [`next-auth`](https://next-auth.js.org/getting-started/introduction)
 
+- [`http-react`](https://httpr.vercel.app/docs)
 
-[Live preview](https://nextjs-typescript-and-mongodb-psi.vercel.app)
+[Live preview](https://nextjs-typescript-and-mongodb-psi.vercel.app)

package.json

@@ -10,47 +10,47 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
-    "@prisma/client": "^5.9.1",
+    "@prisma/client": "^5.11.0",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-slot": "^1.0.2",
     "atomic-state": "^2.7.6",
-    "autoprefixer": "^10.4.17",
+    "autoprefixer": "^10.4.19",
     "bs-icon": "^0.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "easymde": "^2.18.0",
-    "geist": "^1.2.2",
-    "http-react": "^3.2.3",
+    "geist": "^1.3.0",
+    "http-react": "^3.2.6",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.330.0",
-    "next": "^14.1.0",
-    "next-auth": "^4.24.5",
-    "next-themes": "^0.2.1",
-    "postcss": "^8.4.35",
+    "lucide-react": "^0.363.0",
+    "next": "^14.1.4",
+    "next-auth": "^4.24.7",
+    "next-themes": "^0.3.0",
+    "postcss": "^8.4.38",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.50.1",
+    "react-hook-form": "^7.51.2",
     "react-icons": "^5.0.1",
     "react-kuh": "^0.1.0",
     "react-markdown": "^9.0.1",
-    "tailwind-merge": "^2.2.1",
-    "tailwindcss": "^3.4.1",
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.12",
     "@types/js-cookie": "^3.0.6",
     "@types/mongoose": "^5.11.97",
-    "@types/node": "^20.11.17",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "prisma": "^5.9.1",
-    "typescript": "^5.3.3"
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
+    "prisma": "^5.11.0",
+    "typescript": "^5.4.3"
   }
 }