DEV Community

Bilal Ajmery
Bilal Ajmery

Posted on

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

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:

  1. 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.

  2. 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.

Top comments (0)