TaskFlow — Full-Stack Task Management System

A production-style task management app built with ASP.NET Core 8, PostgreSQL, and React + TypeScript (Vite).

---

Project Structure

TaskFlow/
├── backend/
│   └── TaskFlow.API/
│       ├── Authentication/    # JWT token service
│       ├── Controllers/       # API endpoints
│       ├── Data/              # EF Core DbContext
│       ├── DTOs/              # Request/response models
│       ├── Migrations/        # EF Core migrations
│       ├── Models/            # Domain entities
│       ├── Repositories/      # Data access layer
│       ├── Services/          # Business logic
│       ├── appsettings.json
│       └── Program.cs
└── frontend/
    └── taskflow-ui/
        ├── src/
        │   ├── components/    # Reusable UI components
        │   ├── context/       # React context (Auth)
        │   ├── pages/         # Route-level pages
        │   ├── services/      # Axios API layer
        │   └── types/         # TypeScript interfaces
        ├── index.html
        └── package.json

---

Prerequisites

• .NET 8 SDK
• Node.js 18+
• PostgreSQL 14+

---

Backend Setup

1. Configure environment

Edit backend/TaskFlow.API/appsettings.json:

{
  "ConnectionStrings": {
    "DefaultConnection": "Host=localhost;Port=5432;Database=taskflow_db;Username=postgres;Password=YOUR_PASSWORD"
  },
  "Jwt": {
    "SecretKey": "your-super-secret-key-at-least-32-characters-long",
    "Issuer": "TaskFlowAPI",
    "Audience": "TaskFlowClient",
    "ExpiryMinutes": "1440"
  }
}

Important: The SecretKey must be at least 32 characters. Use a strong random string for production.

2. Create the PostgreSQL database

CREATE DATABASE taskflow_db;

3. Restore packages & run migrations

cd backend/TaskFlow.API
dotnet restore
dotnet ef database update

If dotnet ef is not installed:

dotnet tool install --global dotnet-ef

4. Run the backend

dotnet run

The API will start at: http://localhost:5000
Swagger UI is available at: http://localhost:5000/swagger

---

Frontend Setup

1. Install dependencies

cd frontend/taskflow-ui
npm install

2. Start the dev server

npm run dev

The app will start at: http://localhost:5173

---

API Endpoints

Auth

Method	Endpoint	Description
POST	/api/auth/register	Register new user
POST	/api/auth/login	Login, returns JWT

Tasks (require Authorization: Bearer <token> header)

Method	Endpoint	Description
GET	/api/tasks	Get all tasks (optional ?status=Todo|InProgress|Done)
POST	/api/tasks	Create a new task
PUT	/api/tasks/{id}	Update a task
DELETE	/api/tasks/{id}	Delete a task

---

Environment Variables Summary

Variable	Location	Description
ConnectionStrings:DefaultConnection	appsettings.json	PostgreSQL connection string
Jwt:SecretKey	appsettings.json	HS256 signing secret (min 32 chars)
Jwt:Issuer	appsettings.json	JWT issuer claim
Jwt:Audience	appsettings.json	JWT audience claim
Jwt:ExpiryMinutes	appsettings.json	Token lifetime in minutes

---

Tech Stack

Layer	Technology
Backend framework	ASP.NET Core 8 Web API
ORM	Entity Framework Core 8
Database	PostgreSQL (via Npgsql)
Authentication	JWT Bearer (HS256)
Password hashing	BCrypt.Net
API docs	Swagger / Swashbuckle
Frontend framework	React 18 + TypeScript
Build tool	Vite 5
Routing	React Router v6
HTTP client	Axios
Fonts	Syne + DM Sans (Google Fonts)

---

Features

• JWT Authentication — register, login, secure token storage
• Protected routes — frontend redirects unauthenticated users
• Full task CRUD — create, read, update, delete
• Status filtering — filter by Todo / In Progress / Done
• User isolation — users only see their own tasks
• Responsive design — works on mobile and desktop
• Loading skeletons and error handling throughout
• Cascade delete — deleting a user removes their tasks