Managing employees efficiently has become important.
A smart HR management system helps businesses automate everyday tasks like attendance, payroll, & leave management to save time & reduce costly human errors.
Many companies still rely on manual data entry, Excel sheets, or outdated software that causes attendance errors, inaccurate payroll calculations, & delayed salary processing.
That’s where a ReactJS HRMS (Human Resource Management System) comes in useful.
By building an HR management system in ReactJS, you can create a fast, modern, and scalable web solution that tracks payroll & attendance, manages leaves, and simplifies the entire HR process.
Want to automate HR tasks? This blog will help you understand how to create your own HRMS using ReactJS with real-world features and source code.
Why Build an HRMS in ReactJS?
If you’re planning to build a dynamic HR management system, ReactJS should be your first choice.
- ReactJS is known for its component-based architecture, which allows developers to create reusable UI elements for complex apps like HRMS.
- From employee management to payroll dashboards, every part of the app can be modular and easy to maintain.
- ReactJS offers faster rendering, better scalability, and smoother user experience, all thanks to its virtual DOM and efficient state management.
- You can integrate APIs, add authentication, or connect with databases smoothly to make it perfect for building a ReactJS employee management system.
Using HR management with ReactJS gives you the perfect mix of performance, customization, and developer-friendly scalability.
What Are the Key Modules of an HR Management System?
Let’s understand what makes a modern HR management system complete. You’ll be building all the core modules that every HR software needs using ReactJS.
- Employee Management: Create, edit, and manage employee details such as department, designation, and joining date. It serves as the central data hub for your HRMS.
- Attendance Tracker: Build a smart attendance management system that allows HR or employees to mark attendance, view daily logs, and track working hours smoothly.
- Payroll Management: Automate salary calculations with a payroll management system. It can calculate monthly pay based on attendance, leave, and deductions to generate downloadable payslips.
- Leave & Holiday Management: Develop a leave tracking system where employees can apply for leave, HR can approve or reject requests, and holidays can be managed easily.
- Dashboard with Reports: Finally, design an intuitive dashboard that gives HR teams instant insights like total employees, leave balance, and salary disbursement history.
You can build a fully functional ReactJS HR management system that handles everything from payroll to attendance efficiently and in real time.
Project Set Up to Build the ReactJS HRMS from Scratch
Follow these steps to initialize a modern ReactJS HR management system that you can extend.
Learn how to build an HR system with React and prepare the repo for the ReactJS HR management system source code.
Create the React app
# using create-react-app
npx create-react-app react-hrms
cd react-hrms
# or using Vite (faster)
npm create vite@latest react-hrms -- --template react
cd react-hrms
# install basic deps
npm install axios react-router-dom
Folder Structure
react-hrms/
├─ public/
├─ src/
│ ├─ assets/ # images, icons, GIFs, screenshots for SEO
│ ├─ components/ # reusable UI components (cards, modals)
│ ├─ pages/ # Employee, Attendance, Payroll, Leaves pages
│ ├─ services/ # API calls (axios wrappers)
│ ├─ hooks/ # custom hooks (useAuth, useFetch)
│ ├─ context/ # global state (AuthContext, HRContext)
│ ├─ utils/ # helper functions (date utils, payroll calc)
│ ├─ App.jsx
│ ├─ index.jsx
│ └─ styles/ # tailwind or css files
├─ package.json
└─ README.md
Set up Routing & UI Library
Install router and choose UI framework:
Tailwind CSS (lightweight & customizable)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# then configure tailwind.config.js and include tailwind in src/index.css
Material UI (component-rich)
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
Add router in src/App.jsx:
import { BrowserRouter, Routes, Route } from "react-router-dom";
import EmployeePage from "./pages/EmployeePage";
import AttendancePage from "./pages/AttendancePage";
import PayrollPage from "./pages/PayrollPage";
import LeavePage from "./pages/LeavePage";
export default function App(){
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<EmployeePage/>} />
<Route path="/attendance" element={<AttendancePage/>}/>
<Route path="/payroll" element={<PayrollPage/>}/>
<Route path="/leaves" element={<LeavePage/>}/>
</Routes>
</BrowserRouter>
)
}
How to Add the Core Features in the HRMS Solution?
Below are practical, minimal, and usable code examples for the core modules: Employee, Attendance, Payroll, & Leaves.
You can drop these into your src/pages and src/components folders.
1. Employee Module (Add, Edit, Delete employees)
src/services/api.js: central axios instance
import axios from "axios";
const API = axios.create({ baseURL: process.env.REACT_APP_API_URL || "http://localhost:5000/api" });
export default API;
src/pages/EmployeePage.jsx
import React, { useEffect, useState } from "react";
import API from "../services/api";
function EmployeeForm({ onSaved, editEmployee }){
const [form, setForm] = useState(editEmployee || {name:"", email:"", role:"", salary:0});
useEffect(()=> setForm(editEmployee || {name:"", email:"", role:"", salary:0}), [editEmployee]);
const save = async () => {
if(editEmployee){
await API.put(`/employees/${form._id}`, form);
} else {
await API.post("/employees", form);
}
onSaved();
}
return (
<div>
<input value={form.name} onChange={e=>setForm({...form,name:e.target.value})} placeholder="Name"/>
<input value={form.email} onChange={e=>setForm({...form,email:e.target.value})} placeholder="Email"/>
<input value={form.role} onChange={e=>setForm({...form,role:e.target.value})} placeholder="Role"/>
<input type="number" value={form.salary} onChange={e=>setForm({...form,salary: +e.target.value})} placeholder="Basic Salary"/>
<button onClick={save}>{editEmployee ? "Update" : "Add"}</button>
</div>
)
}
export default function EmployeePage(){
const [employees, setEmployees] = useState([]);
const [editing, setEditing] = useState(null);
const fetch = async ()=> { const {data} = await API.get("/employees"); setEmployees(data); }
useEffect(()=>{ fetch() }, []);
const remove = async (id)=>{ await API.delete(`/employees/${id}`); fetch(); }
return (
<div>
<h2>Employees</h2>
<EmployeeForm onSaved={fetch} editEmployee={editing}/>
<ul>
{employees.map(emp => (
<li key={emp._id}>
{emp.name} - {emp.role} - ₹{emp.salary}
<button onClick={()=>setEditing(emp)}>Edit</button>
<button onClick={()=>remove(emp._id)}>Delete</button>
</li>
))}
</ul>
</div>
);
}
This gives a full CRUD flow for employees, the base of your ReactJS HRMS code example.
2. Attendance Module (Mark attendance, view logs)
src/pages/AttendancePage.jsx
import React, {useEffect, useState} from "react";
import API from "../services/api";
export default function AttendancePage(){
const [employees, setEmployees] = useState([]);
const [logs, setLogs] = useState([]);
useEffect(()=>{ fetchEmployees(); fetchLogs(); }, []);
const fetchEmployees = async ()=> { const {data} = await API.get("/employees"); setEmployees(data);}
const fetchLogs = async ()=> { const {data} = await API.get("/attendance"); setLogs(data); }
const mark = async (empId) => {
await API.post("/attendance", { employeeId: empId, date: new Date().toISOString() });
fetchLogs();
}
return (
<div>
<h2>Attendance Tracker</h2>
<div>
<h3>Mark Attendance</h3>
{employees.map(e => (
<div key={e._id}>
<span>{e.name}</span>
<button onClick={()=>mark(e._id)}>Mark</button>
</div>
))}
</div>
<div>
<h3>Recent Logs</h3>
<ul>
{logs.map(l=>(
<li key={l._id}>{l.employeeName} - {new Date(l.date).toLocaleString()}</li>
))}
</ul>
</div>
</div>
)
}
The attendance API should record employeeId, date, and maybe status (in/out).
3. Payroll System (Calculate salary, generate payslips)
src/pages/PayrollPage.jsx
import React, {useEffect, useState} from "react";
import API from "../services/api";
export default function PayrollPage(){
const [payrolls, setPayrolls] = useState([]);
const [employees, setEmployees] = useState([]);
useEffect(()=>{ fetch(); }, []);
const fetch = async ()=> {
const emp = await API.get("/employees"); setEmployees(emp.data);
const pr = await API.get("/payroll"); setPayrolls(pr.data);
}
const generate = async (emp) => {
// simple calculation: salary - deductions (example)
const payload = { employeeId: emp._id, month: "2025-10", basic: emp.salary, deductions: 0 };
await API.post("/payroll/generate", payload);
fetch();
}
return (
<div>
<h2>Payroll</h2>
<h3>Generate Payslip</h3>
{employees.map(e=>(
<div key={e._id}>
{e.name} - ₹{e.salary}
<button onClick={()=>generate(e)}>Generate</button>
</div>
))}
<h3>Payslips</h3>
<ul>
{payrolls.map(p=>(
<li key={p._id}>{p.employeeName} - {p.month} - ₹{p.net}</li>
))}
</ul>
</div>
)
}
Payroll calculation logic (server-side) should consider attendance, leaves, taxes, and deductions.
4. Leaves & Holidays (Apply, approve, reject)
src/pages/LeavePage.jsx
import React, {useEffect, useState} from "react";
import API from "../services/api";
export default function LeavePage(){
const [leaves, setLeaves] = useState([]);
useEffect(()=>fetchLeaves(), []);
const fetchLeaves = async ()=>{ const {data} = await API.get("/leaves"); setLeaves(data); }
const applyLeave = async (payload)=>{ await API.post("/leaves", payload); fetchLeaves(); }
const respond = async (id, action)=>{ await API.put(`/leaves/${id}`, { status: action }); fetchLeaves(); }
return (
<div>
<h2>Leaves & Holidays</h2>
<div>
<h3>Apply Leave</h3>
<button onClick={()=>applyLeave({ employeeId: "EMP_ID", from:"2025-11-01", to:"2025-11-03", reason:"Vacation" })}>Apply (demo)</button>
</div>
<h3>Requests</h3>
<ul>
{leaves.map(l=>(
<li key={l._id}>
{l.employeeName} - {l.from} to {l.to} - {l.status}
<button onClick={()=>respond(l._id, "approved")}>Approve</button>
<button onClick={()=>respond(l._id, "rejected")}>Reject</button>
</li>
))}
</ul>
</div>
)
}
Here’s your Complete HRMS GitHub code with payroll & attendance features for readers to clone and test.
How Do We Build Your Next ReactJS Solution?
We specialize in creating powerful, scalable, and feature-rich ReactJS solutions according to your business needs.
- Expert ReactJS Developers: Our team builds fast, responsive, and secure HR management systems in ReactJS with the latest frameworks and UI trends.
- Custom-Built HRMS Solutions: We create end-to-end HRMS systems with attendance, payroll, & leave tracking modules designed for your organization’s workflow.
- Smooth Backend Integration: We connect ReactJS frontends with Node.js, Express, or Firebase to deliver fully functional full-stack HR management systems.
- Smart Dashboards & Real-Time Insights: Our ReactJS HR dashboards show real-time employee attendance, salary status, and HR analytics so you can make data-driven decisions.
Want a Customized ReactJS Solution? Contact Us Today!
What Are the Advanced Features to Implement in Your Next HRMS?
Once you’ve built the basic modules, it’s time to improve your project with advanced HRMS features that real-world businesses expect.
1. Role-Based Authentication
- Add separate access for Admin, HR, and Employees.
- Admins can control settings, HR can manage data, and employees can view their profiles.
2. Export Reports to Excel/PDF
- Enable exporting of payroll and attendance reports for better record-keeping and compliance.
- HR teams love downloadable insights.
3. Push & Email Notifications
- Keep users informed with instant alerts for leave approvals, attendance updates & payroll processing to improve communication within teams.
4. Dark/Light Mode & PWA Support
- Add modern touches like theme switching and Progressive Web App support for better accessibility and offline capabilities.
These features transform your basic app into a modern HR management system that’s functional & enterprise-ready.
Build Smarter HR Systems with ReactJS
By following this blog, you now know how to build a complete HR management system in ReactJS:
- Set up a full ReactJS HR management system with modern UI components.
- Automate key HR tasks like attendance tracking, payroll generation, and leave approvals.
- Connect ReactJS with backend technologies like Node.js or Firebase for real-time data handling.
With React’s scalability and component-based structure, you can easily extend your HRMS into a more advanced solution.
FAQs
- An HR management system (HRMS) is software that automates HR tasks like employee records, payroll, attendance, and leave tracking.
- It helps businesses save time, reduce manual errors, and improve overall efficiency.
- A professional HRMS should include:
- Employee management
- Attendance tracking
- Payroll calculation
- Leave management
- HR dashboard with reports
- Yes, the HRMS source code is fully customizable.
- You can modify UI elements, add authentication roles (Admin, HR, Employee), or integrate additional modules like recruitment or performance analytics.