A modern enterprise task management platform that enables organizations to efficiently assign, manage, track, and review employee tasks through a secure role-based workflow.
Enterprise Task Hub is a full-stack enterprise task management platform designed to simplify how organizations assign work, monitor employee progress, and manage task approvals.
The platform provides dedicated dashboards for Managers/Admins and Employees, allowing each role to perform its own responsibilities efficiently.
Managers can create tasks, assign employees, update priorities, edit task details, review submissions, and either approve or reject completed work. Employees can access assigned tasks, submit completion notes with project links, monitor submission status, and manage their profiles.
Authentication is secured using JWT, bcryptjs, and HTTP Cookies, ensuring that only authorized users can access protected resources.
Screenshots of Enterprise Task Hub
Click to view screenshots
- Modern enterprise task management system
- Secure JWT Authentication
- Role-based authorization (Admin & Employee)
- Separate dashboards for Admins and Employees
- Task assignment and progress tracking
- Task approval & rejection workflow
- Task priority management (Low, Medium, High, Critical)
- Employee submission notes and project links
- Profile management
- Responsive user interface
- MongoDB database integration
- Built using Express.js and Next.js
- Deployed on Vercel
- Live Demo
- Preview
- Project Highlights
- Introduction
- Features
- Workflow
- Task Lifecycle
- Technologies Used
- Backend Dependencies
- Project Structure
- Architecture Overview
- Getting Started
- Installation
- Environment Variables
- Available Scripts
- Running the Application
- Authentication & Security
- Authentication Flow
- User Roles
- Protected Routes
- Security Features
- API Overview
- User APIs
- Task APIs
- Deployment
- Production Build
- Future Improvements
- Contributing
- Author
- Usage Policy
- Acknowledgements
Enterprise Task Hub is a complete full-stack task management solution built for organizations that need a structured way to manage employee work.
The application solves common workplace challenges by providing a centralized platform where managers can assign tasks, employees can complete and submit work, and administrators can review and approve submissions.
The system follows a role-based architecture with two primary user roles:
- Admin / Manager
- Employee
Each role has its own dashboard and permissions.
Admins and managers have complete control over task management, including creating tasks, assigning employees, modifying task details, updating priorities, and reviewing submissions.
Employees can access their assigned tasks, update their progress, submit completion details, and track approval status.
The application focuses on:
- Secure authentication
- Efficient task management
- Transparent workflow
- Employee productivity tracking
- Easy collaboration between managers and employees
- User registration and login system
- JWT-based authentication
- Secure password hashing using bcryptjs
- HTTP cookie-based authentication
- Protected frontend routes
- Protected backend APIs
- Role-based access control
- Secure session management
- Dedicated admin dashboard
- Overview of assigned tasks
- Employee activity tracking
- Task progress monitoring
- Create new tasks
- Assign tasks to employees
- Edit existing tasks
- Delete tasks
- Update task details
- Change task priority
- Manage task status
Tasks can have different priority levels:
| Priority | Description |
|---|---|
| Low | Normal priority tasks |
| Medium | Regular business tasks |
| High | Important tasks requiring attention |
| Critical | Urgent tasks requiring immediate action |
Managers can:
- Review employee submissions
- Check submission notes
- Open submitted project links
- Accept completed tasks
- Reject incomplete submissions
- Request improvements
Employees get a personalized dashboard where they can:
- View assigned tasks
- Track task progress
- Monitor submission status
- Manage profile information
Employees can submit completed tasks with:
- Completion notes
- Project links
- Repository links
- Demo links
- Additional information
Employees can:
- View pending tasks
- View completed tasks
- Track approved submissions
- Track rejected submissions
flowchart TD
A[Admin Login]
--> B[Manage]
B --> C[Create Task]
C --> D[Assign Employee]
D --> E[Employee Receives Task]
E --> F[Employee Completes Work]
F --> G[Employee Submits Task]
G --> H[Manager Reviews Submission]
H --> I{Decision}
I -->|Accept| J[Task Completed]
I -->|Reject| K[Employee Updates Work]
K --> G
flowchart TD
A[Employee Login]
A --> B[My Task]
B --> C[View Assigned Tasks]
C --> D[Complete Task]
D --> E[Submit Notes + Link]
E --> F[Waiting For Review]
F --> G{Manager Decision}
G -->|Approved| H[Completed]
G -->|Rejected| I[Modify Task]
I --> D
Created
|
Assigned
|
Pending
|
Submitted
|
Under Review
|
Approved / Rejected
|
Completed
The frontend is built using modern React technologies with Next.js App Router.
- Next.js
- React.js
- JavaScript
- Redux Toolkit
- Tailwind CSS
- Shadcn UI
- Radix UI Components
- Lucide Icons
- clsx
- tailwind-merge
The backend provides REST APIs and handles authentication, database operations, and business logic.
- Node.js
- Express.js
- MongoDB
- Mongoose ODM
- JSON Web Token (JWT)
- bcryptjs
- cookie-parser
- dotenv
- cors
{
"bcryptjs": "^3.0.3",
"cookie-parser": "^1.4.7",
"cors": "^2.8.6",
"dotenv": "^17.4.2",
"express": "^5.2.1",
"jsonwebtoken": "^9.0.3",
"mongoose": "^9.6.3"
}Enterprise Task Hub
│
├── backend
│ │
│ ├── controllers
│ │ ├── task.controller.js
│ │ └── user.controller.js
│ │
│ ├── middlewares
│ │ └── isAuthenticated.js
│ │
│ ├── models
│ │ ├── task.model.js
│ │ └── user.model.js
│ │
│ ├── routers
│ │ ├── task.router.js
│ │ └── user.router.js
│ │
│ ├── utils
│ │ └── db.js
│ │
│ ├── index.js
│ ├── package.json
│ └── package-lock.json
│
│
├── frontend
│ │
│ ├── app
│ │ │
│ │ ├── (auth)
│ │ │ ├── signin
│ │ │ │ └── page.js
│ │ │ │
│ │ │ ├── signup
│ │ │ │ └── page.js
│ │ │
│ │ ├── (main)
│ │ │ │
│ │ │ ├── admin-dashboard
│ │ │ │ └── page.js
│ │ │ │
│ │ │ ├── employee-dashboard
│ │ │ │ └── page.js
│ │ │ │
│ │ │ ├── manage-tasks
│ │ │ │ └── page.js
│ │ │ │
│ │ │ ├── profile
│ │ │ │ └── page.js
│ │ │ │
│ │ │ └── tasks
│ │ │ └── page.js
│ │ │
│ │ ├── redux
│ │ │ ├── authSlice.js
│ │ │ └── store.js
│ │ │
│ │ ├── layout.js
│ │ ├── page.js
│ │ ├── globals.css
│ │ ├── provider.js
│ │ └── not-found.js
│ │
│ ├── components
│ │ │
│ │ ├── ui
│ │ │ ├── button.jsx
│ │ │ ├── input.jsx
│ │ │ ├── dialog.jsx
│ │ │ ├── tabs.jsx
│ │ │ └── textarea.jsx
│ │ │
│ │ ├── Navbar.jsx
│ │ ├── Footer.jsx
│ │ ├── ProtectedAuth.js
│ │ ├── EditTaskDialog.jsx
│ │ ├── EditProfileDialog.jsx
│ │ └── SettingsDialog.jsx
│ │
│ ├── lib
│ │ └── utils.js
│ │
│ ├── public
│ │ ├── default_pic.jpg
│ │ ├── logo.jpg
│ │ └── assets
│ │
│ ├── package.json
│ ├── next.config.mjs
│ └── package-lock.json
│
├── screenshots
├── LICENSE
└── README.md
Enterprise Task Hub follows a full-stack client-server architecture.
User
|
|
Next.js Frontend
|
|
REST API Requests
|
|
Express Backend
|
|
MongoDB Database
- User interface rendering
- Dashboard management
- Authentication state handling
- API communication
- User interaction
- Authentication handling
- Authorization checks
- Business logic
- Task management
- Database operations
- Store users
- Store tasks
- Store submissions
- Maintain relationships between employees and assigned tasks
Follow the steps below to run Enterprise Task Hub locally on your machine.
Before starting, make sure you have installed:
- Node.js (v18 or above recommended)
- npm or yarn
- MongoDB database
- Git
Check your installed versions:
node -v
npm -vgit clone https://github.com/Abad-Ali/Enterprise-Task-Hub.gitNavigate into the project:
cd Enterprise-Task-HubMove into the backend directory:
cd backendInstall backend dependencies:
npm installCreate a .env file inside the backend folder.
Example:
PORT=8000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
CLIENT_URL=http://localhost:3000Start the backend server:
npm run devBackend will run on:
http://localhost:8000
Open a new terminal.
Move into frontend:
cd frontendInstall frontend dependencies:
npm installCreate a .env.local file:
NEXT_PUBLIC_API_URL=http://localhost:8000Start the development server:
npm run devFrontend will run on:
http://localhost:3000
| Variable | Description |
|---|---|
| PORT | Backend server port |
| MONGODB_URI | MongoDB database connection |
| JWT_SECRET | Secret key for JWT authentication |
| CLIENT_URL | Frontend application URL |
Example:
PORT=8000
MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/database
JWT_SECRET=mysecretkey
CLIENT_URL=http://localhost:3000| Variable | Description |
|---|---|
| NEXT_PUBLIC_API_URL | Backend API URL |
Example:
NEXT_PUBLIC_API_URL=http://localhost:8000| Command | Description |
|---|---|
| npm run dev | Starts backend development server |
| npm start | Starts production backend server |
| Command | Description |
|---|---|
| npm run dev | Starts Next.js development server |
| npm run build | Creates production build |
| npm start | Starts production application |
| npm run lint | Runs ESLint checks |
After starting both servers:
Backend:
http://localhost:8000
Frontend:
http://localhost:3000
The application is now ready to use.
Enterprise Task Hub uses a secure authentication system to protect user accounts and application resources.
The authentication system is built using:
- JWT (JSON Web Token)
- bcryptjs password encryption
- HTTP Cookies
- Protected API Middleware
- Role-Based Authorization
flowchart TD
A[User Registration]
--> B[Password Encryption]
B --> C[User Stored In Database]
C --> D[User Login]
D --> E[JWT Token Generated]
E --> F[Token Stored In Cookie]
F --> G[Protected Routes Access]
The application supports two types of users.
Permissions:
- Access admin dashboard
- Create tasks
- Assign employees
- Update tasks
- Review submissions
- Accept submissions
- Reject submissions
Permissions:
- Access employee dashboard
- View assigned tasks
- Submit completed tasks
- Add submission notes
- Submit project links
- Track task status
Protected routes ensure that only authenticated users can access private sections.
Examples:
/admin-dashboard
/employee-dashboard
/manage-tasks
/profile
/tasks
Unauthorized users are redirected to the login page.
Implemented security practices:
- Password hashing before database storage
- JWT token validation
- Protected API endpoints
- Role-based authorization checks
- Secure cookies
- Environment-based configuration
- CORS configuration
Enterprise Task Hub uses REST APIs for communication between the frontend and backend.
| Method | Endpoint | Description |
|---|---|---|
| POST | /api/v1/user/register |
Create a new account |
| POST | /api/v1/user/login |
Login user |
| GET | /api/v1/user/logout |
Logout user |
| GET | /api/v1/user/profile |
Get logged-in user details |
| PUT | /api/v1/user/profile |
Update user profile |
| Method | Endpoint | Description |
|---|---|---|
| POST | /api/v1/task/create |
Create a new task |
| GET | /api/v1/task/all |
Get tasks |
| PUT | /api/v1/task/update/:id |
Update task details |
| DELETE | /api/v1/task/delete/:id |
Delete task |
| POST | /api/v1/task/submit/:id |
Submit completed task |
| PUT | /api/v1/task/accept/:id |
Accept submission |
| PUT | /api/v1/task/reject/:id |
Reject submission |
Enterprise Task Hub is deployed using modern cloud deployment practices.
The frontend application is deployed on:
Live Application:
https://enterprise-task-hub-pied.vercel.app
The backend can be deployed using platforms such as:
- Render
- Railway
- AWS
- DigitalOcean
- Any Node.js hosting provider
Required configuration:
- Add environment variables
- Connect MongoDB database
- Configure frontend URL in CORS
- Start production server
Create optimized production build:
npm run buildStart production server:
npm startInstall dependencies:
npm installStart server:
npm startThe following features are planned for future releases:
- Real-time notifications
- Task comments
- Employee-manager chat
- Email notifications
- Task deadlines
- Calendar integration
- Task templates
- Recurring tasks
- File attachments
- Task history logs
- Employee productivity analytics
- Task completion reports
- Performance charts
- Organization insights
- Mobile application
- Progressive Web App support
- Advanced search and filtering
- Multi-company support
- Team management system
- Dark mode improvements
Contributions are welcome and appreciated.
If you would like to improve Enterprise Task Hub, follow these steps:
Create your own fork of the project.
git clone https://github.com/Abad-Ali/Enterprise-Task-Hub.gitgit checkout -b feature/new-featureImprove the project, fix bugs, or add new functionality.
git add .
git commit -m "Add new feature"git push origin feature/new-featureSubmit a pull request explaining your changes.
Before submitting a contribution:
- Follow existing coding style
- Write clean and readable code
- Test your changes
- Update documentation if required
- Avoid breaking existing features
Full Stack Developer
Passionate about creating modern, scalable, and user-friendly web applications using current technologies.
This project is created and maintained by Abad Ali.
You are allowed to:
- Explore the source code
- Learn from the implementation
- Use it as a reference for educational purposes
- Create improvements through contributions
You are not allowed to:
- Claim this project as your own work
- Copy the complete project and redistribute it under your name
- Use personal branding, images, or content without permission
If you use this project as inspiration, proper credit is appreciated.
Special thanks to the open-source community and developers who create amazing tools and libraries that make projects like this possible.
Technologies used in this project:
- Next.js
- React
- Express.js
- MongoDB
- Mongoose
- Redux Toolkit
- Tailwind CSS
- JWT
- Open Source Community