🌸 Spring-Boot Todo Application

Aesthetic task manager built with Spring Boot 4, Thymeleaf, and MySQL — designed to make staying organized feel a little more bloomy.

---

✨ Overview

Spring-Boot Todo application is a server-rendered task management web app with a kawaii aesthetic. It features priority levels, filterable task views, a live progress bar, inline editing, and a soft pastel UI with falling sakura petals, a cat mascot, and friendly toast notifications.

Built as a learning project to demonstrate clean Spring Boot architecture — controller / service / repository layering, DTOs, bean validation, centralized exception handling, and proper HTTP method semantics — wrapped in a thoughtful, animated UI.

---

🌷 Features

Category	What you get
Task management	Create, toggle, edit, and delete tasks
Priority levels	Low 🌱 · Medium 🌸 · High 🔥 with colored badges
Filter tabs	All / Active / Done — with live counts per tab
Progress tracking	Live progress bar with shimmer + completion celebration
Bulk actions	One-click "Clear completed" with confirmation
Inline edit	Modal dialog prefilled with current task data
Toast notifications	Friendly feedback after every action
Cute aesthetic	Sakura Kawaii palette, cat mascot 🐱, falling petals, heartbeat footer
Responsive	Mobile-first layout, works from 360px upward
Accessible	ARIA labels, keyboard-navigable modal (ESC to close), prefers-reduced-motion support

---

🛠️ Tech Stack

Layer	Technology
Language	Java 17
Framework	Spring Boot 4.1.0
Web	Spring MVC + Thymeleaf
Persistence	Spring Data JPA · Hibernate
Database	MySQL 8+
Validation	Bean Validation (JSR-380)
Build tool	Maven 3.9+ (wrapper included)
Frontend	Vanilla CSS + JS (no framework), Bootstrap Icons, Google Fonts
Boilerplate	Lombok

---

📁 Project Structure

src/main/java/com/bishwakarma/learning/todoapp/
├── TodoAppApplication.java         ← Spring Boot entry point
├── controller/
│   └── TodoController.java         ← HTTP routing (GET/POST/PATCH/DELETE)
├── service/
│   └── TodoService.java            ← Business logic, @Transactional boundary
├── repository/
│   └── TodoRepository.java         ← Spring Data JPA + custom queries
├── entity/
│   └── Todo.java                   ← JPA entity with timestamps + priority
├── dto/
│   ├── TodoRequest.java            ← Validated input payload
│   └── TodoResponse.java           ← Read-only view DTO
├── enums/
│   └── Priority.java               ← LOW / MEDIUM / HIGH with UI metadata
└── exception/
    ├── TodoNotFoundException.java
    └── GlobalExceptionHandler.java ← @ControllerAdvice

src/main/resources/
├── application.properties          ← Env-var-aware configuration
├── static/
│   ├── css/style.css               ← Sakura Kawaii theme
│   └── js/app.js                   ← Edit-modal interactions
└── templates/
    ├── index.html                  ← Main Thymeleaf view
    └── error.html                  ← Friendly error fallback

---

🚀 Quick Start

Prerequisites

• JDK 17+
• Maven 3.9+ (or use the bundled ./mvnw)
• MySQL 8+ running on localhost:3306

1. Set up the database

The JDBC URL includes createDatabaseIfNotExist=true, so you only need a user with database-creation privileges:

CREATE USER IF NOT EXISTS 'todo_user'@'%' IDENTIFIED BY 'TodoApp_Password2026!';
GRANT ALL PRIVILEGES ON *.* TO 'todo_user'@'%';
FLUSH PRIVILEGES;

2. Run the app

https://github.com/Manish-Royan/Spring-Boot-Todo-Application.git
cd Spring-Boot-Todo-Application-main
./mvnw spring-boot:run

Open http://localhost:8080 — you should see the Spring-Boot Todo UI 🌸

3. Override credentials (optional)

The defaults work out-of-the-box for local dev. For a different setup, set environment variables:

export TODO_DB_URL='jdbc:mysql://localhost:3306/todo_db?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=UTC&createDatabaseIfNotExist=true'
export TODO_DB_USER='your_user'
export TODO_DB_PASSWORD='your_password'
./mvnw spring-boot:run

4. Build a JAR (optional)

./mvnw clean package
java -jar target/todoApp-1.0.0.jar

---

🗺️ HTTP Routes

Method	URL	Purpose
GET	/	Home page (supports ?filter=all|active|completed)
POST	/todos	Create a new todo
PATCH	/todos/{id}/toggle	Toggle the done flag
PATCH	/todos/{id}	Edit title / priority
DELETE	/todos/{id}	Delete a single todo
DELETE	/todos/completed	Bulk-clear completed todos

Browsers only support GET/POST natively — PATCH and DELETE go through a hidden _method input. The filter is enabled via spring.mvc.hiddenmethod.filter.enabled=true in application.properties.

---

🎨 Design Tokens

The Sakura Kawaii palette is defined as CSS custom properties at the top of style.css:

Token	Colour	Used for
--pink-50	#fff5f8	Page background base
--pink-200	#ffd6e4	Borders, soft accents
--pink-400	#ff8fab	Primary accent (buttons)
--pink-500	#f569a0	Headings, strong accent
--peach	#ffb7a3	Secondary accent (progress gradient)
--cream	#fffaf3	Page background secondary
--mint-deep	#7ec8a3	Completed state

Fonts: Pacifico (logo), Quicksand (headings), Nunito (body) — all from Google Fonts.

---

🧪 Testing

./mvnw test

The smoke test (TodoAppApplicationTests) uses H2 in-memory so it doesn't require a running MySQL — the test profile swaps the datasource via @TestPropertySource.

---

📐 Architecture Notes

This project follows the classic 3-layer Spring architecture:

┌──────────────────────────────────────────────────────────┐
│  Controller  (HTTP routing, view rendering)              │
│      ↓                                                   │
│  Service     (business logic, @Transactional)            │
│      ↓                                                   │
│  Repository  (Spring Data JPA, custom queries)           │
│      ↓                                                   │
│  Database    (MySQL)                                     │
└──────────────────────────────────────────────────────────┘

• DTOs (TodoRequest / TodoResponse) decouple the wire format from the persistence format and prevent mass-assignment.
• @ControllerAdvice centralizes error handling — every exception maps to a user-friendly outcome (toast notification or cute error page).
• JPA lifecycle callbacks (@PrePersist / @PreUpdate) auto-populate createdAt / updatedAt.
• Bean Validation (@NotBlank, @Size) rejects bad input at the API boundary with a 400, not a 500.

---

🌱 Roadmap

Possible future enhancements:

• Pagination for large task lists
• Search/filter by title substring
• Drag-and-drop reordering with order_index field
• Due dates with overdue highlighting
• Categories / tags (many-to-many)
• REST endpoints + AJAX (no full page reload)
• Service-layer unit tests with Mockito
• Docker Compose for one-command setup
• Deploy to Railway / Fly.io / Render

---

📄 License

Released under the MIT License. See LICENSE for details.

---

made with passion 🌸
Happy Coding 🤭