TaskFlow — Full Stack Task Management System

A full stack task management application built with Java Spring Boot on the backend and a modern dark-themed dashboard UI on the frontend. Supports complete CRUD operations through both a REST API and an interactive browser interface. Live Demo

Overview

What started as a RESTful API has evolved into a complete full stack project. The frontend is a production-grade dashboard with a dark luxury design, real-time table interactions, and full create/edit/delete/view capabilities — all communicating with the Spring Boot backend through the Fetch API.

---

Features

Backend

• Create, retrieve, update, and delete tasks
• Retrieve all tasks or a single task by ID
• Automatic task creation timestamp
• Enum-based Priority (LOW, MEDIUM, HIGH) and Status (TODO, IN_PROGRESS, DONE) fields
• JSON-based REST communication
• Custom exception handling with proper HTTP status codes (404, etc.)

Frontend

• Dark luxury dashboard UI with animated background and glass surfaces
• Live task table with staggered row animations
• Colour-coded priority and status badges
• Expandable detail rows showing full task info including description
• Create and Edit form with mode switching (Create / Update)
• Task counter, ID lookup, and controlled table loading
• Raw API response panel for debugging
• Fully served from Spring Boot's static resources — no separate server needed

---

Technologies Used

Layer	Stack
Backend	Java 21, Spring Boot, Spring Data JPA
Database	H2 In-Memory Database
Build	Maven
Frontend	HTML, CSS, JavaScript (Fetch API)
IDE	Eclipse

---

Project Structure

src/
├── entity/         # Task model with JPA annotations
├── repository/     # Spring Data JPA database operations
├── web/            # REST controller with API endpoints
├── exception/      # Custom exception handling (e.g. 404 Not Found)
└── resources/
    └── static/     # Frontend dashboard (index.html, style.css, app.js)

---

Setup Instructions

1. Ensure Java JDK 21 is installed
2. Open the project in Eclipse IDE
3. Run TaskmanagerApplication.java as a Java Application
4. The embedded Tomcat server starts on port 8080

Interface	URL
Dashboard UI	http://localhost:8080
REST API	http://localhost:8080/api/tasks

---

API Reference

Base URL: http://localhost:8080/api/tasks

Method	Endpoint	Description	Status
POST	/api/tasks	Create a new task	201
GET	/api/tasks	Get all tasks	200
GET	/api/tasks/{id}	Get task by ID	200
PUT	/api/tasks/{id}	Update a task	200
DELETE	/api/tasks/{id}	Delete a task	204

Sample POST body:

{
  "taskName": "Sample Task",
  "description": "Task description here",
  "assignedUser": "John Doe",
  "dueDate": "2025-12-31",
  "priority": "HIGH",
  "status": "TODO"
}

id and createdDate are auto-generated and should not be included in the request body.

---

Database Schema — task

Column	Type	Notes
id	BIGINT	Primary key, auto-increment
task_name	VARCHAR	Required
description	VARCHAR
assigned_user	VARCHAR
due_date	DATE
priority	VARCHAR	LOW / MEDIUM / HIGH
status	VARCHAR	TODO / IN_PROGRESS / DONE
created_date	DATE	Auto-generated on first save

Schema is auto-generated by Spring Data JPA at runtime. H2 is in-memory — all data resets on restart.

---

Branches

Branch	Description
main	Stable version with original UI
vibe-coded-frontend	Redesigned dark luxury dashboard UI

---

Author

Ali Amhaz Computer Engineering Student — Lebanese American University (LAU)