A secure, anti-cheat enabled assessment platform built with React and TypeScript. CodeCrypt enforces strict proctoring rules including fullscreen mode, tab-switching detection, and automatic lockout upon violations.
- Anti-Cheat System: Real-time monitoring for violations
- Fullscreen Enforcement: Automatically enters and enforces fullscreen mode
- Tab-Switch Detection: Detects when users switch tabs or windows
- Built-in Timer: Tracks elapsed time during assessment
- Warning System: 2 warnings before lockout (3 strikes and you're out)
- Automatic Lockout: Persistent lockout state stored in localStorage
- Responsive UI: Modern glassmorphism design with smooth animations
- Embedded Forms: Seamlessly integrates Google Forms for assessments
- React 19.2.0 - UI framework
- TypeScript 5.9.3 - Type safety
- Vite 7.2.4 - Build tool and dev server
- CSS3 - Styling with glassmorphism effects
Before you begin, ensure you have the following installed:
- Node.js (v18 or higher recommended)
- npm or yarn package manager
- A modern web browser (Chrome, Firefox, Safari, or Edge)
git clone <your-repository-url>
cd codecrypt- Install Dependencies
Using npm:
npm install- Run Development Server
npm run devThe application will start at http://localhost:5173 (or another port if 5173 is in use).
To create a production build:
npm run buildTo preview the production build locally:
npm run previewcodecrypt/
│
├── 📁 public/
│ └── Static assets (images, fonts, etc.)
│
├── 📁 src/
│ ├── 📁 components/
│ │ ├── 📄 LandingPage.tsx # Initial welcome screen
│ │ ├── 📄 TestPage.tsx # Main assessment page
│ │ ├── 📄 WarningModal.tsx # Warning popup component
│ │ └── 📄 LockoutScreen.tsx # Lockout screen after violations
│ │
│ ├── 📄 App.tsx # Main app component with state management
│ ├── 🎨 App.css # Application styles
│ ├── 📄 main.tsx # Entry point
│ └── 🎨 index.css # Global styles
│
├── 📦 package.json # Dependencies and scripts
├── ⚙️ tsconfig.json # TypeScript configuration
├── ⚙️ vite.config.ts # Vite build configuration
└── 📖 README.md # Project documentationFor Test Takers Start Assessment: Click "Start Assessment" on the landing page Fullscreen Mode: The app will automatically enter fullscreen Stay Focused: Keep the assessment window in focus at all times
Avoid Violations: Don't switch tabs Don't exit fullscreen Don't switch to other applications Don't click the browser address bar
Warnings: You get 2 warnings before lockout Lockout: After 3 violations, you'll be permanently locked out
For Administrators To customize the embedded assessment form:
Open TestPage.tsx Replace the iframe src URL with your Google Form or assessment platform URL
src="https://forms.gle/YOUR_FORM_ID"To adjust warning limits:
Open TestPage.tsx Modify the MAX_WARNINGS constant:
const MAX_WARNINGS = 2;Violation Detection The system detects the following violations:
Tab Switching: Using Alt+Tab, Cmd+Tab, or clicking other windows Browser Navigation: Clicking the address bar or browser UI Fullscreen Exit: Pressing ESC or exiting fullscreen Window Blur: Focus leaving the assessment window Lockout Persistence The lockout state is stored in browser localStorage, preventing users from simply refreshing the page to bypass restrictions.
To reset lockout manually (for testing):
localStorage.removeItem('testStatus');Styling The app uses CSS custom properties for easy theming. Modify index.css to change:
Primary colors Text colors Glassmorphism effects Animations Timer Format The timer displays in MM:SS format. Modify the formatTime function in TestPage.tsx to change the format.
Issue: Fullscreen not working
Solution: Fullscreen requires user interaction. Ensure the "Start Assessment" button is clicked directly. Issue: Warnings triggered when filling the form
Solution: The code already handles iframe focus. If issues persist, check browser console for errors.
Issue: Stuck in lockout state
Solution: Clear localStorage using browser DevTools or run: localStorage.clear()
Please contact the repository owner for contribution guidelines and support.