A modern, responsive Employee Management System built with React.js, featuring task assignment, progress tracking, and role-based dashboards. Perfect for organizations looking to streamline their employee task management workflow.
- Task Creation & Assignment - Create tasks and assign them to specific employees
- Employee Overview - View all employees and their task statistics
- Real-time Updates - See task status changes in real-time
- Task Categories - Organize tasks by departments (Development, Design, Marketing, etc.)
- Personal Task View - See all assigned tasks in an organized layout
- Task Status Management - Accept, complete, or mark tasks as failed
- Progress Tracking - Visual statistics showing task completion rates
- Interactive Task Cards - Modern card-based interface for task management
- Glass Morphism Design - Beautiful backdrop blur effects and transparency
- Responsive Layout - Works perfectly on desktop, tablet, and mobile devices
- Dark Theme - Professional dark theme with gradient backgrounds
- Smooth Animations - Hover effects, transitions, and micro-interactions
- Custom Components - Reusable, well-designed UI components
- Email:
admin@me.com - Password:
admin
- Email:
employee2@example.com - Email:
employee3@example.com - Email:
employee4@example.com - Password:
123
| Technology | Purpose |
|---|---|
| React.js | Frontend framework for building user interfaces |
| Tailwind CSS | Utility-first CSS framework for styling |
| Vite | Fast build tool and development server |
| Context API | State management for user authentication and data |
| Local Storage | Client-side data persistence |
| ESLint | Code linting and formatting |
- Node.js (v16 or higher)
- npm or yarn package manager
git clone https://github.com/AliAbdullahpgr/Employee-Management-System.git
cd Employee-Management-Systemnpm install
# or
yarn installnpm run dev
# or
yarn devnpm run build
# or
yarn buildnpm run preview
# or
yarn previewsrc/
├── components/
│ ├── Auth/
│ │ └── Login.jsx
│ └── Dashboard/
│ ├── AdminDashboard.jsx
│ └── EmployeeDashboard.jsx
├── context/
│ └── AuthProvider.jsx
├── subComponents/
│ ├── Header.jsx
│ ├── TaskList.jsx
│ ├── TaskListNumber.jsx
│ ├── CreateTask.jsx
│ └── AllTask.jsx
├── TaskList/
│ ├── NewTask.jsx
│ ├── AcceptTask.jsx
│ ├── CompleteTask.jsx
│ └── FailedTask.jsx
├── utils/
│ └── localStorage.jsx
├── App.jsx
├── main.jsx
└── index.css
Create a .env file in the root directory:
VITE_APP_TITLE=Employee Management System
VITE_API_URL=http://localhost:3000The project uses a custom Tailwind configuration with:
- Custom color palette
- Glass morphism utilities
- Responsive breakpoints
- Custom animations
- Login with admin credentials
- Create Tasks using the task creation form
- Assign Tasks to specific employees from the dropdown
- Monitor Progress through the all tasks overview
- Track Statistics via the dashboard metrics
- Login with employee credentials
- View Tasks assigned to you on the dashboard
- Accept New Tasks by clicking the accept button
- Update Status by marking tasks as completed or failed
- Monitor Progress through personal statistics
- Build the project:
npm run build - Deploy the
distfolder to Netlify - Configure redirects for SPA routing
- Connect your GitHub repository to Vercel
- Set build command:
npm run build - Set output directory:
dist - Deploy automatically on push
npm run build
npm run gh-pagesContributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Follow React best practices
- Use Tailwind CSS for styling
- Maintain consistent code formatting
- Write meaningful commit messages
- Test your changes thoroughly
- Database Integration - Replace localStorage with a proper database
- Real-time Notifications - WebSocket integration for live updates
- Email Notifications - Send email alerts for task assignments
- File Attachments - Allow file uploads for tasks
- Advanced Analytics - Detailed reporting and analytics
- Mobile App - React Native mobile application
- API Documentation - Comprehensive API documentation
- Unit Testing - Complete test coverage
- Task persistence relies on localStorage (cleared on browser reset)
- No real-time synchronization between multiple sessions
- Limited to predefined employee accounts
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License
Copyright (c) 2025 Employee Management System
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
Ali Abdullah
- GitHub: @AliAbdullahpgr
- LinkedIn: Connect with me
- Email: aliabdullahpgr@gmail.com
Give a ⭐️ if this project helped you!
- React Team for the amazing framework
- Tailwind CSS for the utility-first CSS framework
- Vite for the lightning-fast build tool
- Heroicons for the beautiful SVG icons
- Community for inspiration and feedback
Made with ❤️ by Ali Abdullah
⭐ Star this repo if you found it helpful!