Attendance Portal V2: The Ultimate Open-Source Employee Management System Built with React & Firebase

Bilal Ajmery — Wed, 10 Dec 2025 11:32:16 +0000

Are you tired of messy spreadsheets and manual salary calculations? Managing employee attendance shouldn't be a headache. That's why I built Attendance Portal V2—a modern, production-ready solution designed to streamline the entire process of tracking time, managing leaves, and calculating salaries.

Why Attendance Portal V2? In today's fast-paced work environment, efficiency is key. This project bridges the gap between complex enterprise software and simple, user-friendly design. Whether you are a small business owner looking for a free tool or a developer wanting to learn how to build a full-stack application with React, Vite, and Firebase, this project is for you.

What Makes It Special? Unlike basic CRUD apps, this portal handles real-world business logic:

Smart Salary Logic: Automatically calculates deductions for late arrivals, early departures, and unapproved leaves.
Role-Based Access: Completely separate, secure portals for Employees and Admins.
Beautiful UI: Built with Tailwind CSS and shadcn/ui for a premium, responsive experience.
Tech Stack:

Frontend: React 18 + Vite + TypeScript
Backend/DB: Firebase Auth & Firestore
Styling: Tailwind CSS + shadcn/ui
Check out the code, star the repo, and contribute to making workplace management easier for everyone!

👉 View the Repository on GitHub

Project Scope
The Attendance Portal V2 is a comprehensive web application designed to digitize and automate the attendance and payroll process. The system is divided into two distinct portals:

Employee Portal
Secure Login: Google Sign-In authentication.
Attendance Marking: One-click check-in/check-out with status tracking (Present, Late, Half-day).
Dashboard: View monthly statistics, including present days, leaves, and late arrivals.
Salary Insights: Real-time estimated net salary calculation based on attendance performance.
History: View past attendance records and calendar visualizations.
Admin Portal
Employee Management: Full CRUD capabilities for employee profiles.
Attendance Monitoring: View daily attendance summaries and individual employee records.
Salary Reports: Generate detailed monthly salary reports with automated deductions for:
Late arrivals (e.g., 3 lates = half-day deduction).
Unpaid leaves (1.2x deduction factor).
Early leaves (hourly deduction).
Holiday Management: Manage public holidays and auto-mark Sundays.
Admin Management: Add and manage other system administrators.

Benefits
🚀 Boost Efficiency: Eliminates manual data entry and reduces errors in salary calculations.
💸 Cost-Effective: Open-source and serverless (using Firebase), making it free to host for small teams.
🔒 Secure & Reliable: Leverages Google’s robust Firebase infrastructure for authentication and real-time data storage.
📱 Modern Experience: A fast, responsive, and intuitive interface that works great on all devices.
📈 Transparency: Employees can track their own attendance and expected salary, reducing disputes.

DEV Community: Bilal Ajmery

Attendance Portal V2: The Ultimate Open-Source Employee Management System Built with React & Firebase