🚀 TaskStream Pro: Full-Stack Productivity Dashboard

A professional-grade task management system featuring a PriorityQueue-driven backend and a reactive Angular 21 dashboard. Built with a specialized Cyan & Orange theme, supporting real-time synchronization, undo/redo state management, and power-user optimizations.

---

✨ Core Features

• ⚡ High-Performance UI: Built with Angular 21, Tailwind CSS v4, and Material 3.
• 🌓 Unified Dark Mode: Synchronized theme switching across Tailwind and Material UI components.
• 🔄 State Management: Full Undo/Redo capabilities via backend stacks.
• 📊 Advanced Reporting: Real-time category-based filtering and PDF Export using jsPDF.
• 🚀 Power-User UX:
  • Optimistic UI Updates: Instant task addition/removal reflected in the UI before sync.
  • Keyboard Shortcuts: Alt+N (New), Alt+S (Sync), Alt+F (Search).
  • Visual Feedback: Pulse animations for task execution and red-border overdue highlighting.
• 🛡️ Robust Backend: Java Spring Boot with Hibernate One-To-Many relationships and transactional integrity.

---

🛠️ Tech Stack

Frontend

• Framework: Angular 21+ (Signals, Computed, Standalone Components)
• Styling: Tailwind CSS v4 & Angular Material 3
• HTTP: Modern provideHttpClient(withFetch())
• PDF Engine: jsPDF & jspdf-autotable

Backend

• Language: Java 17+
• Framework: Spring Boot 3.x
• Database: H2/PostgreSQL with Spring Data JPA
• Logic: PriorityQueue for task ordering, Stack for Undo/Redo.

---

🚀 Getting Started

1. Prerequisites

• Node.js: v20+
• JDK: 17+
• Docker: (Optional, for containerized deployment)

2. Backend Setup

# Navigate to backend
cd task-backend

# Build and run the Spring Boot application
./gradlew bootRun

The API will be available at http://localhost:8081

3. Frontend Setup

# Navigate to frontend
cd task-frontend

# Install dependencies
npm install

# Start the dev server
ng serve

The API will be available at http://localhost:4200

📡 API Endpoints (TaskingEntity)

All endpoints are prefixed with http://localhost:8081/api/v1/todo/task.

Method	Endpoint	Parameters (Query)	Description
POST	/add	priority, description, category, email	Creates a new task and links it to the user.
GET	/next		Polls and removes the highest priority task from the queue.
POST	/undo		Reverts the last addition/removal in the current session.
POST	/redo		Re-applies the last undone action.
GET	/		Returns all active tasks sorted by priority (P1 first).
POST	/save	email	Persists the in-memory queue to the database for the user.
GET	/load	email	Loads the user's persisted tasks from the database into the queue.
DELETE	/cleanup	threshold, email	Purges all tasks with priority > threshold (e.g., deletes P3, P4).
GET	/report	email	Returns a JSON Map of tasks grouped by their category.
GET	/overdue	email	Returns a list of tasks where the dueDate is before today.

---

🏥 System Monitoring (Spring Actuator)

The backend provides real-time health metrics for monitoring and orchestration (e.g., Kubernetes Liveness Probes).

Endpoint	Description
/actuator/health	Returns UP if the Application and Database are healthy.
/actuator/metrics	List of JVM metrics (Memory, CPU, Threads).
/actuator/info	Custom build information and versioning.

---

🏥 System Vitals

The dashboard includes a real-time System Health Indicator.

• Pulsing Green: Backend is reachable and Database is connected.
• Pulsing Red: Backend is offline or the Database connection has failed.
• Actuator Endpoint: Accessible at http://localhost:8081/actuator/health.

💡 DevOps Tip

In a Production Docker environment, you can point your Nginx or Load Balancer to /actuator/health. If the database fails, the health check will return a 503 Service Unavailable, and the system can automatically restart the container.

💡 API Implementation Notes

• Unique Constraint: The system enforces a unique constraint on the email field in the user_tasks table.
• Transactionality: The /save and /add endpoints use @Transactional to ensure the One-To-Many relationship between Users and Tasks remains consistent.
• Date Format: The backend expects dueDate as a string in the format MM/dd/yyyy which is then parsed into a LocalDate.

⌨️ Keyboard Shortcuts (Power User)

These shortcuts are globally accessible via the dashboard using the Alt modifier key for maximum productivity.

Shortcut	Action	Description
Alt + N	New Task	Opens the Add Task dialog and focuses the description field.
Alt + S	Sync to Cloud	Persists current session tasks to the database via the /save endpoint.
Alt + F	Focus Search	Instantly highlights the search bar to filter tasks by description.
Alt + Z	Undo	Reverts the last addition or removal from the task queue.
Alt + Y	Redo	Re-applies the last undone task action.
Alt + X	Clear Search	Resets the search filter to show all active tasks.

---

💡 User Tip

You can hover over any primary button in the header to see a Tooltip reminder of its specific keyboard shortcut.

📦 Docker Deployment

This project is fully containerized with Multi-stage builds.

# Clean existing data and spin up services
docker system prune -a --volumes
docker-compose up --build

🎨 Theme Configuration

The project uses a custom Cyan-600 primary and Orange-500 secondary palette. Dark mode is toggled via the .dark class on the <html> element, which automatically updates both Tailwind utilities and Material 3 design tokens.

🛠️ Troubleshooting

⚠️ NonUniqueResultException (Duplicate User Records)

If the backend logs show org.hibernate.NonUniqueResultException: Query did not return a unique result, it means multiple rows exist for a single email in the user_tasks table.

The Fix:

1. Clear the Database: Since the schema uses a UniqueConstraint on email, any legacy duplicate data must be purged.

   -- Run in your H2/SQL console
   DELETE FROM TASK_ENTITY;
   DELETE FROM USER_TASKS;

2. Verify Service Logic: Ensure the saveTask and addTask methods use the .findByEmail(email).orElse(...) pattern rather than creating a new UserTasks instance every time.
3. Docker Reset: If running in Docker, a volume prune is the most effective way to reset the persistence layer:

   docker system prune -a --volumes

🕒 Date Parsing Errors

If you see java.time.format.DateTimeParseException, ensure the Angular frontend is sending the date with leading zeros to match the Java LocalDate pattern.

Error	Cause	Fix
Index 0 Parse Error	Sending 2/20/2026	Use .padStart(2, '0') in Angular to send 02/20/2026.
Invalid Format	Sending ISO String	Ensure the TaskService only sends the MM/dd/yyyy portion.

---

🌓 Dark Mode Flicker

If Material components (Dialogs, Menus, Selects) stay in Light Mode while the background turns Dark:

1. Check Overlay: Ensure the OverlayContainer in task-manager.component.ts is receiving the .dark class.
2. CSS Specificity: Verify that @custom-variant dark is defined in your styles.css for Tailwind v4.
3. Material 3 Tokens: Ensure @include mat.all-component-colors is wrapped inside the .dark selector in your SCSS.

🗺️ Future Roadmap

To evolve TaskStream Pro into a full-scale enterprise application, the following enhancements are planned:

🔐 Security & Identity

• JWT Authentication: Integrate Spring Security with JWT (JSON Web Tokens) to replace the current email-only param system.
• Social Login: Add Google/GitHub OAuth2 support via Angular Social Login.
• Role-Based Access (RBAC): Distinct permissions for "Admin" (Global Purge) and "User" (Personal Tasks).

🔔 Notifications & Real-time

• Push Notifications: Browser-based Service Workers to alert users when a task is Due Today.
• WebSocket Sync: Real-time task updates across multiple browser tabs using STOMP/SockJS.
• Email Reminders: Spring Boot @Scheduled tasks to send automated "Overdue" digests.

📈 Data Visualization

• Performance Analytics: Visualizing task completion velocity and priority distribution via Chart.js and D3.js.
• Category Heatmaps: High-level view of which work categories are most active.

📱 Native Experience

• PWA Support: Transform the Angular dashboard into a Progressive Web App for offline access and home-screen installation.
• Mobile App: Port the existing logic to Ionic or Capacitor for iOS and Android deployment.

---

💡 Suggested Milestone 1:

Integrating Spring Security is highly recommended as the next step to protect the /api/tasks endpoints from unauthorized access.