HR Management System — Technical Report
A concise overview of the application’s functionality, architecture, data design, security, deployment, and a practical roadmap for next steps.
Executive Overview
This HR Management System delivers a complete workflow for authentication, role-based access, employee administration, and staff self-service. The Admin dashboard provides KPIs, charts, leave management, password reset handling, and HR request visibility. The Employee dashboard enables staff to update their details, request leave, contact HR, and initiate password resets.
The application is built with Next.js (React + TypeScript), uses Next.js API routes on the server, and persists data in PostgreSQL. It is structured for deployment on modern platforms (Vercel, Render, or AWS). The system prioritizes clarity, maintainability, and a pragmatic path for future growth.
Delivered Features
- Authentication & Roles: Secure sign-in/out with role-based access (Admin, Employee, HR).
- Employee Management (Admin): Add, edit, delete employees. Data includes name, email, department, position, and salary; linked to user accounts.
- Dashboards: Admin KPIs and charts (department headcount, salary distribution, headcount trend). Employee dashboard with profile, avatar, and key actions.
- Leave Requests: Employees submit; Admin approves/rejects.
- HR Requests: Employees message HR; Admin/HR views with sender resolution via user linkage.
- Password Reset Flow: Employees request; Admin sets the new password (hashed).
- Profile Pictures: Avatar upload & display.
Architecture & Technology Choices
- Frontend: Next.js (App Router), React, TypeScript. CSS Modules and Bootstrap utility classes for consistent styling.
- Backend: Next.js API routes (Node.js). Clear separation of concerns, minimal controllers, and typed data shaping on the client.
- Database: PostgreSQL with normalized tables: users, employees, leave_requests, hr_requests, password_resets.
- Charts & UI: Recharts for visualizations (bar/pie/area).
- Auth: JWT-based session stored client-side (rotatable), checked in pages and API routes as needed.
This stack balances developer velocity with production viability: it’s simple to reason about, easy to test, and ready to scale with additional services.
Data Model
Core relationships are designed to keep people and accounts aligned while allowing HR operations to remain simple:
- users — authentication, role, name, email, username, password_hash.
- employees — one-to-one with users via
user_id; department, position, salary, avatar_url. - leave_requests — references employees (
employee_id); start, end, reason, status, requested_at. - hr_requests — references users (
user_id); message, status, requested_at. - password_resets — email, requested_at; processed by admin with secure hashing.
The split between users and employees ensures authentication/account data stays clean while HR-specific fields evolve independently.
Security & Access Control
- Passwords are hashed with bcrypt before storage.
- Role checks guard admin/HR actions on both the client and the server.
- Input validation on API routes; cautious JSON parsing and checks.
- Email lookups normalized (e.g., lowercased comparisons where appropriate).
- Minimal data exposure in responses (only fields needed by the UI).
UX Notes & Accessibility
- Clear navigation via a simple Navbar with anchor targets for key sections.
- Consistent button styles and layout structure for readability.
- Tables are responsive and use semantic markup for assistive tech.
- Modals provide focused tasks with clear actions and validation.
Deployment & Environments
- Preferred: Vercel for the Next.js app with Neon/Postgres or Supabase for the database.
- Alternative: Render or Railway for a full-stack managed deployment; AWS for containerized or serverless approach as the system grows.
- Environment variables for DB connection, JWT secrets, and S3 credentials.
Testing Approach
- Focused route-level testing of API endpoints.
- Client-side smoke tests of critical flows (auth, CRUD, requests).
- Manual verification of data joins (users ↔ employees, users ↔ hr_requests).
Known Limitations
- JWT rotation/refresh can be expanded for long-lived sessions.
- File uploads are kept simple; production should use S3 with signed URLs.
- More granular HR workflows (categorization, SLAs, audit logs) can be added.
- Automated tests can be broadened to include visual regression and e2e flows.
Future Improvements & Roadmap
Short Term
- Introduce signed URL uploads to S3 for avatars and attachments.
- Add pagination and sorting to tables (employees, requests).
- Strengthen auth with refresh tokens and role middleware on API routes.
- Export reports (CSV/PDF) for headcount, salary, and leave summaries.
Medium Term
- Role management UI (promote/demote users, assign HR roles).
- Richer HR workflows: categories, priorities, assignment, status history.
- Notifications (email or in-app) for approvals, resets, and HR updates.
- Team/Org views: managers, direct reports, department budget insights.
Long Term
- Performance reviews and objectives tracking.
- Time-off policy configuration and accruals.
- Compensation bands and salary benchmarking tools.
- Audit trails, analytics warehouse, and BI integration.
🧠 What was required to be Learned
- Never used Vercel before → learned deployment, env vars, Postgres hosting.
- Solved schema linking issues between
usersandemployees. - Implemented JWT authentication for secure login and roles.
⚙️ Why I Made These Choices
- Next.js App Router — modern, scalable, full-stack in one.
- PostgreSQL — reliable relational DB, Neon hosting.
- Bootstrap 5 + CSS Modules — responsive styling + branding.
- Recharts — clear KPI and trend visualization.
🚀 How I Would Improve
- Switch avatar uploads → S3 signed URLs.
- Add notifications (email + in-app) for HR events.
- Expand role/permissions with an Admin UI.
Conclusion
This system meets the assessment requirements and goes further with a practical foundation for HR workflows, security, and growth. The codebase is organized for maintainability and ready to evolve with a clear roadmap. It reflects a focus on usability, correctness, and delivery under real-world constraints.