📋 Task Management System - Full Stack Application

A complete full-stack Task Management Web Application demonstrating modern web development practices with .NET Core 6 backend and Angular frontend.

🎯 Project Overview

This project showcases a complete implementation of a task management (mini to-do) application with:

• Backend: RESTful API built with .NET Core 6, Entity Framework Core, and Swagger documentation
• Frontend: Interactive single-page application built with Angular 16
• MVC: Optional server-side rendering with ASP.NET Core Razor views
• UI: Beautiful, fully responsive design with light/dark mode toggle

✨ Features

👤 User Features

• ✅ View a list of all tasks
• ✅ Add a new task
• ✅ Edit an existing task
• ✅ Delete a task
• ✅ Mark a task as "Completed" or "Pending"
• ✅ Real-time task statistics (Total, Completed, Pending, Progress %)
• ✅ Filter tasks by status
• ✅ Light/Dark mode toggle with local storage persistence
• ✅ Responsive design for all devices
• ✅ Form validation with helpful error messages

⚙️ Backend Features

• RESTful API with complete CRUD operations
• Entity Framework Core with In-Memory Database
• Layered Architecture (Controller → Service → Repository)
• Comprehensive model validation
• Structured exception handling
• Logging infrastructure
• Swagger/OpenAPI documentation
• CORS support for frontend integration
• MVC support for server-side rendering

🖥️ Frontend Features

• Component-based architecture
• Reactive Forms with validation
• Angular Services for API communication
• RxJS Observables for reactive programming
• Routing and navigation
• CSS3 with CSS Variables for theming
• Mobile-responsive design
• Smooth animations and transitions

📁 Project Structure

Task-Management-App/
├── Backend/
│   ├── TaskManagementAPI/
│   │   ├── Controllers/
│   │   │   ├── TasksController.cs          # API endpoints
│   │   │   └── HomeController.cs           # MVC controller
│   │   ├── Models/
│   │   │   └── Task.cs                     # Task model
│   │   ├── DTOs/
│   │   │   ├── TaskDTO.cs
│   │   │   ├── CreateTaskDTO.cs
│   │   │   └── UpdateTaskDTO.cs
│   │   ├── Services/
│   │   │   └── TaskService.cs              # Business logic
│   │   ├── Data/
│   │   │   └── ApplicationDbContext.cs     # Database context
│   │   ├── Views/
│   │   │   ├── Home/
│   │   │   │   └── Index.cshtml            # MVC view
│   │   │   └── Shared/
│   │   │       └── _Layout.cshtml          # Layout template
│   │   ├── Program.cs                      # Application setup
│   │   ├── appsettings.json
│   │   └── TaskManagementAPI.csproj        # Project file
│   ├── Dockerfile                          # Docker image for backend
│   └── Properties/
│       └── launchSettings.json             # Launch configuration
├── Frontend/
│   ├── src/
│   │   ├── app/
│   │   │   ├── components/
│   │   │   │   ├── task-list/              # Task list component
│   │   │   │   └── task-form/              # Task form component
│   │   │   ├── services/
│   │   │   │   └── task.service.ts         # API service
│   │   │   ├── models/
│   │   │   │   └── task.model.ts           # TypeScript models
│   │   │   ├── app.component.*             # Main app component
│   │   │   ├── app.module.ts               # App module
│   │   │   ├── app-routing.module.ts       # Routing module
│   │   │   └── styles.css                  # Global styles
│   │   ├── main.ts                         # Bootstrap file
│   │   ├── index.html                      # HTML entry point
│   │   └── styles/
│   ├── angular.json                        # Angular CLI config
│   ├── package.json                        # NPM dependencies
│   ├── tsconfig.json                       # TypeScript config
│   ├── Dockerfile                          # Docker image for frontend
│   └── README.md                           # Frontend documentation
├── docker-compose.yml                      # Docker Compose configuration
└── README.md                               # This file

🏗️ Project Architecture

Backend Architecture Layers

┌─────────────────────────────────────────┐
│         HTTP Request/Response            │
└────────────────┬────────────────────────┘
                 │
┌────────────────▼────────────────────────┐
│     Controllers (API Endpoints)         │
│  - TasksController.cs                   │
│  - HomeController.cs                    │
└────────────────┬────────────────────────┘
                 │
┌────────────────▼────────────────────────┐
│  Services (Business Logic)              │
│  - TaskService.cs                       │
│  - Validation & Processing              │
└────────────────┬────────────────────────┘
                 │
┌────────────────▼────────────────────────┐
│  Data Access (DbContext)                │
│  - ApplicationDbContext.cs              │
│  - Entity Framework Queries             │
└────────────────┬────────────────────────┘
                 │
┌────────────────▼────────────────────────┐
│     In-Memory Database                  │
│  (Entity Framework In-Memory)           │
└─────────────────────────────────────────┘

Frontend Architecture

┌──────────────────────────────────────────┐
│         App Component (Root)             │
│  - Theme Management                      │
│  - Layout Control                        │
└──────┬──────────────────────────┬───────┘
       │                          │
       ▼                          ▼
┌─────────────────┐      ┌─────────────────┐
│ Task Form       │      │ Task List       │
│ Component       │      │ Component       │
└──────┬──────────┘      └────────┬────────┘
       │                          │
       └──────────┬───────────────┘
                  │
         ┌────────▼─────────┐
         │ TaskService      │
         │ (RxJS/Observable)│
         └────────┬─────────┘
                  │
         ┌────────▼─────────┐
         │ HttpClient       │
         │ (Angular HTTP)   │
         └────────┬─────────┘
                  │
         ┌────────▼─────────┐
         │ API (localhost:  │
         │      5000)       │
         └──────────────────┘

🚀 Getting Started

Prerequisites

• .NET Core 6 SDK or later
• Node.js 18 or later
• npm or yarn
• Visual Studio Code (recommended) or Visual Studio

Backend Setup

1. Navigate to Backend Directory

   cd Backend/TaskManagementAPI

2. Restore NuGet Packages

   dotnet restore

3. Build the Project

   dotnet build

4. Run the Application

   dotnet run

   The API will start on http://localhost:5000

5. Access Swagger Documentation Open browser and navigate to: http://localhost:5000/swagger

Frontend Setup

1. Navigate to Frontend Directory

   cd Frontend

2. Install Dependencies

   npm install

3. Start Development Server

   npm start

   The Angular application will open at http://localhost:4200

Access the Application

• Angular Frontend: http://localhost:4200
• API Swagger Docs: http://localhost:5000/swagger
• MVC Server-Side View: http://localhost:5000
• API Base URL: http://localhost:5000/api/tasks

🔌 API Endpoints

All endpoints are located at http://localhost:5000/api/tasks

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 task
DELETE	/api/tasks/{id}	Delete task
PATCH	/api/tasks/{id}/toggle	Toggle task completion status

Request/Response Examples

Create Task (POST)

{
  "title": "Complete project documentation",
  "description": "Write comprehensive README and API documentation"
}

Update Task (PUT)

{
  "title": "Complete project documentation",
  "description": "Write comprehensive README and API documentation",
  "status": "Pending"
}

Response

{
  "id": 1,
  "title": "Complete project documentation",
  "description": "Write comprehensive README and API documentation",
  "status": "Pending",
  "createdAt": "2024-03-30T10:00:00Z",
  "completedAt": null,
  "updatedAt": "2024-03-30T10:00:00Z"
}

🎨 Light/Dark Mode

The application includes a sophisticated theme system:

• Light Mode (Default): Clean, bright interface perfect for daytime use
• Dark Mode: Eye-friendly interface for low-light environments
• Automatic Detection: Respects system theme preferences
• Local Storage: User preference is saved and persists across sessions
• Smooth Transitions: CSS-based animations for theme switching

Theme Colors

Light Mode:

• Primary: #3b82f6 (Blue)
• Background: #ffffff (White)
• Text: #1f2937 (Dark Gray)

Dark Mode:

• Primary: #3b82f6 (Blue)
• Background: #1f2937 (Dark Gray)
• Text: #f3f4f6 (Light Gray)

🛠️ Architecture & Design Patterns

Backend Architecture

Controller Layer
    ↓
Service Layer (Business Logic)
    ↓
Repository Layer (Data Access)
    ↓
Database Context (EF Core)
    ↓
In-Memory Database

Frontend Architecture

App Component (Root)
    ├── Task Form Component
    │   └── TaskService
    └── Task List Component
        └── TaskService → HTTP Client → API

Key Design Patterns Used

1. Repository Pattern: Abstraction layer for data access
2. Service Layer Pattern: Centralized business logic
3. Dependency Injection: Loose coupling and testability
4. Component-Based Architecture: Reusable, modular UI components
5. Observable Pattern: Reactive data flow with RxJS
6. DTO Pattern: Data Transfer Objects for API communication

📊 Database Schema

Task Model

public class Task
{
    public int Id { get; set; }
    public string Title { get; set; }                  // Required, 3-200 chars
    public string Description { get; set; }           // Optional, max 1000 chars
    public TaskStatus Status { get; set; }            // Pending or Completed
    public DateTime CreatedAt { get; set; }
    public DateTime? CompletedAt { get; set; }
    public DateTime UpdatedAt { get; set; }
}

public enum TaskStatus
{
    Pending = 0,
    Completed = 1
}

🐳 Docker Support

The project includes Docker support for containerized deployment:

Build and Run with Docker Compose

# Build images
docker-compose build

# Start both services
docker-compose up

# Stop services
docker-compose down

Individual Docker Commands

Backend:

docker build -f Backend/Dockerfile -t task-api .
docker run -p 5000:80 task-api

Frontend:

docker build -f Frontend/Dockerfile -t task-ui .
docker run -p 4200:4200 task-ui

🧪 Testing Recommendations

Backend Testing

• Use Postman or Insomnia for API testing
• Unit tests can be added using xUnit or NUnit
• Integration tests for service layer

Frontend Testing

• Component tests using Jasmine/Karma
• E2E tests using Cypress or Protractor
• Manual testing for UI/UX validation

🔒 Validation & Error Handling

Backend Validation

• Model-level validation using Data Annotations
• Service-level business logic validation
• Comprehensive exception handling
• Meaningful error messages

Frontend Validation

• Reactive form validation
• Real-time validation feedback
• User-friendly error messages
• Form state management

📱 Responsive Design

The application is fully responsive:

• Desktop (1200px+): Multi-column layout
• Tablet (768px-1199px): Adapted grid layouts
• Mobile (below 768px): Single column, touch-friendly

🚀 Performance Optimizations

• Frontend: Angular AOT compilation, lazy loading, OnPush change detection
• Backend: Entity Framework Core query optimization, async/await patterns
• Caching: Browser caching for static assets
• Static Files: Gzip compression on API responses

📝 Best Practices Implemented

✅ SOLID Principles

• Single Responsibility Principle
• Open/Closed Principle
• Liskov Substitution Principle
• Interface Segregation
• Dependency Inversion

✅ Code Quality

• Clean code conventions
• Meaningful naming
• DRY (Don't Repeat Yourself)
• Comprehensive comments and documentation

✅ Security

• Input validation
• CORS configuration
• Proper HTTP headers
• Error message sanitization

✅ Accessibility

• Semantic HTML
• ARIA labels
• Keyboard navigation
• Color contrast compliance

🔧 Troubleshooting

Common Issues

Frontend can't connect to API:

• Ensure backend is running on http://localhost:5000
• Check CORS configuration in Program.cs
• Verify firewall settings

Dependencies not installing:

• Clear npm cache: npm cache clean --force
• Delete node_modules and package-lock.json, reinstall
• Check Node.js version compatibility

Port already in use:

• Backend: Change port in launchSettings.json
• Frontend: Use ng serve --port 4300

📚 Additional Resources

• .NET Core Documentation
• Angular Documentation
• Entity Framework Core
• REST API Best Practices

🤝 Contributing

This is a learning project. Suggestions and improvements are welcome!

📄 License

This project is open source and available for educational purposes.

🎓 Learning Outcomes

By studying this project, you will learn:

1. ✅ Full-stack web development with modern technologies
2. ✅ REST API design and implementation
3. ✅ Entity Framework Core ORM usage
4. ✅ Angular component architecture
5. ✅ TypeScript and reactive programming
6. ✅ CORS and HTTP communication
7. ✅ Responsive design and theming
8. ✅ Docker containerization
9. ✅ Layered architecture and design patterns
10. ✅ Best practices in web development

👨‍💻 Author

Created as a comprehensive learning project for full-stack web development.

---

Happy Coding! 🚀

For questions or issues, please refer to the troubleshooting section or check the individual README files in Backend and Frontend directories.