How React JS Helps You Land a Business Analyst Job Faster

US-210 As a customer, I want to see my past orders
       so that I can track and reorder items.

Acceptance criteria:
Given orders are loading
Then I see placeholder rows, not a blank page

Given I have orders
Then I see order date, amount and status, newest first

Given I have no orders
Then I see "No orders yet" and a "Shop now" button

Given the orders service fails
Then I see "We couldn't load your orders" and a Retry button

Screen: My Orders
Components:
  PageHeader        (shared, already exists)
  OrderFilter       (new: status dropdown)
  OrderList         (new)
    OrderCard       (new: date, amount, status, reorder)
  EmptyState        (shared, reuse with new text)
  ErrorBanner       (shared, reuse)
Notes for refinement:
  - Reusing shared components lowers effort
  - OrderCard may be reused in "Recent orders" widget

const sampleOrders = [
  { id: 101, date: "2026-10-02", amount: 1299, status: "Delivered" },
  { id: 102, date: "2026-10-18", amount: 499,  status: "Shipped" },
];

export default function MyOrders({ orders = sampleOrders, isBusiness = false }) {
  if (orders.length === 0) return <p>No orders yet. <button>Shop now</button></p>;
  return (
    <div>
      {isBusiness && <p>GST invoices are available for each order.</p>}
      {orders.map((o) => (
        <div key={o.id}>
          {o.date} — Rs {o.amount} — {o.status} <button>Reorder</button>
        </div>
      ))}
    </div>
  );
}

Reading the component as a BA:
- Empty state exists: "No orders yet" + Shop now
- Business rule: GST note only when isBusiness is true
- Each order shows date, amount, status, Reorder
- Missing compared to the story:
    * loading state
    * error state with Retry
    * sorting newest first
Raise these gaps in refinement.

Story: US-210 My Orders
Questions raised:
1. Does the orders API return status and amount? (Dev: yes)
2. Is there an existing EmptyState component? (Dev: yes)
3. Should the status filter persist on return? (PO: no)
4. Reorder needs a new API endpoint (Dev: +3 points)
Decision: split Reorder into US-211

Component   - reusable piece of screen
Props       - inputs a component receives
State       - data a screen remembers and updates
Render      - drawing the screen from data
API call    - fetching or saving data on the server
Loading / empty / error - the states every screen needs
Feature flag - switch to turn a feature on or off

Week 1: HTML and basic JavaScript reading
        (variables, arrays, if statements)
Week 2: React basics — components, props, state
        (read 3 small examples, change text and order)
Week 3: Screen states — rewrite 3 stories with loading,
        empty and error criteria
Week 4: Review a simple prototype against a story;
        write a gap list

Case study: "My Orders" feature
1. Business need and stakeholders
2. Component breakdown (new vs reused)
3. User story with all screen states
4. Prototype screenshot + gap list
5. Refinement notes and split decision

- Wrote state-aware user stories (loading, empty, error)
  and reviewed React prototypes against acceptance
  criteria, reducing clarification cycles in refinement
  (portfolio case study)