nextjs installed

.env

@@ -0,0 +1,6 @@
+DATABASE_URL="postgresql://stephen:Web2025$$@192.168.1.210:5432/webcalibre2"
+
+# Credentials for your Microsoft App (NextAuth)
+AZURE_AD_CLIENT_ID="549931a-f491-436b-b7bc-d37d8ca3c17e"
+AZURE_AD_CLIENT_SECRET="6a242be1-c711-4cc3-a132-03c1f57993ed"
+AZURE_AD_TENANT_ID="1c06ce7c-7884-4796-8652-d4c32d75a5d0"

.env.example

@@ -0,0 +1,15 @@
+# Replace with your actual Postgres credentials
+DATABASE_URL="postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=public"
+
+# Credentials for your Microsoft App (NextAuth)
+AZURE_AD_CLIENT_ID="your-client-id"
+AZURE_AD_CLIENT_SECRET="your-client-secret"
+AZURE_AD_TENANT_ID="your-tenant-id"
+
+
+#DATABASE_URL="postgresql://stephen:Web2025$$@192.168.1.210:5432/webcalibre2"
+
+# Credentials for your Microsoft App (NextAuth)
+#AZURE_AD_CLIENT_ID="549931a-f491-436b-b7bc-d37d8ca3c17e"
+#AZURE_AD_CLIENT_SECRET="6a242be1-c711-4cc3-a132-03c1f57993ed"
+#AZURE_AD_TENANT_ID="1c06ce7c-7884-4796-8652-d4c32d75a5d0"

.gitignore

@@ -31,7 +31,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
-.env*
+#.env*
 
 # vercel
 .vercel

docs/notes.md

@@ -0,0 +1,161 @@
+- [1. Project Structure](#1-project-structure)
+- [2. App Registrations](#2-app-registrations)
+  - [2.1. Permissions Needed](#21-permissions-needed)
+- [3. Steps](#3-steps)
+  - [3.1. create nextjs app](#31-create-nextjs-app)
+  - [3.2. Create .env file](#32-create-env-file)
+  - [3.3. Configure Git](#33-configure-git)
+  - [3.4. Test nextjs](#34-test-nextjs)
+
+
+# 1. Project Structure
+
+The following is the desire structure
+
+```txt
+web-calibre/
+├── src/
+│   ├── app/                # All Routes (Pages & APIs)
+│   │   ├── api/            # API ROUTES
+│   │   │   ├── auth/       # NextAuth routes [...nextauth]
+│   │   │   └── upload/     # Custom API for OneDrive sessions
+│   │   ├── dashboard/      # Protected user area
+│   │   ├── layout.tsx      # Global Layout
+│   │   └── page.tsx        # Landing Page
+│   ├── components/         # MUI Components (FileTable, Navbar)
+│   ├── lib/                # Config (Prisma, Theme, Auth)
+│   │   ├── prisma.ts
+│   │   └── theme.ts        <-- MUI Theme Defined Here
+│   └── middleware.ts       <-- Protected Routes Logic
+├── prisma/                 # DB Schema
+└── .env                    # Secrets
+```
+
+
+
+
+# 2. App Registrations
+
+Application (client) ID = 'b549931a-f491-436b-b7bc-d37d8ca3c17e'
+
+Object ID ='0b8256a2-e2ac-472b-896a-4b5845bc32fe'
+
+Directory (tenant) ID = '1c06ce7c-7884-4796-8652-d4c32d75a5d0'
+
+Expires = 1/3/2028
+
+Value='O3p8Q~oMph-0kSLwkvzEJzJdx_iHGOjJjrr5Pa1A'
+
+Secret ID='6a242be1-c711-4cc3-a132-03c1f57993ed'
+
+![WebCalibre2 | Certificates & secrets](./images/Certicates_secrets.png)
+
+Since you are using NextAuth.js, the URL must follow a very specific pattern.
+
+For local development: http://localhost:3000/api/auth/callback/azure-ad
+
+For production: https://your-domain.com/api/auth/callback/azure-ad
+
+Note: Replace azure-ad with whatever ID you give the provider in your code. By default, in NextAuth, it is usually azure-ad.
+
+## 2.1. Permissions Needed 
+
+![Permissions Needed](./images/PermissionsNeeded.png)
+
+# 3. Steps
+## 3.1. create nextjs app
+The following command creates the nextjs folder structure
+
+Yes, Next.js has a specific syntax to create a project in your current directory instead of creating a new subfolder.
+
+To do this, navigate to your empty project folder in the terminal and run:
+
+```Bash
+
+npx create-next-app@latest .
+```
+**Important Details:**
+1. The Dot (.): This tells the installer to use the current directory as the project root.
+
+2. Naming Conflict: If the folder name contains capital letters (e.g., WebCalibre), the command will fail with an error. Next.js requires the root folder name to be all lowercase and URL-friendly. You must rename your folder to web-calibre before running the command.
+This caused me rename to all lower case.
+
+3.Empty Folder: The directory must be empty (except for hidden files like .git). If you already have files in there, the installer will stop to prevent overwriting your work.
+
+What happens next?
+Even though you are using the current directory, the interactive prompt will still ask you:
+
+"What is your project named?" You can just hit Enter to accept the current folder name.
+
+Configuration: It will then ask you about TypeScript, ESLint, Tailwind CSS, the src/ directory, and the App Router.
+
+Based on our previous discussions, I recommend selecting "Yes" for TypeScript, ESLint, Tailwind, the src/ directory, and the App Router to match the professional structure we planned for WebCalibre.
+
+
+## 3.2. Create .env file
+
+
+
+In Next.js, the distinction between .env and .env.local is primarily about security and **overriding defaults**. 
+While both store key-value pairs, they are handled differently by Git and the Next.js runtime.
+
+1. Security & Version Control (Git)The most important reason is that .env.local is automatically ignored by Git in standard Next.js projects.
+   
+-   .env: Intended for "safe" default values that you want to share with your entire team. It is committed to your repository so that every developer has the same baseline configuration.
+-   .env.local: Intended for secrets (API keys, database passwords, Azure secrets). Because it is not committed to Git, your private credentials never end up on GitHub or in your production code history.
+  
+2. Priority & Overriding
+Next.js uses a "hierarchy" of loading.1 If you define the same variable in both files, .env.local wins.
+This allows you to set a generic placeholder in .env for the team, but use your specific local developer settings on your own machine. 
+For example:
+- In .env: DATABASE_URL=postgres://localhost:5432/mydb (The team's default)
+- In .env.local:
+   DATABASE_URL=postgres://admin:password123@localhost:5432/my_private_dev_db (Your personal setup)
+
+**The Next.js Loading Order**
+Next.js looks for variables in this specific order (from highest priority to lowest):
+1. process.env (System environment variables)
+2. .env.development.local (Only during npm run dev)
+3. .env.local (Available in all environments except test)
+4. .env.development
+5. .env (The final fallback)
+
+**Summary Comparison Table**
+
+|Feature   |.env  |.env.local|
+|----------|------|----------|
+|Purpose| Shared defaults/constants|Private secrets & local overrides|
+|Committed to Git?|Yes |No (Added to .gitignore)|
+|Sensitive Data?| NEVER|YES (API Keys, Secrets)|
+|Scope|All developers/environments|Just your machine|
+
+**Best Practice Tip: ** Since .env.local isn't shared on GitHub, it’s a good idea to create a file named .env.example in your project. This file should contain the names of the keys (e.g., AZURE_AD_CLIENT_SECRET=) but leave the values blank, so other developers know which variables they need to create on their own machines.
+
+## 3.3. Configure Git
+
+Nextjs initializes git by default. But is doesn't add some configs that I do
+
+git config --global push.followTags true
+
+git remote add origin "/Users/stephenlohning/Library/CloudStorage/OneDrive-Personal/Documents/10_GIT_Repositories/124_WebCalibre2.git"
+
+git remote -v
+origin  /Users/stephenlohning/Library/CloudStorage/OneDrive-Personal/Documents/10_GIT_Repositories/124_WebCalibre2.git (fetch)
+origin  /Users/stephenlohning/Library/CloudStorage/OneDrive-Personal/Documents/10_GIT_Repositories/124_WebCalibre2.git (push)
+
+## 3.4. Test nextjs
+```zsh
+npm run dev
+
+> 124_webcalibre2@0.1.0 dev
+> next dev
+
+▲ Next.js 16.1.1 (Turbopack)
+- Local:         http://localhost:3000
+- Network:       http://192.168.1.100:3000
+- Environments: .env
+
+✓ Starting...
+✓ Ready in 648ms
+```
+If it working proceed