DEV Community

Cover image for Security Logger
Enmanuel Magallanes Pinargote
Enmanuel Magallanes Pinargote

Posted on • Originally published at enmanuelmag.cardor.dev

Security Logger

Disclaimer: The only real data in this site was hidden to protect the privacy of the user. The rest of the data is fake.

This project is build with ViteJs and ReactJs, the main idea is to create a web app and also a native desktop app to register new visitors on urbanization, the web app is for the directive (i.e urbanization president) and the desktop app is for the security guard.

The app allow to create user three types of user:

  • Admin: Can create new users and also can see all the logs
  • Security guard: Can create, read and update new logs
  • Guest: Can only read the logs

The records are stored first in the IndexDB and then are synced with the Firestore database, the app also has a offline mode, so the user can use the app without internet connection and when the connection is available the app will sync the data with the database.

The records could be filtered by visitor name, visitor ID, date, and also by the house number, the app also has a search bar that allow to search by name quickly. Also, you can exported the entire records of filtered records to a XLSX file or a PDF file.

Deep learning integration

This app also has a integration with a other personal project, that consist in a Deep Learning model that can detect and extract the text of visitor name and ID from a image. So the app can extract the image from the security camera that focus the visitor ID and the model will extract the text and fill the form with the data. The information can be edited by the security guard too. The model is build with Tensorflow based on a little version of YOLOv5.

Web app view

Currently the app is only available in Spanish, and deploy or installation is only available previos contact and agreement. The app will have more tools powered by AI to detect and extract more information as vehicle plate, visitor face, etc.

Tech used

  • Firebase (Auth, Firestore)
  • ReactJs, React Router, React Context
  • React-Query
  • Zod (Validation)
  • Tensorflow

Top comments (0)