Module 8: Professional Workflow

User Story

As a team lead, I want to enforce a consistent coding style so that code reviews focus on logic, not indentation.

Acceptance Criteria

• Install and configure Prettier.
• Configure ESLint to work with Prettier (avoid conflicts).
• Add a rule to sort imports alphabetically (using `eslint-plugin-simple-import-sort` or similar).
• Add a rule to ban `console.log` in production code.

Implementation Guide

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc.cjs (Example):

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'prettier' // Must be last
  ],
  rules: {
    'no-console': 'warn',
    'react/react-in-jsx-scope': 'off'
  }
}

User Story

As a developer, I want to prevent "broken" code from entering the repository.

Acceptance Criteria

• Install Husky and lint-staged.
• Configure a `pre-commit` hook.
• The hook must run `tsc` (type check) and `lint` only on changed files.

Implementation Guide

npx husky-init && npm install
npm install -D lint-staged

package.json:

"lint-staged": {
  "*.{ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}

User Story

As a UI designer, I want to view and test components in isolation to ensure they handle all edge cases.

Acceptance Criteria

• Install Storybook (or Ladle for speed).
• Create a Story for the `UserCard` component.
• Create variants: "Active User", "Inactive User", "Long Name".

Code Example (UserCard.stories.tsx)

import type { Meta, StoryObj } from '@storybook/react';
import UserCard from './UserCard';

const meta: Meta<typeof UserCard> = {
  component: UserCard,
};

export default meta;
type Story = StoryObj<typeof UserCard>;

export const Default: Story = {
  args: {
    name: 'John Doe',
    role: 'Developer',
    isActive: true,
  },
};

export const Inactive: Story = {
  args: {
    name: 'Jane Smith',
    role: 'Manager',
    isActive: false,
  },
};

User Story

As a Senior Developer, I need to participate in Agile ceremonies and conduct code reviews to ensure high-quality deliverables.

Acceptance Criteria

• Agile Participation: Simulate a Sprint Planning session. Break down a large feature (e.g., "User Dashboard") into small, estimable tasks (Jira tickets).
• Code Review Simulation: Review a "Pull Request" (provided in the Bug Hunt section below). Identify:
  • Performance issues (unnecessary re-renders).
  • Security flaws (XSS vulnerabilities).
  • Code style violations.
  • Logic errors.
• Refactoring: Take a legacy class-based component and refactor it to a functional component with Hooks, improving readability and performance.