Redacrypt FE is the frontend interface of Redacrypt, a secure document redaction web application. It enables users to upload sensitive documents, process them with server-side OCR, and redact information either automatically (via regex detection) or manually using a brush-based redaction tool. The frontend is built using Next.js (App Router), TailwindCSS, and integrates directly with backend APIs for file handling, redaction, and export.
- Framework: Next.js (App Router)
- UI Library: TailwindCSS, ShadCN UI
- Canvas Redaction: Konva.js (manual brush-based redaction)
- Rendering: pdf.js for PDF rendering, native image handling for PNG/JPEG
- Auth: OAuth 2.0 via JWT (Google OAuth)
- Storage: Supabase S3 Bucket (encrypted objects)
- Real-Time: WebSocket for preview sync (future)
- Export: Download redacted version in original file format
redacrypt-fe/
├── app/ # App Router structure
│ └── dashboard/ # Protected routes for authenticated users
├── components/ # UI elements: Navbar, RedactionCanvas, FileUpload, ExportDialog
├── features/ # Features within this folder there are also hooks, serviec, etc.
├── lib/ # Utilities (auth, file conversion, API clients)
├── hooks/ # React hooks (useRedaction, useUpload)
├── context/ # Global state (user, canvas, document)
├── types/ # TypeScript types
├── public/ # Static assets (logo, icons)
└── middleware.ts # Auth-protected route middleware (JWT-based)
-
Clone the Repository
git clone https://github.com/diognio/redacrypt-fe.git cd redacrypt-fe -
Install Dependencies
npm install
-
Configure Environment Variables Create a
.env.localfile:NEXT_PUBLIC_API_URL=http://localhost:3000 NEXT_PUBLIC_SUPABASE_URL=... NEXT_PUBLIC_SUPABASE_ANON_KEY=...
-
Run Development Server
npm run dev
- OAuth via Google Sign-In
- JWT token stored in cookies, refreshed automatically
- Middleware enforces protected access to document history and storage
- Drag-and-drop or file picker
- Supports PDF, JPG, PNG (≤2MB)
- Pre-validation on client before upload
- Triggered after upload, server-side using PyTesseract
- Shows extracted text and confidence score overlay
- Editable regions (optional correction UI if required)
- Automatic: Regex-based highlight (emails, IDs, phones)
- Manual: Click-and-drag brush redaction over document layer
- Visual methods: blur or black mask (toggleable)
- Supports undo for manual edits
- Downloadable in original format (PDF in = PDF out)
- Redacted layer flattened—irreversible
- Anonymous: one-time download only
- Registered: stored securely for 7 days (AES-256 encrypted)
- See redacted document history (past 7 days)
- Redownload or delete files
- Isolated per-user via JWT
- Fully responsive (mobile/tablet/desktop)
- WCAG 2.1 compliant (keyboard, focus ring, color contrast)
- All workflows require max 3 steps (upload → redact → export)
- AES-256 encrypted file storage (handled backend)
- JWT with refresh token support
- Redacted content not recoverable
- Rate limit: 10 OCR operations per hour per user
- Anonymous uploads deleted after export
- File upload and validation
- OCR trigger and preview
- Redaction tools (auto + manual)
- Download/export output
- Auth integration (OAuth + JWT)
- Dashboard for registered users
- Real-time view-only sync (phase 2)
- PDF export metadata (phase 2)
- Optimized for Vercel
- Setup environment variables via dashboard
npm run build && npm startfor production preview
Redacrypt FE provides a secure and responsive frontend interface for document upload, OCR processing, and redaction. With brush-based manual tools and automatic regex detection, it ensures sensitive data is safely masked before export. Designed with privacy, usability, and extensibility in mind, it adheres to strict constraints defined in the official Software Requirements Specification (SRS).