Task Management System Fullstack App

This project is a full-stack task management system designed to streamline project and task organization. Users can authenticate through an admin-managed process, create projects and tasks, generate reports, and benefit from various features including search functionality, filtering, and export capabilities.

Authentication Process

Only admin can create users.
Upon creation, users receive a password and email confirmation.
Authentication is necessary for accessing the system, and only confirmed users can proceed.

Project Management

CRUD operations for projects.
Search functionality for projects by name and language.

Task Management

CRUD operations for tasks.
Search functionality and filtering by status.
Excel export feature.
Employee assignment with notifications using socket.io.

Report Management

CREATE multi reports operation.
Search functionality for reports by name.
Excel export feature.
Filtering with date picker.

Other Features

User notification system.
Permission management.
Page loading and network error handling.

Tech Stack

Backend

Express.js
TypeScript
MongoDB
Nodemailer for email functionality
Socket.io for real-time notifications
Cloudinary for storing user profiles

Frontend

ReactJS
Ant Design UI for design components
SCSS for customization
Context API for state management
React Lazy Load Image Component for lazy loading profile images
Lottie React for email confirmation animations
Other relevant packages for additional functionality

Getting Started

Clone this repository.
Install dependencies for both backend and frontend.
Set up your MongoDB database.
Configure email settings with Nodemailer.
Run the backend server.
Run the frontend application.
Access the application in your browser.

.env.sample for backend

PORT = your_custom_port
MONGO_URL = mongodb+srv://username:password@cluster0.typegqq.mongodb.net/TaskManagementSym?retryWrites=true&w=majority
CLOUD_NAME = your_cloud_name
CLOUD_API_KEY = your_cloud_api_key
CLOUD_API_SECRET = your_cloud_api_secret
MAIL_SERVICE = smtp.gmail.com
MAIL_USER = your_email@gmail.com
MAIL_PASS = your_password
ABSTRACT_PRIVATE_KEY = your_abstract_private_key
JWT_SECRET_KEY = your_jwt_secret_key
CLIENT_DOMAIN = http://localhost:5173

.env.sample for frontend

VITE_ENDPOINT = "http://localhost:5173/"
VITE_API_ENDPOINT = "http://localhost:port/api/v1/"
VITE_AUTH_API_ENDPOINT = "http://localhost:port/api/v1/auth/"
NODE_ENV = 'development'

Backend

Navigate to the backend directory.
```
cd backend
```
Install dependencies.
```
npm install
```
Start the backend server.
```
npm run serve
```
or
```
yarn serve
```

Frontend

Navigate to the frontend directory.
```
cd frontend
```
Install dependencies.
```
npm install
```
Start the frontend development server.
```
npm run dev
```
or
```
yarn dev
```
Access the application in your browser by navigating to the specified URL provided by the frontend development server.

With these steps, you should be able to start both the backend and frontend servers and access the application locally for development purposes.

User Interface Screenshots

Feature	Description	Image
Dashboard	Provides an overview of projects, tasks, and reports.
Employee List	Lists all employees within the system.
Create Employee	Form to add a new employee.
Project List	Displays all projects with search and filter options.
Create Project	Form to create a new project.
Create Task	Form to assign tasks to employees.
Task List	Manages and tracks tasks with filtering by status.
Create Report	Form to generate reports based on project data.
Report Preview	Provides a visual representation of the generated report.
Report List	Lists all reports with search functionality.
Employee Profile	View and edit employee information.
Change Password	Form to update user password.
Forgot Password Form	Form to request a password reset link.
Login Page	User login interface.
Password Reset Email	Email notification sent for password reset.
Password Reset Form	Form to set a new password after requesting a reset.
Report Notification	Notification displayed for new reports.
Task Notification	Notification displayed for assigned tasks.
Verify Email	User verifiy email link after creating a new employee.
Verification Successful	Confirmation message page after successful email verification.