TaskFlow

A full-stack task management application built with React, NestJS, and PostgreSQL.

---

Project Structure

taskflow/
├── login/          # Standalone login page (HTML + CSS + JS)
├── front/          # React frontend (Posts app + Shopping cart)
└── back/           # NestJS REST API

---

Login (login/)

A standalone responsive login page. No build step required.

Run: Open login/index.html directly in a browser.

Features:

• Email format validation
• Password show/hide toggle
• Loading state on submit
• Fully responsive (desktop + mobile)

---

Frontend (front/)

React + Vite + TypeScript + Tailwind CSS

Pages

Route	Description
/posts	Paginated list of posts (10 per page)
/posts/new	Create a new post
/posts/:id	Post detail view
/cart	Shopping cart with discount & totals

Run locally

cd front
npm install
npm run dev

App runs at http://localhost:5173

Tech stack

• React 19 + TypeScript
• Vite + Tailwind CSS v4
• React Router v7
• Zustand (cart state, persisted to localStorage)
• React Hook Form (form validation)
• Axios (API requests)
• JSONPlaceholder API for posts

---

Backend (back/)

NestJS + TypeORM + PostgreSQL (Supabase)

Prerequisites

• Node.js 18+
• A PostgreSQL database (local or Supabase)

Setup

1. Copy .env.example to .env and fill in your values:

cp .env.example .env

.env fields:

DB_HOST=localhost
DB_PORT=5432
DB_USERNAME=postgres
DB_PASSWORD=postgres
DB_NAME=taskflow

JWT_SECRET=your-secret-key
JWT_EXPIRES_IN=7d

AUTH_USERNAME=admin
AUTH_PASSWORD=admin123

2. Install and run:

cd back
npm install
npm run start:dev

API running at http://localhost:3001/api

Authentication

All routes (except POST /api/auth/login) require a Bearer token.

Login:

POST /api/auth/login
Content-Type: application/json

{ "username": "admin", "password": "admin123" }

Response:

{ "access_token": "..." }

Use the token in subsequent requests:

Authorization: Bearer <access_token>

API Endpoints

Auth

Method	Route	Description
POST	/api/auth/login	Get JWT token

Teams

Method	Route	Description
POST	/api/teams	Create team with members
GET	/api/teams	List all teams
GET	/api/teams/:id	Get team by ID
POST	/api/teams/:id/members	Add member to team
DELETE	/api/teams/members/:memberId	Remove member

Tasks

Method	Route	Description
POST	/api/tasks	Create task
GET	/api/tasks	List all tasks with assignee
GET	/api/tasks/:id	Get task by ID
PATCH	/api/tasks/:id	Update task (status, assignee, etc.)
DELETE	/api/tasks/:id	Delete task

Task Status values

TODO | IN_PROGRESS | DONE

Example: Create a team

POST /api/teams
{
  "name": "Engineering",
  "description": "Core engineering team",
  "members": [
    { "name": "Alice", "email": "alice@example.com", "role": "Lead" },
    { "name": "Bob", "email": "bob@example.com", "role": "Dev" }
  ]
}

Example: Create a task

POST /api/tasks
{
  "title": "Build login page",
  "description": "Create responsive login UI",
  "dueDate": "2025-03-01",
  "assigneeId": 1,
  "status": "TODO"
}

Example: Update task status

PATCH /api/tasks/1
{
  "status": "IN_PROGRESS"
}

---

Database

TypeORM is configured with synchronize: true for development — it will auto-create tables on first run. Set synchronize: false and use migrations in production.

Tables created:

• teams
• team_members
• tasks