LaundryFlow Mini

A small, self-contained slice of a dry cleaning & laundry management platform.

This mini-project simulates a basic order tracking feature used by store staff:

• A Node + Express backend exposes a few REST endpoints for managing orders.
• A React frontend shows a dashboard where staff can see and filter orders.

The goal is to:

• Understand the existing code and data model.
• Extend the system with small, focused features.
• Think about how you would evolve this into an AI-first product.

---

Business Context

LaundryFlow is a SaaS platform for dry cleaners and laundromats. Store staff use it to:

• Create and track customer orders (wash, dry clean, iron, etc.).
• See which orders are pending, in progress, or ready for pickup.
• Quickly search and filter orders during busy hours.

In this mini-version, we only focus on orders. Each order has:

• id: numeric identifier
• customerName: name of the customer
• status: one of "PENDING" | "IN_PROGRESS" | "READY" | "DELIVERED"
• items: array of garment descriptions (e.g. "Shirt", "Suit")
• totalAmount: total bill amount in INR
• createdAt: ISO timestamp string

The backend keeps data in memory (no database) to keep things simple.

---

What Is Already Implemented

Backend (Node + Express)

Located in server/:

• server/index.js
  • Sets up an Express server on port 4000.
  • CORS-enabled so the React frontend can call it.
  • In-memory orders array with some sample data.
  • Endpoints:
    • GET /api/orders – returns all orders, with optional status query filter.
    • GET /api/orders/:id – returns a single order by ID.
  • Basic validation and error handling (404 for missing orders).

Frontend (React)

Located in client/:

• client/src/index.js

  • React entry point, renders <App />.

• client/src/App.js

  • Fetches the list of orders from the backend.
  • Allows filtering by status using a dropdown.
  • Renders a table of orders.

• client/src/api.js

  • Small helper to call the backend API.

The frontend assumes the backend is running on http://localhost:4000.

---

What You Need to Build

You have two small implementation tasks plus some theory questions about design and tradeoffs.

1. Implementation Task A – Add a POST endpoint to create orders

File(s) to modify:

• server/index.js

Goal: Add a new endpoint:

• POST /api/orders
  • Accepts a JSON body with:
    • customerName (string, required, non-empty)
    • items (non-empty array of strings)
    • totalAmount (number, >= 0)
  • Sets:
    • id (auto-incremented integer)
    • status (default to "PENDING")
    • createdAt (current timestamp in ISO format)
  • Returns the created order with HTTP status 201.
  • On invalid input, returns HTTP 400 with a helpful error message.

You do not need to add a database; keep using the in-memory array.

2. Implementation Task B – Add a client-side search filter by customer name

File(s) to modify:

• client/src/App.js

Goal: Add a text input that lets the user filter the orders by customerName on the client side.

• When the user types into the search box, the table should only show orders whose customerName contains the search text (case-insensitive).
• This should work together with the existing status filter.
• The search should not trigger extra network requests; filter the already-fetched list in memory.

---

Running the Project

Prerequisites

• Node.js (v16+ recommended)
• npm (v8+)

1. Install dependencies

From the project root:

npm install

This will install dependencies for both the server and client using the root package.json.

2. Run the backend and frontend

From the project root:

npm start

This will:

• Start the Express server on http://localhost:4000
• Start the React dev server on http://localhost:3000

The React app is configured with a proxy so API calls to /api/... are forwarded to the backend.

3. Open the app

Visit:

• Frontend: http://localhost:3000

You should see a simple orders dashboard with a status filter and a table of sample orders.

---

Notes

• This is intentionally small; focus on clarity and correctness over complexity.
• You are encouraged to think how AI tools (like ChatGPT or Copilot) could help you:
  • Understand the codebase
  • Draft initial implementations
  • Generate tests or edge-case ideas
• However, please make sure you read and understand any code you include.

Good luck, and have fun building!