Task Management System

A full-stack web application built with Java Spring Boot (Backend) and Angular (Frontend) to demonstrate modern web development skills.

🚀 Project Overview

This Task Management System showcases:

• Backend: RESTful API with Spring Boot, JPA/Hibernate, and H2 database
• Frontend: Modern Angular application with Bootstrap UI
• Full CRUD operations for tasks
• Search and filtering capabilities
• Responsive design for all devices

🏗️ Architecture

TaskManagementSystem/
├── backend/                 # Spring Boot REST API
│   ├── src/main/java/      # Java source code
│   ├── src/main/resources/ # Configuration files
│   └── pom.xml            # Maven dependencies
└── frontend/               # Angular application
    ├── src/app/            # Angular components
    ├── src/styles.css      # Global styles
    └── package.json        # Node.js dependencies

🛠️ Technologies Used

Backend

• Java 17
• Spring Boot 3.2.0
• Spring Data JPA
• H2 Database
• Maven

Frontend

• Angular 17
• TypeScript
• Bootstrap 5
• Font Awesome Icons
• RxJS

📋 Features

• ✅ Create, Read, Update, Delete tasks
• ✅ Task status management (Pending, In Progress, Completed, Cancelled)
• ✅ Priority levels (Low, Medium, High, Urgent)
• ✅ Due date scheduling
• ✅ Search tasks by title
• ✅ Filter by status and priority
• ✅ Responsive design
• ✅ Form validation
• ✅ Real-time updates

🚀 Getting Started

Prerequisites

• Java 17 or higher
• Maven 3.6 or higher
• Node.js 18 or higher
• npm 9 or higher
• Angular CLI 17 or higher

Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Run the Spring Boot application:

   mvn spring-boot:run

3. The backend will start on http://localhost:8080

4. Access H2 Database Console at http://localhost:8080/h2-console

   • JDBC URL: jdbc:h2:mem:taskdb
   • Username: sa
   • Password: password

Frontend Setup

1. Open a new terminal and navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Start the Angular development server:

   npm start

4. The frontend will open at http://localhost:4200

📚 API Endpoints

Method	Endpoint	Description
GET	/api/tasks	Get all tasks
GET	/api/tasks/{id}	Get task by ID
POST	/api/tasks	Create new task
PUT	/api/tasks/{id}	Update existing task
DELETE	/api/tasks/{id}	Delete task
GET	/api/tasks/status/{status}	Filter by status
GET	/api/tasks/search?title={title}	Search by title

🎯 Sample Data

The application automatically loads sample tasks on startup:

• Complete Spring Boot Project (High Priority, In Progress)
• Learn Angular (Medium Priority, Pending)
• Prepare for Interview (Urgent Priority, Pending)
• Write Documentation (Low Priority, Pending)

🔧 Development

Backend Development

• The backend uses Spring Boot's auto-configuration
• JPA entities are automatically mapped to the H2 database
• Sample data is loaded via DataLoader class
• CORS is enabled for frontend communication

Frontend Development

• Built with Angular 17 standalone components
• Uses Bootstrap 5 for responsive design
• Implements reactive forms with validation
• HTTP service handles all API communication

📱 UI Features

• Modern Design: Clean, professional interface
• Responsive Layout: Works on desktop, tablet, and mobile
• Interactive Elements: Hover effects, smooth transitions
• Color-coded Status: Visual indicators for task status and priority
• Search & Filter: Easy task discovery and organization

🧪 Testing

Backend Testing

cd backend
mvn test

Frontend Testing

cd frontend
npm test

📦 Building for Production

Backend

cd backend
mvn clean package

Frontend

cd frontend
npm run build

🌟 What This Project Demonstrates

For Job Applications

• Spring Boot: RESTful API development, JPA, dependency injection
• Angular: Component architecture, routing, forms, HTTP services
• Full-Stack Development: End-to-end application development
• Modern Practices: Latest versions, clean code, proper structure
• Database Design: Entity relationships, validation, data persistence
• UI/UX: Responsive design, user experience, modern interfaces

Technical Skills

• Backend Development: Java, Spring Framework, REST APIs
• Frontend Development: TypeScript, Angular, Bootstrap
• Database: JPA/Hibernate, SQL, data modeling
• DevOps: Maven, npm, build tools
• Version Control: Git project structure

🤝 Contributing

This is a demonstration project, but feel free to:

• Add new features
• Improve the UI/UX
• Enhance the backend functionality
• Add more comprehensive testing

📄 License

This project is created for educational and demonstration purposes.

---

Happy Coding! 🎉