Secura is a high-security, zero-knowledge micro-document management system engineered for safeguarding critical identity and asset records. Built using React 18, TypeScript, and Tailwind CSS, it features a refined glassmorphic dashboard that allows users to instantly upload, view, sort, and organize sensitive payloads (such as Aadhaar, PAN, and Voter IDs). Emphasizing premium privacy, Secura features zero-overhead client-side Base64 streaming and an instant, tab-focus reactive security lock system.
- 🔒 Adaptive Tab-Switch Session Lock: Instantly locks and masks the interface with a glassmorphic overlay the exact moment a user minimizes the window, switches browser tabs, or shifts desktop focus.
- ⌨️ Mobile-Optimized 6-Digit PIN Re-Auth: Features a highly responsive visual state synced directly with a hidden semantic input trap. Pulls up native iOS/Android numeric keypads smoothly while accepting seamless physical keyboard inputs.
- ⚡ Zero-Knowledge Document Ingestion: Upload and parse document payloads directly to custom directory segments using lightweight client-side Base64 data streaming.
- 📁 Directory Segmentation: Intuitively map asset records across specific document categories (
Aadhaar,PAN,Voter ID,Other) with dedicated visual typography and asset metadata indicators. - 🎯 Fuzzy-Match Advanced Search: Deep filtering engine using multi-word sequential fuzzy matching to index filenames rapidly despite long terms or complex syntax.
- 🔄 Live Firestore Syncing: Real-time collection streams tracking structural document updates, custom dynamic inline name edits, and file deletions instantaneously.
- 📱 Ultra-Modern Bento Dashboard: A responsive layout crafted with subtle borders, deep glassmorphic highlights, and micro-interactions optimized for mobile and desktop screens.
| Category | Tools |
|---|---|
| Frontend | React 18, TypeScript, Vite |
| Styling | Tailwind CSS, Lucide React (Icons), Glassmorphic Blur Utilities |
| Backend / Database | Firebase Authentication & Cloud Firestore |
| Parsing Engine | PDF.js Dist Worker Rendering Streams |
| Deployment | Vercel (Production Toolchain Workflow) |
| Landing Page Overview | Login & Identity Gate |
|---|---|
 |
 |
| Secure Asset Dashboard | Tab-Switch Session Lock |
|---|---|
 |
 |
Abhijith Shetty Front-End Web Developer & UI Enthusiast
"Passionate about building modern, user-friendly web applications that blend aesthetic design principles with strong technical architectures."
If you love the security workflow or find the glassmorphic implementation helpful, please drop a ⭐ on GitHub! It means a lot and keeps me inspired to build clean digital interfaces.