Add Quiz & Documentation pages with Supabase leaderboard - Created Documentation page with PDF placeholders and hardware gallery - Created Quiz page with 15 BB84 questions and real-time leaderboard - Integrated Supabase for global leaderboard storage - Added username input and score submission with rate limiting - Added time tracking and answer review - Updated Home page with new navigation buttons - Created placeholder directories for docs and hardware photos

Author: PRODHOSH

package-lock.json

@@ -43,6 +43,7 @@
     "@radix-ui/react-tooltip": "^1.2.7",
     "@react-three/drei": "^9.122.0",
     "@react-three/fiber": "^8.18.0",
+    "@supabase/supabase-js": "^2.81.1",
     "@tanstack/react-query": "^5.83.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package.json

@@ -0,0 +1,29 @@
+# Project Documents
+
+## 📄 Add Your Files Here
+
+### Files Needed:
+
+1. **report.pdf** - Project report (upload here)
+2. **presentation.pdf** - Project presentation slides (upload here)
+
+### After Uploading:
+
+1. Place PDF files in this folder
+2. Update `src/pages/Documentation.tsx`:
+   - Find the report/presentation download buttons
+   - Remove `disabled` attribute
+   - Update the `href` or `onClick` to point to:
+     - `/docs/report.pdf`
+     - `/docs/presentation.pdf`
+
+### Example:
+```tsx
+// Change from:
+<Button disabled>Download Report (Coming Soon)</Button>
+
+// To:
+<a href="/docs/report.pdf" download>
+  <Button>Download Report</Button>
+</a>
+```

public/docs/README.md

@@ -0,0 +1,44 @@
+# Hardware Gallery Images
+
+## 📸 Add Your Hardware Photos Here
+
+### Required Images:
+
+1. **setup.jpg** - Complete hardware setup
+2. **laser.jpg** - Laser system
+3. **filters.jpg** - Polarization filters
+4. **detector.jpg** - Detection unit
+5. **electronics.jpg** - Control electronics
+6. **team.jpg** - Team working on hardware
+
+### Image Requirements:
+
+- **Format:** JPG or PNG
+- **Resolution:** At least 1920x1080 (Full HD)
+- **Orientation:** Landscape (horizontal) preferred
+- **File Size:** Under 5MB each
+
+### After Uploading:
+
+1. Place images in this folder with exact names above
+2. Update `src/pages/Documentation.tsx`:
+   - Find the `hardwareImages` array
+   - Change `placeholder: true` to `placeholder: false` for each image
+
+### Example:
+```tsx
+{
+  id: 1,
+  title: 'Complete Setup',
+  description: 'Full quantum key distribution hardware setup',
+  url: '/images/hardware/setup.jpg',
+  placeholder: false  // Change this from true to false
+}
+```
+
+### Tips:
+
+- Use good lighting for clear photos
+- Clean up the workspace before photos
+- Include captions/labels in photos if possible
+- Take multiple angles and choose the best ones

public/images/hardware/README.md

@@ -7,6 +7,8 @@ import { SimulationProvider } from "./contexts/SimulationContext";
 import Home from "./pages/Home";
 import Theory from "./pages/Theory";
 import Simulation from "./pages/Simulation";
+import Documentation from "./pages/Documentation";
+import Quiz from "./pages/Quiz";
 import NotFound from "./pages/NotFound";
 import Starfield from "@/components/ui/Starfield";
 
@@ -27,6 +29,8 @@ const App = () => (
           <Route path="/" element={<Home />} />
           <Route path="/theory" element={<Theory />} />
           <Route path="/simulation" element={<Simulation />} />
+          <Route path="/documentation" element={<Documentation />} />
+          <Route path="/quiz" element={<Quiz />} />
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
             <Route path="*" element={<NotFound />} />
           </Routes>

src/App.tsx

@@ -0,0 +1,36 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+if (!supabaseUrl || !supabaseAnonKey) {
+  throw new Error('Missing Supabase environment variables');
+}
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);
+
+// Types for our leaderboard
+export interface LeaderboardEntry {
+  id?: number;
+  username: string;
+  score: number;
+  total_questions: number;
+  time_taken: number;
+  created_at?: string;
+}
+
+// Rate limiting check - prevent spam submissions
+const SUBMISSION_COOLDOWN = 30000; // 30 seconds
+let lastSubmission = 0;
+
+export const canSubmitScore = (): boolean => {
+  const now = Date.now();
+  if (now - lastSubmission < SUBMISSION_COOLDOWN) {
+    return false;
+  }
+  return true;
+};
+
+export const updateLastSubmission = () => {
+  lastSubmission = Date.now();
+};