{"id":27249517,"url":"https://github.com/aryan-programmer/key-guard-web-ui","last_synced_at":"2026-05-04T15:31:34.871Z","repository":{"id":287011634,"uuid":"958462892","full_name":"aryan-programmer/key-guard-web-ui","owner":"aryan-programmer","description":"A UI interface for the KeyGuard project developed in Svelte with the Neobrutalism style.","archived":false,"fork":false,"pushed_at":"2025-09-10T07:48:41.000Z","size":33702,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-10T11:12:18.329Z","etag":null,"topics":["neobrutalism","neobrutalism-components","svelte","svelte-tailwindcss","svelte-ts","sveltekit","tailwind","tailwindcss","ts","typescript"],"latest_commit_sha":null,"homepage":"https://key-guard-web-ui.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aryan-programmer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-01T08:36:57.000Z","updated_at":"2025-09-10T07:48:45.000Z","dependencies_parsed_at":"2025-04-11T00:18:00.207Z","dependency_job_id":null,"html_url":"https://github.com/aryan-programmer/key-guard-web-ui","commit_stats":null,"previous_names":["aryan-programmer/key-guard-web-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aryan-programmer/key-guard-web-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aryan-programmer%2Fkey-guard-web-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aryan-programmer%2Fkey-guard-web-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aryan-programmer%2Fkey-guard-web-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aryan-programmer%2Fkey-guard-web-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aryan-programmer","download_url":"https://codeload.github.com/aryan-programmer/key-guard-web-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aryan-programmer%2Fkey-guard-web-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278547876,"owners_count":26004773,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["neobrutalism","neobrutalism-components","svelte","svelte-tailwindcss","svelte-ts","sveltekit","tailwind","tailwindcss","ts","typescript"],"created_at":"2025-04-11T00:17:58.782Z","updated_at":"2025-10-06T01:45:06.912Z","avatar_url":"https://github.com/aryan-programmer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# KeyGuard: A Modern UI for Secure RFID-based Key Management\n\nA **user interface (UI)** for the KeyGuard project, developed in Svelte with a Neobrutalism design aesthetic. This style was chosen for its stark, functional aesthetic that emphasizes clarity and direct user interaction, which is crucial for a security-focused application.\n\nA companion project to [key-guard](https://github.com/aryan-programmer/key-guard): an automatic key management and locking system utilizing RFID tags for enhanced security.\n\n## Key Features\n\nKeyGuard provides a robust solution for managing physical keys securely. Its key features include:\n\n- **RFID-based Key Management:** Automatic identification and secure latching of keys into designated slots.\n- **Robust User Authentication:** Secure user access through username/password or RFID user ID cards.\n- **Customizable Access Control:** User-specific permissions dictate which keys can be accessed (e.g., User 2 can only access Key to Lab Alpha).\n- **Intuitive Web-based UI:** A modern interface for real-time monitoring and control of key slots.\n- **Real-time Event Logging \u0026 Auditing:** Comprehensive logging of all system events for full audit trails, enhancing security and accountability.\n- **Malicious Activity Detection:** Notifies users on the UI if any suspicious activity is detected.\n\n## System Architecture\n\n### Hardware Components\n\nThe current prototype runs on a Raspberry Pi system and includes:\n\n- **Two key slots,** each featuring:\n  - One solenoid to latch the key into the slot.\n  - One RFID reader to identify the key placed in the slot.\n- **One RFID reader** for the user authentication module.\n- All RFID readers are connected to the system via a shared SPI bus.\n- **Key Identification Module:** Currently supports two distinct keys:\n  - Key 1: Key to Lab Alpha\n  - Key 2: Key to Device Beta\n- **User Authentication Module Database:** Currently contains two authorized users:\n  - User 1: Authorized to access both Key to Lab Alpha and Key to Device Beta.\n  - User 2: Authorized to access only Key to Lab Alpha.\n- Any unrecognized keys or user ID cards are rejected by the system.\n- The Python WebSocket server is implemented using the `websockets` PyPI package.\n\n### Software Stack\n\nThe project leverages modern web technologies and a Python backend:\n\n- The web UI is developed using Svelte 5 and the SvelteKit framework. Svelte was chosen for its reactivity and compiled-away framework, leading to small bundle sizes, crucial for performance and responsiveness.\n- The codebase is written in TypeScript to provide static typing during compilation/bundling, enhancing code quality and maintainability.\n- Component styling is implemented using Tailwind CSS in conjunction with Svelte’s scoped CSS styles (with PostCSS as a preprocessor), allowing for efficient and modular styling.\n- The UI uses WebSockets to communicate with the RPi server.\n  - The `websocket-as-promised` library wraps the native JavaScript WebSocket API, enabling fluent asynchronous operations using Promises and `async`/`await` syntax, which simplifies complex async workflows.\n- The Python WebSocket server is implemented using the `websockets` PyPI package, ensuring reliable real-time communication between the UI and the Raspberry Pi.\n\n## Images\n\n### Hardware prototype images\n\n#### Implemented Circuit Wiring Diagram\n\n![Implemented Circuit Wiring Diagram](./screenshots/Block%20Diagram.drawio.png)\n\n#### Front view (Visible to end users)\n\n![Front view](./screenshots/front.jpg)\n\nFront view with key inserted and user ID card reader location shown:\n\n![Front view 2](./screenshots/front-with-cards.jpg)\n\n#### Internal view\n\n![Internal view](./screenshots/internal.jpg)\n\n### Web UI Screenshots (User Workflow)\n\nThe following screenshots demonstrate the typical user workflow through the KeyGuard web interface, highlighting key interaction points and system responses.\n\nInstructions:\n\n![Instructions](./screenshots/0-Instructions.png)\n\nWebSocket Connection stage:\n\n![Connection](./screenshots/1-conn.png)\n\nLogin Page:\n\n![Login](./screenshots/2-login.png)\n\nAfter logging in (via username/password or User 1's ID card), the user is presented with the option to select a Key Slot to unlock. A selection must be made within 60 seconds, or the user will be automatically logged out. (Note: Unlocking is also possible by presenting a key card to the RFID reader, as demonstrated in the Hardware prototype images.)\n\n![Post Login](./screenshots/3-select-key.png)\n\nUpon selecting Key Slot 1 for key deposit, the user has 3 seconds to prepare.\n\n![Deposit](./screenshots/4-deposit-key.png)\n\nThe key slot then unlocks, providing 5 seconds to deposit the key (or withdraw it, as will be shown later).\n\n![Unlocked](./screenshots/5-unlocked.png)\n\nAfter depositing the key, the transaction completes, and a notification is displayed.\n\n![Transaction complete](./screenshots/6-transaction-complete.png)\n\nAfter logging in again, the option to withdraw keys becomes available. For now, we will demonstrate depositing the second key.\n\n![Deposit](./screenshots/7-deposit.png)\n\nAfter logging in again, User 1 is presented with the option to withdraw either key:\n\n![Withdraw Allowed](./screenshots/8-withdraw-allowed.png)\n\nHowever, User 2 is forbidden from accessing the Key to Device Beta:\n\n![Withdraw Blocked](./screenshots/9-withdraw-blocked.png)\n\nTo withdraw any key, simply click the corresponding button and follow a process similar to the key deposit procedure.\n\nAdditionally, any detected malicious activity will trigger a notification on the UI.\n\nFurthermore, the RPi application logs all events for comprehensive auditing.\n\nFor a full project report that adhers to the Design Engineering format, view the report PDF [here](./design_engineering_report.pdf).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faryan-programmer%2Fkey-guard-web-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faryan-programmer%2Fkey-guard-web-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faryan-programmer%2Fkey-guard-web-ui/lists"}