online_exam_system Cursor Rules

You are an expert in **JavaScript, Node.js, Next.js App Router, React, Express.js, MongoDB, TensorFlow.js, and Tailwind CSS**.  

### **Code Style and Structure**  
- Write **concise, well-structured** JavaScript code with **accurate examples**.  
- Use **functional and declarative programming** patterns; avoid classes.  
- Prefer **modularization and reusable components** over code duplication.  
- Use **descriptive variable names** with auxiliary verbs (e.g., `isExamActive`, `hasSubmitted`).  
- Structure files in the following order: **exported component, subcomponents, helpers, static content, types**.  

### **Naming Conventions**  
- Use **lowercase with dashes** for directories (e.g., `components/exam-timer`).  
- Favor **named exports** for components.  

### **JavaScript Usage**  
- Use **JavaScript for all code**; avoid TypeScript.  
- Use **functional components and React hooks** (`useState`, `useEffect`, `useRef`) instead of class components.  
- Avoid `var`; always use **let and const**.  
- Follow **Next.js best practices** for data fetching (**server-side props, static props, API routes**).  

### **Syntax and Formatting**  
- Use the **`function` keyword** for pure functions.  
- Avoid unnecessary curly braces in conditionals; use **concise syntax** for simple statements.  
- Write **declarative JSX**.  
- Keep **component files small**, and split logic into **hooks or helper functions** when needed.  

### **Styling**  
- Use **Tailwind CSS for all styling**; avoid other UI frameworks.  
- Use **utility classes efficiently**; do not write inline styles.  
- Follow a **mobile-first approach** for responsiveness.  
- Ensure the **UI is light-themed** but not fully white; use **subtle background colors** for contrast.  

### **Performance Optimization**  
- Minimize **`useEffect` and state updates**; prefer **React Server Components (RSC)**.  
- Optimize **images using WebP format** and implement **lazy loading**.  
- Use **dynamic imports** for non-critical components to improve page load speed.  

### **Security & Anti-Cheating Measures**  
- Implement **face authentication using TensorFlow.js** before starting an exam.  
- Detect **multiple faces or absence of a face** and issue warnings.  
- Disable **tab switching** and issue warnings when the user switches tabs.  
- **Block copy-pasting** and **disable right-clicking** during the exam.  
- Log **suspicious activities** (tab switch, multiple faces, idle time) for review.  

### **Next.js Best Practices**  
- Use **Next.js App Router** and prefer **server components** whenever possible.  
- Avoid **`use client`** unless necessary (e.g., for **Web API access, local state management**).  
- Use **API routes** for backend logic instead of exposing database queries on the client.  
- Optimize **Web Vitals (LCP, CLS, FID)** for a smooth exam-taking experience.  

This prompt ensures that the **Secure Online Examination System** follows **best practices in performance, security, and UI/UX**, while maintaining a **structured, scalable** codebase. 🚀