Merge pull request #34 from hasanpeal/develop

Docker compose added

Author: hasanpeal

.gitignore

@@ -19,4 +19,8 @@ obj/
 .idea/
 appsettings.Development.json
 appsettings.Production.json
-appsettings.Staging.json
+appsettings.Staging.json
+
+# Docker
+docker-compose.override.yml
+.docker/

README.md

@@ -793,6 +793,192 @@ npm run dev
 
 ---
 
+## 🐳 Docker Setup
+
+The project includes a complete Docker setup with hot reload for both frontend and backend, making it easy to run the entire application with a single command.
+
+### Prerequisites
+
+- **Docker** and **Docker Compose** installed
+- **`.env` file** created in the root directory (see setup below)
+
+### Quick Start
+
+1. **Create a `.env` file** in the root directory of the project.
+
+   **Option A: Copy from `appsettings.development.json`**
+
+   If you already have `server/appsettings.development.json` configured, you can create the `.env` file by converting the JSON structure to environment variables. Use double underscores (`__`) for nested configuration keys.
+
+   **Option B: Create manually**
+
+   The `.env` file should contain all environment variables matching the structure of `server/appsettings.development.json`. Use double underscores (`__`) for nested configuration keys.
+
+   **Example `.env` file:**
+
+   ```bash
+   # Database Connection String
+   ConnectionStrings__Default=User Id=postgres.xxx;Password=xxx;Server=xxx;Port=5432;Database=postgres
+
+   # JWT Configuration
+   Jwt__Issuer=http://localhost:3000
+   Jwt__Audience=http://localhost:3001
+   Jwt__SigningKey=your-secret-signing-key-here
+   Jwt__AccessTokenMinutes=15
+   Jwt__RefreshTokenDays=30
+
+   # SendGrid Configuration
+   SendGrid__ApiKey=SG.xxx
+   SendGrid__FromEmail=support@eloomen.com
+   SendGrid__FromName=Eloomen
+   SendGrid__AdminEmail=your-admin-email@example.com
+
+   # App Configuration
+   App__BaseUrl=http://localhost:3001
+   App__EmailVerificationPath=/verify-email
+   App__DeviceVerificationPath=/verify-device
+   App__PasswordResetPath=/reset-password
+   App__VerificationCodeExpiration__EmailVerificationMinutes=1440
+   App__VerificationCodeExpiration__DeviceVerificationMinutes=60
+   App__VerificationCodeExpiration__PasswordResetMinutes=60
+
+   # S3 / Cloudflare R2 Configuration
+   S3__BucketName=eloomen-dev
+   S3__BaseUrl=https://xxx.r2.cloudflarestorage.com
+   S3__Endpoint=https://xxx.r2.cloudflarestorage.com
+   S3__AccessKeyId=xxx
+   S3__SecretAccessKey=xxx
+
+   # Frontend Configuration
+   NEXT_PUBLIC_API_URL=http://localhost:3000/api
+   ```
+
+   **Important Notes:**
+
+   - The `.env` file is already in `.gitignore` and will not be committed to the repository
+   - Variable names use `__` (double underscore) for nested configuration (e.g., `ConnectionStrings__Default`, `Jwt__Issuer`)
+   - Copy values from `server/appsettings.development.json` and convert the JSON structure to environment variable format
+   - For nested objects, use `__` to separate levels (e.g., `App__VerificationCodeExpiration__EmailVerificationMinutes`)
+
+2. **Start all services** with Docker Compose:
+
+   ```bash
+   docker-compose up
+   ```
+
+   This will:
+
+   - Build and start both frontend and backend services
+   - Enable hot reload for both services (changes are reflected immediately)
+   - Expose frontend on http://localhost:3001
+   - Expose backend on http://localhost:3000
+   - Automatically run database migrations on backend startup
+   - Load all environment variables from the `.env` file
+
+### Services
+
+#### Backend (ASP.NET Core)
+
+- **Port**: 3000
+- **Hot Reload**: Enabled via `dotnet watch`
+- **Environment**: Development
+- **Database**: Automatically runs migrations on startup
+- **Swagger**: Available at http://localhost:3000/swagger
+
+#### Frontend (Next.js)
+
+- **Port**: 3001
+- **Hot Reload**: Enabled via Next.js dev mode
+- **API URL**: http://localhost:3000/api
+
+### Docker Commands
+
+```bash
+# Start services
+docker-compose up
+
+# Start in detached mode (background)
+docker-compose up -d
+
+# Stop services
+docker-compose down
+
+# Rebuild after dependency changes
+docker-compose build
+docker-compose up
+
+# View logs
+docker-compose logs -f
+
+# View logs for specific service
+docker-compose logs -f backend
+docker-compose logs -f frontend
+```
+
+### Hot Reload
+
+Both services support hot reload out of the box:
+
+- **Backend**: Changes to `.cs` files automatically trigger `dotnet watch` to rebuild and restart
+- **Frontend**: Changes to `.tsx`, `.ts`, and `.css` files are automatically reflected in the browser
+
+Source code is mounted as volumes, so you can edit files directly and see changes immediately.
+
+### Environment Variables
+
+All environment variables are loaded from the `.env` file in the root directory. The `docker-compose.yml` uses `env_file: - .env` to automatically load all variables into both services.
+
+**Key Points:**
+
+- The `.env` file must be created in the root directory (same level as `docker-compose.yml`)
+- Variable names must match the structure of `appsettings.development.json` using `__` for nesting
+- The `.env` file is already in `.gitignore` and will not be committed to the repository
+- Both backend and frontend services read from the same `.env` file
+- Environment variables override `appsettings.development.json` when set
+
+**Converting from `appsettings.development.json` to `.env`:**
+
+| JSON Structure                                            | Environment Variable                                        |
+| --------------------------------------------------------- | ----------------------------------------------------------- |
+| `ConnectionStrings.Default`                               | `ConnectionStrings__Default`                                |
+| `Jwt.Issuer`                                              | `Jwt__Issuer`                                               |
+| `App.VerificationCodeExpiration.EmailVerificationMinutes` | `App__VerificationCodeExpiration__EmailVerificationMinutes` |
+
+**Quick Reference:**
+
+- Replace dots (`.`) with double underscores (`__`)
+- Keep the same structure and nesting
+- All string values should be unquoted
+- Copy exact values from `appsettings.development.json`
+
+### Troubleshooting
+
+#### Services won't start
+
+- Ensure Docker and Docker Compose are installed and running
+- Check that all required environment variables are set in `.env`
+- Verify ports 3000 and 3001 are not already in use
+
+#### Hot reload not working
+
+- Ensure source code volumes are properly mounted (check `docker-compose.yml`)
+- Try rebuilding containers: `docker-compose build --no-cache`
+
+#### Database connection issues
+
+- Verify `ConnectionStrings__Default` in `.env` is correct
+- Check that your database is accessible from Docker containers
+- For local PostgreSQL, use `host.docker.internal` instead of `localhost`
+- Ensure the connection string format matches: `User Id=xxx;Password=xxx;Server=xxx;Port=5432;Database=postgres`
+
+#### Frontend can't connect to backend
+
+- Verify `NEXT_PUBLIC_API_URL` in `.env` matches backend URL
+- Check that both containers are on the same Docker network
+- Ensure backend is running and accessible on port 3000
+
+---
+
 ## 🔄 CI/CD Pipeline
 
 **GitHub Actions Workflow:**

client/.dockerignore

@@ -0,0 +1,19 @@
+node_modules/
+.next/
+.git/
+.gitignore
+.env*.local
+coverage/
+.nyc_output/
+*.log
+.DS_Store
+*.swp
+*.swo
+*~
+.vscode/
+.idea/
+dist/
+build/
+*.md
+README.md
+

client/.gitignore

@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Docker
+.docker/

client/Dockerfile

@@ -0,0 +1,20 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Copy package files and install dependencies
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# Copy the rest (source code will be mounted as volume in docker-compose)
+COPY . .
+
+ENV NODE_ENV=development
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# Expose port
+EXPOSE 3001
+
+# Run dev server with hot reload
+CMD ["npm", "run", "dev"]
+

client/app/accept-invite/page.tsx

@@ -131,7 +131,7 @@ function AcceptInviteContent() {
               d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
             ></path>
           </svg>
-          <p className="mt-4 text-slate-400">Processing invitation...</p>
+          <p className="mt-4 text-slate-400">Processing invitation</p>
         </div>
       </div>
     );

client/app/account/page.tsx

@@ -34,7 +34,6 @@ export default function AccountPage() {
   const [activeTab, setActiveTab] = useState<Tab>("profile");
   const [devices, setDevices] = useState<UserDevice[]>([]);
   const [logs, setLogs] = useState<AccountLog[]>([]);
-  const [loading] = useState(true);
   const [devicesLoading, setDevicesLoading] = useState(false);
   const [logsLoading, setLogsLoading] = useState(false);
   const [editingField, setEditingField] = useState<"username" | "email" | null>(
@@ -236,7 +235,7 @@ export default function AccountPage() {
       .replace(/^./, (str) => str.toUpperCase());
   };
 
-  if (isLoading || loading) {
+  if (isLoading) {
     return (
       <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-indigo-950/50 flex items-center justify-center">
         <div className="text-center">

client/app/components/ContactModal.tsx

@@ -202,7 +202,7 @@ export default function ContactModal({ isOpen, onClose, isPublic = false }: Cont
                       d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                     ></path>
                   </svg>
-                  Sending...
+                  Sending
                 </span>
               ) : (
                 "Send Message"

client/app/components/DeleteItemModal.tsx

@@ -101,7 +101,7 @@ export default function DeleteItemModal({
             disabled={loading}
             className="flex-1 px-4 py-3 bg-red-500 text-white font-semibold rounded-lg hover:bg-red-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
           >
-            {loading ? "Deleting..." : "Delete"}
+            {loading ? "Deleting" : "Delete"}
           </button>
         </div>
       </div>

client/app/components/DeleteVaultModal.tsx

@@ -75,7 +75,7 @@ export default function DeleteVaultModal({
             disabled={loading}
             className="flex-1 px-4 py-3 bg-red-500 text-white font-semibold rounded-lg hover:bg-red-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
           >
-            {loading ? "Deleting..." : "Delete Vault"}
+            {loading ? "Deleting" : "Delete Vault"}
           </button>
         </div>
       </div>