A modern, full-stack task management application built with React, TypeScript, Spring Boot, and MySQL. TaskSphere provides role-based access control, real-time collaboration, and comprehensive project tracking for teams of all sizes.
- Role-Based Access Control (RBAC) - CEO, Admin, Manager, Team Leader, and Member roles
- Task Management - Create, assign, track, and manage tasks with priorities and deadlines
- Team Collaboration - Organize teams, assign tasks, and track progress
- Real-time Dashboard - Dynamic metrics, charts, and activity feeds
- Calendar Integration - View tasks by dates and deadlines
- Organizational Hierarchy - Microsoft Teams-style organizational structure
- Dark/Light Mode - Persistent theme preferences
- Task Revert System - Team leaders can revert completed tasks for quality control
- Pagination - Efficient data loading with 5 items per page
- Drag & Drop Kanban - Visual task management with status updates
- Analytics & Reporting - Performance metrics and productivity insights
- Password Reset - Secure password recovery system
- Responsive Design - Works seamlessly on desktop and mobile
- React 18 with TypeScript
- Vite for fast development and building
- Tailwind CSS for styling
- Framer Motion for animations
- Recharts for data visualization
- React Router for navigation
- Lucide React for icons
- Spring Boot 3 with Java
- Spring Security for authentication
- JWT for secure token-based auth
- MySQL database
- Maven for dependency management
- CORS configuration for cross-origin requests
- Microservices - Separate UserService and TaskService
- RESTful APIs - Clean API design
- Role-based routing - Dynamic navigation based on user roles
- Centralized state management - React Context for auth
- Node.js 18+ and npm
- Java 17+
- MySQL 8.0+
- Maven 3.6+
-
Clone the repository
git clone <repository-url> cd TaskSphere/backend
-
Configure MySQL Database
CREATE DATABASE tasksphere; CREATE USER 'tasksphere_user'@'localhost' IDENTIFIED BY 'your_password'; GRANT ALL PRIVILEGES ON tasksphere.* TO 'tasksphere_user'@'localhost';
-
Update application.properties
spring.datasource.url=jdbc:mysql://localhost:3306/tasksphere spring.datasource.username=tasksphere_user spring.datasource.password=your_password
-
Start UserService
cd TaskSphere/Backend/UserService mvn spring-boot:run # Runs on http://localhost:8086
-
Start TaskService
cd TaskSphere/Backend/TaskService mvn spring-boot:run # Runs on http://localhost:8087
-
Navigate to frontend directory
cd TaskSphere/frontend/client -
Install dependencies
npm install
-
Start development server
npm run dev # Runs on http://localhost:8081
TaskSphere/
├── backend/
│ ├── UserService/ # User management microservice
│ └── TaskService/ # Task management microservice
├── frontend/
│ └── client/
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Application pages
│ │ ├── contexts/ # React contexts
│ │ ├── services/ # API services
│ │ └── lib/ # Utilities
│ └── public/
└── README.md
- Full system access
- View all organizational data
- Manage all users and teams
- User management
- System configuration
- Access to all features except CEO-level controls
- Team oversight
- Task assignment and management
- Performance analytics
- Team member management
- Task assignment within team
- Task revert capabilities
- Team performance tracking
- Personal task management
- Team collaboration
- Task status updates
- Login - JWT token generation
- Role Detection - Dynamic dashboard routing
- Protected Routes - Role-based access control
- Token Persistence - Secure token storage
- Password Reset - Email-based recovery
CREATE TABLE users (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) UNIQUE NOT NULL,
phone_number VARCHAR(20),
gender VARCHAR(10),
role VARCHAR(50) NOT NULL,
password VARCHAR(255) NOT NULL,
team_leader_id BIGINT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);CREATE TABLE tasks (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
title VARCHAR(255) NOT NULL,
description TEXT,
assigned_to BIGINT,
priority VARCHAR(20) DEFAULT 'MEDIUM',
status VARCHAR(20) DEFAULT 'TODO',
deadline DATE,
progress INT DEFAULT 0,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);- Modern Design - Clean, professional interface
- Responsive Layout - Mobile-first approach
- Smooth Animations - Framer Motion powered
- Consistent Theming - Dark/Light mode support
- Accessibility - WCAG compliant components
- Loading States - Skeleton screens and spinners
# Frontend (.env)
VITE_API_BASE_URL=http://localhost:8086
VITE_TASK_API_URL=http://localhost:8087
# Backend (application.properties)
server.port=8086
spring.datasource.url=jdbc:mysql://localhost:3306/tasksphere
jwt.secret=your-secret-keynpm run build
# Deploy dist/ folderFROM openjdk:17-jdk-slim
COPY target/app.jar app.jar
EXPOSE 8086
ENTRYPOINT ["java", "-jar", "/app.jar"]- Fork the repository
- Create feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
For support and questions:
- Email: support@tasksphere.app
- Documentation: docs.tasksphere.app
- Issues: GitHub Issues
- Mobile app (React Native)
- Real-time notifications
- File attachments
- Time tracking
- Advanced reporting
- API integrations
- Workflow automation
TaskSphere – Full-stack task management system using Spring Boot, Node, React, Docker