A modern Employee Management System built with React and Tailwind CSS that allows organizations to manage employees and their tasks seamlessly.
The system supports role-based dashboards for Admins and Employees, featuring real-time task updates, a clean UI, and data persistence using LocalStorage.
- Role-based Login: Separate dashboards for Admins and Employees.
- Employee Sign Up / Login: Employees can register and access their tasks.
- Secure Access: Admin credentials are hardcoded; employee credentials stored locally.
- Dashboard Overview: View all employees and task statistics.
- Task Assignment: Assign tasks instantly to employees.
- Employee Management: Add, edit, or delete employees.
- Live Updates: All actions reflect instantly in the UI.
- Personal Dashboard: Employees only see their own tasks.
- Task Workflow: Tasks move through New → Active → Completed/Failed tabs automatically.
- Task Actions: Accept/reject new tasks, mark them as completed or failed.
- Real-time UI: Updates happen instantly, no page refresh needed.
- Responsive & Modern Design built with Tailwind CSS.
- Dark Mode for a sleek, eye-friendly interface.
- Clear Feedback (success/error messages for every action).
- React Context API for global state management.
- LocalStorage for data persistence across page refreshes.
Frontend:
- ⚛️ React.js (Hooks, Context API)
- 🎨 Tailwind CSS (utility-first styling)
- ⚡ Vite (for fast development)
Data Handling:
- LocalStorage (no backend in this version
Language:
- Modern JavaScript (ES6+)
1️⃣ Authentication:
Admins log in with a fixed credential set (e.g., [email protected] / 123), while employees can sign up or log in.
2️⃣ Admin Dashboard:
- Manage employees, assign tasks, and view task progress in real time.
3️⃣ Employee Dashboard:
- Employees see their assigned tasks, accept or reject them, and update their progress.
4️⃣ Data Persistence:
- All updates are stored in LocalStorage and synced through React Context, so data remains intact even after refreshing.
✅ Real-world Workflow Simulation – Mirrors how real companies assign and track tasks.
✅ Instant Updates – No page reloads; all changes reflect live.
✅ Clean, Modern UI – Mobile-friendly with dark mode.
✅ Ready for Backend Integration – Can easily connect to Node.js/Express/MongoDB in the future.
- 🔗 Connect to a backend (Node.js, Express, MongoDB) for real multi-user support.
- 📩 Add email/notification system for task assignments.
- 📊 Build analytics and reporting for Admin (charts, insights).
- 📎 Allow file attachments and comments on tasks.
# Clone the repository
git clone https://github.com/yourusername/employee-management-system.git
# Move into the project folder
cd employee-management-system
# Install dependencies
npm install
# Start development server
npm run dev
- **Dipesh **