Task Manager

A full-stack task management application built with Spring Boot and React. This application provides a robust solution for managing tasks with features like authentication, task prioritization, filtering, and real-time updates.

Features

User Management

Secure user authentication using JWT
User registration and login
Password encryption with BCrypt

Task Management

Create, read, update, and delete tasks
Task prioritization (Urgent, High, Medium, Low)
Status tracking (Pending, In Progress, Completed)
Due date management
Task tagging system

User Interface

Responsive design
Real-time search functionality
Advanced filtering options
Multiple sorting options
Pagination for efficient data loading
Smooth animations and transitions
Task detail modal view

Tech Stack

Backend

Java 17
Spring Boot 3.x
Spring Security with JWT
Spring Data JPA
PostgreSQL (Dockerized)
Maven

Frontend

React 18
Tailwind CSS for styling
Axios for API calls
React Context API for state management
React Router for navigation
React Icons
React Testing Library

Prerequisites

Java 17 or higher
Node.js 14 or higher
Docker and Docker Compose
Maven 3.6 or higher
Git

Installation and Setup

1. Clone the Repository

git clone https://github.com/ogalo/task-manager.git
cd task-manager

2. Database Setup

Using Docker

# Pull PostgreSQL image
docker pull postgres

# Create and run PostgreSQL container
docker run --name your-container-name \
  -e POSTGRES_USER=your_username \
  -e POSTGRES_PASSWORD=your_password \
  -e POSTGRES_DB=your_database_name \
  -p your_port:5432 \
  -d postgres

Database Schema

Create the following tables in your PostgreSQL database:

-- Users table
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Tasks table
CREATE TABLE tasks (
    id SERIAL PRIMARY KEY,
    title VARCHAR(100) NOT NULL,
    description TEXT,
    due_date TIMESTAMP,
    status VARCHAR(20) NOT NULL,
    priority VARCHAR(20),
    user_id INTEGER REFERENCES users(id),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Tags table
CREATE TABLE tags (
    id SERIAL PRIMARY KEY,
    name VARCHAR(50) NOT NULL,
    color VARCHAR(7) NOT NULL,
    user_id INTEGER REFERENCES users(id)
);

-- Task-Tags relationship table
CREATE TABLE task_tags (
    task_id INTEGER REFERENCES tasks(id) ON DELETE CASCADE,
    tag_id INTEGER REFERENCES tags(id) ON DELETE CASCADE,
    PRIMARY KEY (task_id, tag_id)
);

-- Task attachments table
CREATE TABLE task_attachments (
    id SERIAL PRIMARY KEY,
    task_id INTEGER REFERENCES tasks(id) ON DELETE CASCADE,
    file_name VARCHAR(255) NOT NULL,
    file_path VARCHAR(512) NOT NULL,
    file_type VARCHAR(100) NOT NULL,
    file_size INTEGER NOT NULL,
    uploaded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

3. Backend Setup

Navigate to the backend directory:

cd taskmanagerbackend

Create application.properties file in src/main/resources:

# Database Configuration
spring.datasource.url=jdbc:postgresql://localhost:5432/your_database_name
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.PostgreSQLDialect

# JWT Configuration
app.jwt.secret=your_jwt_secret_key
app.jwt.expiration=your_expiration_duration

# Server Configuration
server.port=8080

# File Upload Configuration
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

Build and run the backend:

mvn clean install
mvn spring-boot:run

4. Frontend Setup

Navigate to the frontend directory:

cd ../taskmanagerfrontend

Create .env file:

REACT_APP_API_URL=http://localhost:8080/api
REACT_APP_FILE_UPLOAD_SIZE_LIMIT=10485760

Install dependencies and start the application:

npm install
npm start

API Documentation

Authentication Endpoints

POST /api/auth/register - Register a new user

{
  "username": "testuser",
  "email": "test@example.com",
  "password": "password123"
}

Response: 200 OK with JWT token

POST /api/auth/login - Login user

{
  "email": "test@example.com",
  "password": "password123"
}

Response: 200 OK with JWT token

Task Endpoints

All task endpoints require JWT Authentication header: Authorization: Bearer your_jwt_token

GET /api/tasks - Get all tasks
- Query parameters:
  - page (default: 0)
  - size (default: 10)
  - sort (default: "dueDate,desc")
  - status (optional)
  - priority (optional)
  - search (optional)
GET /api/tasks/{id} - Get task by ID

POST /api/tasks - Create new task

{
  "title": "Complete Project",
  "description": "Finish the task manager project",
  "dueDate": "2024-03-25T15:00:00",
  "priority": "HIGH",
  "status": "PENDING",
  "tags": ["work", "important"]
}

PUT /api/tasks/{id} - Update task

{
  "title": "Updated Title",
  "description": "Updated description",
  "dueDate": "2024-03-26T15:00:00",
  "priority": "MEDIUM",
  "status": "IN_PROGRESS"
}

PUT /api/tasks/{id}/status - Update task status
```
{
  "status": "COMPLETED"
}
```
DELETE /api/tasks/{id} - Delete task

Tag Endpoints

GET /api/tags - Get all tags
POST /api/tags - Create new tag
PUT /api/tags/{id} - Update tag
DELETE /api/tags/{id} - Delete tag

Frontend Architecture

The frontend is organized into the following structure:

src/
├── components/
│   ├── auth/
│   ├── tasks/
│   ├── common/
│   └── layout/
├── context/
├── services/
├── utils/
└── styles/

Key Components:

AuthContext - Manages authentication state
TaskList - Displays tasks with filtering and sorting
TaskForm - Creates and updates tasks
TaskDetail - Shows detailed task view
SearchBar - Handles task searching
TagManager - Manages task tags

Testing the Application

Start the backend server:

cd taskmanagerbackend
mvn spring-boot:run

Start the frontend application:
```
cd taskmanagerfrontend
npm start
```
Access the application:
- Open browser at http://localhost:3000
- Register a new account
- Try creating tasks with different priorities
- Test filtering and sorting
- Try the search functionality
- Try tag management

Common Issues and Solutions

Database Issues

Error: "Connection refused"

Solution: Check if Docker container is running:
docker ps
docker logs your-container-name

Error: "Authentication failed"

Solution: Verify database credentials in application.properties

Backend Issues

Error: "Invalid JWT token"

Solution: Clear browser storage and re-login

Error: "Method not allowed"

Solution: Check if you're using the correct HTTP method

Frontend Issues

Error: "Network Error"

Solution: 
1. Verify backend is running
2. Check CORS configuration
3. Verify API URL in .env

Error: "Invalid token"

Solution:
1. Clear localStorage
2. Re-login to the application

Contributing

Fork the repository
Create your feature branch: git checkout -b feature/your-feature
Commit your changes: git commit -m 'Add your feature'
Push to the branch: git push origin feature/your-feature
Submit a pull request

Deployment Guide

1. Database Setup (ElephantSQL)

Create a free account on ElephantSQL
Create a new instance:
- Select "Tiny Turtle (Free)"
- Choose a region closest to your users
- Name your instance

Get your database URL from the instance details:

postgres://username:password@hostname:5432/database

2. Backend Deployment (Render)

Create a free account on Render
Create a new Web Service:
- Connect your GitHub repository
- Select the repository

Configure the Web Service:

Name: task-manager-backend
Environment: Docker
Region: Choose closest to your users
Branch: main
Root Directory: taskmanagerbackend

Add environment variables:

SPRING_DATASOURCE_URL=jdbc:postgresql://your-elephantsql-url
SPRING_DATASOURCE_USERNAME=your-db-username
SPRING_DATASOURCE_PASSWORD=your-db-password
APP_JWT_SECRET=your-jwt-secret
APP_JWT_EXPIRATION=86400000

Create a Dockerfile in your backend directory:

FROM eclipse-temurin:17-jdk-alpine
VOLUME /tmp
COPY target/*.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

Add system.properties in your backend directory:
```
java.runtime.version=17
```

3. Frontend Deployment (Vercel)

Create a free account on Vercel
Install Vercel CLI:
```
npm install -g vercel
```

Create vercel.json in your frontend directory:

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": { "distDir": "build" }
    }
  ],
  "routes": [
    {
      "src": "/static/(.*)",
      "dest": "/static/$1"
    },
    {
      "src": "/favicon.ico",
      "dest": "/favicon.ico"
    },
    {
      "src": "/manifest.json",
      "dest": "/manifest.json"
    },
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

Update frontend environment variables:

Create .env.production:

REACT_APP_API_URL=https://your-render-backend-url/api
REACT_APP_FILE_UPLOAD_SIZE_LIMIT=10485760

Deploy using Vercel CLI:
```
cd taskmanagerfrontend
vercel
```
Follow the prompts and choose:
- Set up and deploy
- Select your scope
- Link to existing project: No
- Project name: task-manager-frontend
- Directory: ./

4. CORS Configuration

Update your backend WebSecurityConfig.java:

@Configuration
public class WebSecurityConfig {
    @Value("${app.frontend.url}")
    private String frontendUrl;

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList(frontendUrl));
        configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
        configuration.setAllowedHeaders(Arrays.asList("*"));
        configuration.setAllowCredentials(true);
        
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

Add to application.properties:

app.frontend.url=https://your-vercel-frontend-url

5. Final Steps

Test the deployed application:
- Frontend: https://your-vercel-url
- Backend: https://your-render-url/api/health
Common deployment issues:
- CORS errors: Check CORS configuration and frontend URL
- Database connection: Verify ElephantSQL credentials
- 404 errors: Check API URL in frontend environment
- Build failures: Check logs in Vercel/Render dashboards
Monitoring:
- Use Render dashboard for backend logs
- Use Vercel dashboard for frontend deployment status
- Check ElephantSQL dashboard for database metrics

Live Demo

Access the live demo at: https://your-vercel-url

Test account:

Email: demo@example.com
Password: demo123

Note: The free tier services may have cold starts, so the first request might take a few seconds.

Future Updates/Versions

Profile Management
File Attachment Support - Upload files to tasks
Recurring Tasks - Set daily, weekly, monthly recurrence. Handle completion logic.
Bulk Actions - Select multiple tasks. Apply actions (delete, change status, etc.)
Reminder Notifications - Browser notifications for upcoming tasks. Email notifications integration.
Dashboard Analytics - Task completion rate over time, Upcoming deadlines, Distribution of tasks by status/priority

Name		Name	Last commit message	Last commit date
Latest commit History 12 Commits
taskmanagerbackend		taskmanagerbackend
taskmanagerfrontend		taskmanagerfrontend
.gitignore		.gitignore
README.md		README.md

DavidOgalo/TaskManager

Folders and files

Latest commit

History

Repository files navigation