DJ's Task Manager

A responsive, full-stack task management application for organizing work across Todo, Active, and Completed stages. Tasks are persisted in PostgreSQL and can be moved between working stages with accessible drag-and-drop interactions.

Live Demo

Features

• Create tasks with a title, description, and due date
• Edit or delete existing tasks
• Move tasks between Todo List and Active Todo using drag and drop
• Drag using a mouse, touch input, or keyboard
• Mark tasks as completed and reopen them when needed
• Keep task stages synchronized with the database
• Highlight overdue incomplete tasks
• Expand task cards to view descriptions and due dates
• Clear all completed tasks with a single action
• Switch between light and dark themes
• View responsive layouts across desktop and mobile devices
• Receive loading, validation, and API error feedback

Application Workflow

1. A newly created task is added to the Todo List.
2. Drag the task into Active Todo when work begins.
3. Mark it complete when the work is finished.
4. Drag an active task back to the Todo List if it is no longer in progress.
5. Reopening a completed task returns it to the Todo List.

Task stages are stored in PostgreSQL, so their positions are retained after a refresh.

Tech Stack

Frontend

• React 19
• Vite 8
• Tailwind CSS 4
• Axios
• dnd-kit
• ESLint

Backend

• Java 17
• Spring Boot 4
• Spring Web MVC
• Spring Data JPA
• Hibernate
• Lombok
• Maven

Infrastructure

• PostgreSQL
• Neon Database
• Netlify
• Render
• Docker

Architecture

The project uses a decoupled client-server architecture:

React components
    |
Custom useTodos hook
    |
Axios API client
    |
Spring REST controller
    |
Service layer
    |
JPA repository
    |
PostgreSQL

The frontend handles presentation and client-side state. The backend owns the REST API and persistence logic, while PostgreSQL stores task data and workflow state.

Project Structure

To-Do-Project/
|-- to-do/                         # React frontend
|   |-- public/
|   |-- src/
|   |   |-- components/
|   |   |   |-- TodoForm.jsx
|   |   |   `-- TodoItem.jsx
|   |   |-- App.jsx
|   |   |-- http.js
|   |   `-- todos.js
|   |-- package.json

## Local Development

### Prerequisites

- Node.js and npm
- Java 17 or newer
- PostgreSQL

### 1. Clone the repository

```bash
git clone https://github.com/DhanunjayJ/To-Do-Project.git
cd To-Do-Project

2. Configure and run the backend

Set the following environment variables:

DB_URL=jdbc:postgresql://localhost:5432/todo_db
DB_USERNAME=postgres
DB_PASSWORD=your_password
PORT=8080

PORT is optional and defaults to 8080.

Start the API:

cd todo-backend
./mvnw spring-boot:run

On Windows:

cd todo-backend
.\mvnw.cmd spring-boot:run

The API will be available at http://localhost:8080/api.

3. Configure and run the frontend

Create to-do/.env:

VITE_API_URL=http://localhost:8080/api

Install dependencies and start Vite:

cd to-do
npm install
npm run dev

The frontend will be available at http://localhost:5173.

The backend CORS configuration currently permits the production Netlify URL. Add the local Vite origin while developing locally.

Build and Validation

Frontend:

cd to-do
npm run lint
npm run build

Backend:

cd todo-backend
./mvnw clean package

Backend integration tests require valid database environment variables.

Deployment

• The React frontend is designed for deployment on Netlify.
• The Spring Boot service can be deployed on Render using the included multi-stage Dockerfile.
• Production database credentials should be configured as environment variables.
• Deploy backend changes before frontend changes when the API data model changes.

Roadmap

• Authentication and user-specific task lists
• Task priorities, categories, and tags
• Search and filtering
• Custom ordering within workflow columns
• Pagination for larger task collections
• Toast notifications
• Expanded automated test coverage

Contributing

Contributions and suggestions are welcome:

1. Fork the repository.
2. Create a feature branch.
3. Make and validate your changes.
4. Open a pull request with a clear description.

Author

Developed by Dhanunjay J.