This PR adds comprehensive photo management features, duplicate detection, attempt limits, penalty system improvements, and admin photo deletion capabilities to the MirrorMatch application. (#1)

# Photo Management and Game Features

## Summary
This PR adds comprehensive photo management features, duplicate detection, attempt limits, penalty system improvements, and admin photo deletion capabilities to the MirrorMatch application.

## Features Added

### 1. Duplicate Photo Detection
- **File-based duplicates**: Calculates SHA256 hash of uploaded files to detect duplicate content
- **URL-based duplicates**: Checks for duplicate photo URLs
- Prevents users from uploading the same photo multiple times
- Returns HTTP 409 (Conflict) with clear error messages

### 2. Maximum Attempts Per Photo
- Uploaders can set a maximum number of guesses allowed per user for each photo
- Default: unlimited (null or 0)
- UI displays remaining attempts counter
- API enforces attempt limits before allowing guesses
- Shows warning message when max attempts reached

### 3. Penalty System Improvements
- **Simplified UI**: Removed checkbox - penalty automatically enabled when penalty points > 0
- **Score protection**: Scores cannot go below 0, even with large penalties
- If penalty would result in negative score, only deducts available points and sets to 0

### 4. Admin Photo Deletion
- Admins can delete photos from:
  - Photos list page (hover to reveal delete icon)
  - Individual photo detail page (delete button in header)
- Deletes associated guesses automatically
- Deletes local uploaded files from filesystem
- Confirmation dialog before deletion
- Proper error handling and user feedback

### 5. Navigation Improvements
- Logout button always visible in side menu (hamburger menu)
- Improved side menu layout with fixed footer for logout button
- Better mobile responsiveness

### 6. Self-Guess Prevention
- Users cannot guess on their own uploaded photos
- Shows informative message with answer for photo owners

## Technical Changes

### Database Schema
- Added `fileHash` field (String?) to Photo model for duplicate detection
- Added `maxAttempts` field (Int?) to Photo model for attempt limits
- Added indexes on `url` and `fileHash` for performance

### API Routes
- `POST /api/photos/upload-multiple`: Enhanced with duplicate checking and maxAttempts
- `POST /api/photos/[photoId]/guess`: Added maxAttempts enforcement and score floor protection
- `DELETE /api/photos/[photoId]`: New route for admin photo deletion

### Components
- `DeletePhotoButton`: New reusable component for photo deletion
- Updated upload form to remove penalty checkbox
- Enhanced photo display pages with attempt counters and admin controls

## Database Migrations
- Run `npm run db:push` to apply schema changes
- Run `npm run db:generate` to regenerate Prisma client

## Testing
- Test duplicate detection with same file and different filenames
- Test duplicate detection with same URL
- Test max attempts enforcement
- Test penalty system with various point values
- Test score floor (cannot go below 0)
- Test admin photo deletion
- Test self-guess prevention

## Breaking Changes
None - all changes are backward compatible. Existing photos will have `null` for `maxAttempts` (unlimited) and `fileHash` (for URL uploads).

Reviewed-on: #1

.github/workflows/ci.yml

@@ -1,3 +1,4 @@
+# CI (triggered)
 name: CI
 
 on:
@@ -11,7 +12,7 @@ jobs:
   skip-ci-check:
     runs-on: ubuntu-latest
     outputs:
-      should-skip: ${{ steps.check.outputs.skip }}
+      should-skip: ${{ steps.check.outputs.skip || 'false' }}
     steps:
       - name: Check out code (for commit message)
         uses: actions/checkout@v4
@@ -21,6 +22,8 @@ jobs:
       - name: Check if CI should be skipped
         id: check
         run: |
+          SKIP=false
+
           # Simple skip pattern: @skipci (case-insensitive)
           SKIP_PATTERN="@skipci"
 
@@ -36,23 +39,21 @@ jobs:
             COMMIT_MSG=$(git log -1 --pretty=%B 2>/dev/null || echo "")
           fi
 
-          SKIP=0
-
           # Check branch name (case-insensitive)
           if echo "$BRANCH_NAME" | grep -qiF "$SKIP_PATTERN"; then
             echo "Skipping CI: branch name contains '$SKIP_PATTERN'"
-            SKIP=1
+            SKIP=true
           fi
 
           # Check commit message (case-insensitive)
-          if [ $SKIP -eq 0 ] && [ -n "$COMMIT_MSG" ]; then
+          if [ "$SKIP" = "false" ] && [ -n "$COMMIT_MSG" ]; then
             if echo "$COMMIT_MSG" | grep -qiF "$SKIP_PATTERN"; then
               echo "Skipping CI: commit message contains '$SKIP_PATTERN'"
-              SKIP=1
+              SKIP=true
             fi
           fi
 
-          echo "skip=$SKIP" >> $GITHUB_OUTPUT
+          echo "skip=$SKIP" >> "$GITHUB_OUTPUT"
           echo "Branch: $BRANCH_NAME"
           echo "Commit: ${COMMIT_MSG:0:50}..."
           echo "Skip CI: $SKIP"
@@ -60,7 +61,7 @@ jobs:
   lint-and-type-check:
     needs: skip-ci-check
     runs-on: ubuntu-latest
-    if: needs.skip-ci-check.outputs.should-skip != '1'
+    if: &should_run ${{ needs.skip-ci-check.outputs.should-skip != 'true' }}
     container:
       image: node:20-bullseye
     steps:
@@ -70,6 +71,11 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Generate Prisma Client
+        run: npm run db:generate
+        env:
+          DATABASE_URL: postgresql://postgres:postgres@localhost:5432/mirrormatch?schema=public
+
       - name: Run ESLint
         run: npm run lint
 
@@ -79,7 +85,7 @@ jobs:
   test:
     needs: skip-ci-check
     runs-on: ubuntu-latest
-    if: needs.skip-ci-check.outputs.should-skip != '1'
+    if: *should_run
     container:
       image: node:20-bullseye
     services:
@@ -127,7 +133,7 @@ jobs:
   build:
     needs: skip-ci-check
     runs-on: ubuntu-latest
-    if: needs.skip-ci-check.outputs.should-skip != '1'
+    if: *should_run
     container:
       image: node:20-bullseye
     steps:
@@ -139,6 +145,9 @@ jobs:
 
       - name: Generate Prisma Client
         run: npm run db:generate
+        env:
+          # Use the same connection string we provide to the build step so Prisma can generate types
+          DATABASE_URL: postgresql://postgres:postgres@localhost:5432/mirrormatch?schema=public
 
       - name: Build application
         run: npm run build
@@ -149,7 +158,7 @@ jobs:
 
   secret-scanning:
     needs: skip-ci-check
-    if: needs.skip-ci-check.outputs.should-skip != '1'
+    if: *should_run
     runs-on: ubuntu-latest
     container:
       image: zricethezav/gitleaks:latest
@@ -169,7 +178,7 @@ jobs:
 
   dependency-scan:
     needs: skip-ci-check
-    if: needs.skip-ci-check.outputs.should-skip != '1'
+    if: *should_run
     runs-on: ubuntu-latest
     container:
       image: aquasec/trivy:latest
@@ -203,7 +212,7 @@ jobs:
 
   sast-scan:
     needs: skip-ci-check
-    if: needs.skip-ci-check.outputs.should-skip != '1'
+    if: *should_run
     runs-on: ubuntu-latest
     container:
       image: ubuntu:22.04

.prisma/client

@@ -1 +0,0 @@
-../node_modules/.prisma/client

app/api/photos/[photoId]/route.ts

@@ -47,7 +47,7 @@ export async function DELETE(
         try {
           await unlink(filepath)
         } catch (error) {
-          console.error(`Failed to delete file ${filepath}:`, error)
+          console.error("Failed to delete file:", filepath, error)
           // Continue with database deletion even if file deletion fails
         }
       }

app/api/photos/route.ts

@@ -46,6 +46,7 @@ export async function POST(req: NextRequest) {
         answerName: answerName.trim(),
         points: pointsValue,
         maxAttempts: maxAttemptsValue,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } as any,
       include: {
         uploader: {
@@ -72,7 +73,9 @@ export async function POST(req: NextRequest) {
     Promise.all(
       allUsers.map((user: { id: string; email: string; name: string }) =>
         sendNewPhotoEmail(user.email, user.name, photo.id, photo.uploader.name).catch(
-          (err) => console.error(`Failed to send email to ${user.email}:`, err)
+          (err) => {
+            console.error("Failed to send email to:", user.email, err)
+          }
         )
       )
     )

app/api/photos/upload-multiple/route.ts

@@ -6,7 +6,6 @@ import { writeFile } from "fs/promises"
 import { join } from "path"
 import { existsSync, mkdirSync } from "fs"
 import { createHash } from "crypto"
-import type { Photo } from "@prisma/client"
 
 export async function POST(req: NextRequest) {
   try {
@@ -44,7 +43,13 @@ export async function POST(req: NextRequest) {
       mkdirSync(uploadsDir, { recursive: true })
     }
 
-    type PhotoWithUploader = Photo & {
+    type PhotoWithUploader = {
+      id: string
+      uploaderId: string
+      url: string
+      answerName: string
+      points: number
+      createdAt: Date
       uploader: { name: string }
     }
     
@@ -106,6 +111,7 @@ export async function POST(req: NextRequest) {
 
         // Check for duplicate file
         const existingPhoto = await prisma.photo.findFirst({
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           where: { fileHash } as any,
         })
 
@@ -118,9 +124,12 @@ export async function POST(req: NextRequest) {
 
         const timestamp = Date.now()
         const randomStr = Math.random().toString(36).substring(2, 15)
-        const extension = file.name.split(".").pop() || "jpg"
+        // Sanitize extension - only allow alphanumeric characters
+        const rawExtension = file.name.split(".").pop() || "jpg"
+        const extension = rawExtension.replace(/[^a-zA-Z0-9]/g, "").toLowerCase() || "jpg"
         const filename = `${timestamp}-${i}-${randomStr}.${extension}`
 
+        // Filename is generated server-side (timestamp + random), safe for path.join
         const filepath = join(uploadsDir, filename)
         await writeFile(filepath, buffer)
 
@@ -158,6 +167,7 @@ export async function POST(req: NextRequest) {
           penaltyEnabled: penaltyEnabled,
           penaltyPoints: penaltyPointsValue,
           maxAttempts: maxAttemptsValue,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
         } as any,
         include: {
           uploader: {
@@ -168,7 +178,7 @@ export async function POST(req: NextRequest) {
         },
       })
 
-      createdPhotos.push(photo as PhotoWithUploader)
+      createdPhotos.push(photo)
     }
 
     // Send emails to all other users for all photos
@@ -193,12 +203,9 @@ export async function POST(req: NextRequest) {
               user.name,
               photo.id,
               photo.uploader.name
-            ).catch((err) =>
-              console.error(
-                `Failed to send email to ${user.email} for photo ${photo.id}:`,
-                err
-              )
-            )
+            ).catch((err) => {
+              console.error("Failed to send email to:", user.email, "for photo:", photo.id, err)
+            })
           )
         )
       )

app/api/photos/upload/route.ts

@@ -62,6 +62,7 @@ export async function POST(req: NextRequest) {
 
       // Check for duplicate file
       const existingPhoto = await prisma.photo.findFirst({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         where: { fileHash } as any,
       })
 
@@ -75,7 +76,9 @@ export async function POST(req: NextRequest) {
       // Generate unique filename
       const timestamp = Date.now()
       const randomStr = Math.random().toString(36).substring(2, 15)
-      const extension = file.name.split(".").pop() || "jpg"
+      // Sanitize extension - only allow alphanumeric characters
+      const rawExtension = file.name.split(".").pop() || "jpg"
+      const extension = rawExtension.replace(/[^a-zA-Z0-9]/g, "").toLowerCase() || "jpg"
       const filename = `${timestamp}-${randomStr}.${extension}`
 
       // Ensure uploads directory exists
@@ -84,7 +87,7 @@ export async function POST(req: NextRequest) {
         mkdirSync(uploadsDir, { recursive: true })
       }
 
-      // Save file
+      // Filename is generated server-side (timestamp + random), safe for path.join
       const filepath = join(uploadsDir, filename)
       await writeFile(filepath, buffer)
 
@@ -122,6 +125,7 @@ export async function POST(req: NextRequest) {
         answerName: answerName.trim(),
         points: pointsValue,
         maxAttempts: maxAttemptsValue,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } as any,
       include: {
         uploader: {
@@ -148,7 +152,9 @@ export async function POST(req: NextRequest) {
     Promise.all(
       allUsers.map((user: { id: string; email: string; name: string }) =>
         sendNewPhotoEmail(user.email, user.name, photo.id, photo.uploader.name).catch(
-          (err) => console.error(`Failed to send email to ${user.email}:`, err)
+          (err) => {
+            console.error("Failed to send email to:", user.email, err)
+          }
         )
       )
     )

app/photos/[id]/page.tsx

@@ -49,10 +49,17 @@ export default async function PhotoPage({ params }: { params: Promise<{ id: stri
   const hasCorrectGuess = userGuess?.correct || false
   const isOwner = photo.uploaderId === session.user.id
   
+  // Type assertion for new fields (penaltyEnabled, penaltyPoints, maxAttempts)
+  type PhotoWithNewFields = typeof photo & {
+    penaltyEnabled: boolean
+    penaltyPoints: number
+    maxAttempts: number | null
+  }
+  const photoWithFields = photo as PhotoWithNewFields
+  
   // Calculate remaining attempts
-  const photoWithMaxAttempts = photo as typeof photo & { maxAttempts: number | null | undefined }
   const userGuessCount = photo.guesses.length
-  const maxAttempts = photoWithMaxAttempts.maxAttempts ?? null
+  const maxAttempts = photoWithFields.maxAttempts ?? null
   const remainingAttempts = maxAttempts !== null && maxAttempts > 0 
     ? Math.max(0, maxAttempts - userGuessCount)
     : null
@@ -77,9 +84,9 @@ export default async function PhotoPage({ params }: { params: Promise<{ id: stri
               <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
                 +{photo.points} {photo.points === 1 ? "point" : "points"} if correct
               </span>
-              {(photo as any).penaltyEnabled && (photo as any).penaltyPoints > 0 && (
+              {photoWithFields.penaltyEnabled && photoWithFields.penaltyPoints > 0 && (
                 <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
-                  -{(photo as any).penaltyPoints} {(photo as any).penaltyPoints === 1 ? "point" : "points"} if wrong
+                  -{photoWithFields.penaltyPoints} {photoWithFields.penaltyPoints === 1 ? "point" : "points"} if wrong
                 </span>
               )}
               {maxAttempts !== null && maxAttempts > 0 && (
@@ -117,9 +124,9 @@ export default async function PhotoPage({ params }: { params: Promise<{ id: stri
                 <p className="text-sm text-red-700 mt-1">
                   Your last guess: <strong>{userGuess.guessText}</strong>
                 </p>
-                {(photo as any).penaltyEnabled && (photo as any).penaltyPoints > 0 && (
+                {photoWithFields.penaltyEnabled && photoWithFields.penaltyPoints > 0 && (
                   <p className="text-sm text-red-700 mt-1">
-                    You lost <strong>{(photo as any).penaltyPoints} {(photo as any).penaltyPoints === 1 ? "point" : "points"}</strong> for this wrong guess.
+                    You lost <strong>{photoWithFields.penaltyPoints} {photoWithFields.penaltyPoints === 1 ? "point" : "points"}</strong> for this wrong guess.
                   </p>
                 )}
               </div>

components/Navigation.tsx

@@ -29,14 +29,14 @@ export default function Navigation() {
 
   return (
     <>
-      <nav className="sticky top-0 z-50 bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg">
+      <nav className="sticky top-0 z-50 bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg relative">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-16">
             {/* Logo and Menu Button */}
             <div className="flex items-center space-x-4">
               <button
                 onClick={() => setSideMenuOpen(!sideMenuOpen)}
-                className="menu-button p-2 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-white"
+                className="menu-button p-2 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-white relative z-10"
                 aria-label="Toggle menu"
               >
                 <svg
@@ -51,29 +51,31 @@ export default function Navigation() {
                   <path d="M4 6h16M4 12h16M4 18h16" />
                 </svg>
               </button>
-              <Link href="/" className="text-xl font-bold">
+              <Link href="/" className="text-xl font-bold relative z-10">
                 MirrorMatch
               </Link>
             </div>
 
             {/* Main Actions - Always Visible */}
-            <div className="flex items-center space-x-4">
+            <div className="flex items-center space-x-4 relative z-10">
               <Link
                 href="/upload"
-                className="hover:bg-purple-700 px-3 py-2 rounded-md text-sm font-medium transition whitespace-nowrap"
+                className="hover:bg-purple-700 px-3 py-2 rounded-md text-sm font-medium transition whitespace-nowrap relative z-10"
+                onClick={() => setSideMenuOpen(false)}
               >
                 Upload
               </Link>
               <Link
                 href="/leaderboard"
-                className="hover:bg-purple-700 px-3 py-2 rounded-md text-sm font-medium transition whitespace-nowrap"
+                className="hover:bg-purple-700 px-3 py-2 rounded-md text-sm font-medium transition whitespace-nowrap relative z-10"
+                onClick={() => setSideMenuOpen(false)}
               >
                 Leaderboard
               </Link>
             </div>
 
             {/* User Info */}
-            <div className="flex items-center">
+            <div className="flex items-center relative z-10">
               <span className="text-sm">Hello, {session.user.name}</span>
             </div>
           </div>
@@ -82,7 +84,7 @@ export default function Navigation() {
 
       {/* Side Menu */}
       <div
-        className={`side-menu fixed top-16 left-0 h-[calc(100vh-4rem)] w-64 bg-white shadow-xl z-40 transform transition-transform duration-300 ease-in-out flex flex-col ${
+        className={`side-menu fixed top-16 left-0 h-[calc(100vh-4rem)] w-64 bg-white shadow-xl z-30 transform transition-transform duration-300 ease-in-out flex flex-col ${
           sideMenuOpen ? "translate-x-0" : "-translate-x-full"
         }`}
       >
@@ -154,7 +156,7 @@ export default function Navigation() {
       {/* Overlay for mobile */}
       {sideMenuOpen && (
         <div
-          className="fixed inset-0 bg-black bg-opacity-50 z-30 sm:hidden"
+          className="fixed inset-0 bg-black bg-opacity-50 z-20 sm:hidden"
           onClick={() => setSideMenuOpen(false)}
         />
       )}

package.json

@@ -14,6 +14,7 @@
     "test:coverage": "jest --coverage",
     "test:ci": "jest --ci --coverage --maxWorkers=2",
     "db:generate": "prisma generate",
+    "postinstall": "prisma generate",
     "db:migrate": "prisma migrate dev",
     "db:push": "prisma db push",
     "db:studio": "prisma studio",

prisma/schema.prisma

@@ -3,7 +3,6 @@
 
 generator client {
   provider = "prisma-client-js"
-  output   = "../node_modules/@prisma/client/.prisma/client"
 }
 
 datasource db {

tsconfig.json

@@ -19,8 +19,7 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"],
-      ".prisma/client": ["./node_modules/.prisma/client"]
+      "@/*": ["./*"]
     }
   },
   "include": [