Smart Mark AI

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learnedThis application is a full-stack Biometric Attendance System built using a modern "Serverless" architecture. I used a combination of web technologies and Artificial Intelligence to make it functional and responsive.

🛠️ Technologies & Frameworks React.js: The core JavaScript library used for building the user interface. It handles the "state" (like switching between the dashboard and camera) and the reactive components.

Tailwind CSS: Used for all the styling. It allows for rapid UI development using utility classes (like bg-slate-950, rounded-3xl, and backdrop-blur) to create that premium, dark-themed "Cyberpunk" aesthetic.

Firebase (Firestore & Auth): * Firestore: A NoSQL cloud database used to store student profiles, face templates (as Base64 strings), and attendance logs.

Authentication: Used to securely sign you in anonymously so you can access the database safely.

Lucide React: A library of clean, consistent vector icons (like the camera, shield, and user icons).

🤖 AI Integration Gemini 2.5 Flash: This is the "brain" of the app. It acts as the Biometric Analyst. When you click "Verify," the app captures a frame from your webcam and sends it to Gemini. Gemini compares the live image against the registered templates in the database and returns a structured JSON response (Matched/Not Matched).

Gemini TTS (Text-to-Speech): Used to generate the high-quality voice responses. It converts the verification status into audio (PCM data), which I then convert to a playable WAV format using a custom function.

What's next for Smart Mark AI

Built With

• fulstack