Demo :: Task master

1.txt

You are an expert at creating Product Requirements Document(PRD) based on the content provided in [Requirements] section.

List of topics in PRD
1. XXX
2. XXX
3. XXX
1. XXX


[Requirements]
your requirments

[Response format]
Response in Markdown code only

2.txt

// 1. Install
$npm install -g task-master-ai

// 2. Initial task master in project
$task-master init --rules cursor,windsurf,vscode

// 3. Parse PRD to tasks (task.json)
$task-master parse-prd your-prd.txt

// 4. List of all tasks
$task-master list

┌────────┬─────────────────────────────────────────┬─────────────────┬─────────────┬───────────────────────┬───────────┐
│ ID     │ Title                                   │ Status          │ Priority    │ Dependencies          │ Complexi… │
├────────┼─────────────────────────────────────────┼─────────────────┼─────────────┼───────────────────────┼───────────┤
│ 1      │ Initialize Project Structure            │ ✓ done          │ high        │ None                  │ N/A       │
├────────┼─────────────────────────────────────────┼─────────────────┼─────────────┼───────────────────────┼───────────┤
│ 2      │ Implement HTML Boilerplate              │ ✓ done          │ high        │ 1                     │ N/A       │
├────────┼─────────────────────────────────────────┼─────────────────┼─────────────┼───────────────────────┼───────────┤
│ 3      │ Embed SVG 'Hello World' Graphic         │ ✓ done          │ high        │ 2                     │ N/A       │
├────────┼─────────────────────────────────────────┼─────────────────┼─────────────┼───────────────────────┼───────────┤
│ 4      │ Define Base CSS Styles                  │ ✓ done          │ high        │ 2                     │ N/A       │
├────────┼─────────────────────────────────────────┼─────────────────┼─────────────┼───────────────────────┼───────────┤
│ 5      │ Create CSS Animations                   │ ✓ done          │ high        │ 4                     │ N/A       │
├────────┼─────────────────────────────────────────┼─────────────────┼─────────────┼───────────────────────┼───────────┤
│ 6      │ Apply Animations to SVG Elements        │ ✓ done          │ high        │ 3, 5                  │ N/A       │
├────────┼─────────────────────────────────────────┼─────────────────┼─────────────┼───────────────────────┼───────────┤
│ 7      │ Ensure Responsive Layout                │ ○ pending       │ medium      │ 3, 4                  │ N/A       │
├────────┼─────────────────────────────────────────┼─────────────────┼─────────────┼───────────────────────┼───────────┤
│ 8      │ Cross-Browser Testing and Optimization  │ ○ pending       │ medium      │ 6, 7                  │ N/A       │
└────────┴─────────────────────────────────────────┴─────────────────┴─────────────┴───────────────────────┴───────────┘

3.json

{
	"mcpServers": {
		"task-master-ai": {
			"command": "npx",
			"args": ["-y", "--package=task-master-ai", "task-master-ai"],
			"env": {
				"ANTHROPIC_API_KEY": "ANTHROPIC_API_KEY_HERE",
				"PERPLEXITY_API_KEY": "PERPLEXITY_API_KEY_HERE",
				"OPENAI_API_KEY": "OPENAI_API_KEY_HERE",
				"GOOGLE_API_KEY": "GOOGLE_API_KEY_HERE",
				"XAI_API_KEY": "XAI_API_KEY_HERE",
				"OPENROUTER_API_KEY": "OPENROUTER_API_KEY_HERE",
				"MISTRAL_API_KEY": "MISTRAL_API_KEY_HERE",
				"AZURE_OPENAI_API_KEY": "AZURE_OPENAI_API_KEY_HERE",
				"OLLAMA_API_KEY": "OLLAMA_API_KEY_HERE"
			}
		}
	}
}

tasks.json

{
  "master": {
    "tasks": [
      {
        "id": 1,
        "title": "Setup Project Repository",
        "description": "Initialize the Git repository and create the base project structure for frontend, backend, and docker configurations.",
        "details": "1. git init\n2. Create folders: /backend, /frontend\n3. Add root-level files: README.md, .gitignore (Node, React, env files), docker-compose.yml placeholder\n4. Commit initial structure",
        "testStrategy": "Verify that 'git status' shows the new repository, folder structure exists, and initial files are committed successfully.",
        "priority": "high",
        "dependencies": [],
        "status": "done",
        "subtasks": []
      },
      {
        "id": 2,
        "title": "Configure Docker and Docker Compose",
        "description": "Define Dockerfiles for backend and frontend, and configure docker-compose.yml to orchestrate Postgres, backend, and frontend services.",
        "details": "1. Create backend/Dockerfile (Node.js base, copy source, npm install, npm start)\n2. Create frontend/Dockerfile (Node base, copy source, npm install, npm start)\n3. Write docker-compose.yml with services:\n   - db: image postgres:13, env vars, volume for data\n   - backend: build ./backend, env_file .env, depends_on db\n   - frontend: build ./frontend, depends_on backend\n4. Expose ports: 5432, 5000, 3000",
        "testStrategy": "Run 'docker-compose up --build' and verify all three containers start without errors; check that backend container can connect to Postgres.",
        "priority": "high",
        "dependencies": [
          1
        ],
        "status": "done",
        "subtasks": []
      },
      {
        "id": 3,
        "title": "Initialize Backend Skeleton",
        "description": "Set up the Node.js/Express project structure and install required libraries for the backend service.",
        "details": "1. cd backend; npm init -y\n2. Install dependencies: express, pg, bcrypt, dotenv, cors\n3. Install devDependencies: nodemon, eslint, prettier\n4. Create src/index.js: basic Express app, body parsing, /health route\n5. Add ESLint and Prettier config files",
        "testStrategy": "Run 'npm run start' or 'npm run dev' and send GET to /health; expect 200 OK with response {status:'ok'}.",
        "priority": "high",
        "dependencies": [
          1
        ],
        "status": "done",
        "subtasks": []
      },
      {
        "id": 4,
        "title": "Design Database Schema and Connection Module",
        "description": "Define the PostgreSQL users table schema and implement a connection utility using the pg library.",
        "details": "1. Create backend/db/schema.sql with:\n   - CREATE EXTENSION IF NOT EXISTS pgcrypto;\n   - CREATE TABLE users(\n       id UUID PRIMARY KEY DEFAULT gen_random_uuid(),\n       firstname VARCHAR(255) NOT NULL,\n       lastname VARCHAR(255) NOT NULL,\n       email VARCHAR(255) UNIQUE NOT NULL,\n       password_hash VARCHAR(255) NOT NULL,\n       created_at TIMESTAMP DEFAULT now()\n     );\n2. Create src/db/index.js:\n   const {Pool} = require('pg');\n   const pool = new Pool({host:process.env.DB_HOST,...});\n   module.exports = {query: (text, params) => pool.query(text, params)};",
        "testStrategy": "Execute a script that runs schema.sql against a test database and then run a test query SELECT 1; ensure no errors and valid response.",
        "priority": "high",
        "dependencies": [
          3
        ],
        "status": "done",
        "subtasks": []
      },
      {
        "id": 5,
        "title": "Implement User Registration API Endpoint",
        "description": "Create POST /api/register endpoint to accept user data, validate input, hash password, and insert into the database.",
        "details": "1. In src/routes/auth.js define router.post('/register', async (req, res) => {...})\n2. Validate firstname, lastname non-empty; email format; password length >=6\n3. Use bcrypt.hash(password, 10) to generate password_hash\n4. Call db.query('INSERT INTO users(...) VALUES($1,$2,...) RETURNING id, firstname, lastname, email', [...])\n5. Handle unique email violation (catch error code 23505)\n6. Return 201 with user object or 400 on validation/database errors",
        "testStrategy": "Use curl or Postman to POST valid and invalid payloads: expect 201 for valid, 400 for missing fields, invalid email, duplicate email returns 400 with clear message.",
        "priority": "high",
        "dependencies": [
          4
        ],
        "status": "done",
        "subtasks": []
      },
      {
        "id": 6,
        "title": "Setup and Write Backend Tests for Registration Endpoint",
        "description": "Configure Jest and SuperTest, then write tests covering the registration endpoint scenarios.",
        "details": "1. In backend install jest, supertest, cross-env as devDependencies\n2. Configure jest in package.json (test script, setup files)\n3. Create tests/auth.test.js:\n   - Test success case\n   - Test missing firstname/lastname/email/password\n   - Test invalid email and short password\n   - Test duplicate email scenario (cleanup DB between tests)\n4. Use SuperTest to call server in-memory",
        "testStrategy": "Run 'npm test' and ensure all test cases pass; aim for >=80% code coverage on auth routes.",
        "priority": "medium",
        "dependencies": [
          5,
          3
        ],
        "status": "done",
        "subtasks": []
      },
      {
        "id": 7,
        "title": "Initialize Frontend Skeleton and Integrate Tailwind CSS",
        "description": "Set up the ReactJS application using Create React App and configure Tailwind CSS for styling.",
        "details": "1. cd frontend; npx create-react-app .\n2. Install Tailwind CSS: npm install tailwindcss postcss autoprefixer\n3. npx tailwindcss init -p; configure tailwind.config.js to scan src/**/*.{js,jsx}\n4. Add @tailwind directives to src/index.css\n5. Add react-router-dom if needed for routing\n6. Configure 'proxy' in package.json to 'http://localhost:5000'",
        "testStrategy": "Run 'npm start', open http://localhost:3000, add a div with className='bg-blue-500 p-4', confirm styling renders correctly.",
        "priority": "high",
        "dependencies": [
          1
        ],
        "status": "done",
        "subtasks": []
      },
      {
        "id": 8,
        "title": "Implement Registration Form Component",
        "description": "Build a responsive registration form in React with input validation and API integration.",
        "details": "1. Create src/components/RegisterForm.jsx\n2. Use useState for form fields: firstname, lastname, email, password\n3. Client-side validation: required fields, email regex, password length\n4. Style with Tailwind classes for mobile-first and desktop layouts\n5. On submit, fetch POST to `${process.env.REACT_APP_API_URL}/api/register`\n6. Show loading state, success message, and error alerts",
        "testStrategy": "In browser, manually test: empty submit shows validation errors; valid data submits and shows success; test on desktop and mobile screen widths to confirm responsiveness.",
        "priority": "medium",
        "dependencies": [
          7
        ],
        "status": "pending",
        "subtasks": []
      },
      {
        "id": 9,
        "title": "Setup Environment Variable Management",
        "description": "Configure environment variables for backend and frontend to manage configuration endpoints and database credentials.",
        "details": "1. In backend: add .env.example with DB_HOST, DB_PORT, DB_USER, DB_PASSWORD, DB_NAME, PORT\n2. Install dotenv and load at the top of src/index.js\n3. In frontend: create .env.development with REACT_APP_API_URL=http://localhost:5000\n4. Update docker-compose.yml to reference env files for backend and frontend",
        "testStrategy": "For backend, console.log process.env.DB_HOST in startup and verify output. For frontend, console.log process.env.REACT_APP_API_URL and verify in browser console.",
        "priority": "medium",
        "dependencies": [
          3,
          7
        ],
        "status": "pending",
        "subtasks": []
      },
      {
        "id": 10,
        "title": "Write Frontend Tests for Registration Form",
        "description": "Use React Testing Library and Jest to validate form behavior, validation messages, and API integration flow.",
        "details": "1. Install @testing-library/react and @testing-library/jest-dom\n2. Create src/__tests__/RegisterForm.test.jsx:\n   - Render form, check for input labels\n   - Simulate invalid inputs and assert validation messages\n   - Mock fetch to simulate success and error responses\n   - Assert that success or error message displays accordingly",
        "testStrategy": "Run 'npm test' in frontend; ensure all tests pass and form logic is fully covered.",
        "priority": "medium",
        "dependencies": [
          8,
          9
        ],
        "status": "pending",
        "subtasks": []
      }
    ],
    "metadata": {
      "created": "2025-07-05T12:35:30.165Z",
      "updated": "2025-07-05T15:13:13.721Z",
      "description": "Tasks for master context"
    }
  }
}