this is my power shell

How to Create a Complete BOQ Application Using React + TypeScript & PowerShell Script

In this guide, we will walk through creating a fully functional Interior BOQ (Bill of Quantities) Application using React + TypeScript. The app includes:

• Full item list with SFT, Rate, Qty, Total
• Image support for each item
• Grand Total calculator
• Clean UI table with React components

To make this even easier, we will use a PowerShell script to automatically create the entire project structure and components.

Step 1: Run PowerShell Script to Auto-Create the App

Save the following script as create-boq-app.ps1 and run it:

# Create React + TypeScript BOQ App
npx create-react-app boq-app --template typescript

Set-Location boq-app

# Create folders
mkdir src/components
mkdir src/data
mkdir public/img

# Create items.ts with full BOQ data
# (Script will automatically generate this file)
        

When executed, this script:

• Creates a new React TypeScript project
• Adds data and component folders
• Generates all source files
• Installs dependencies

Step 2: The BOQ Data File (items.ts)

A TypeScript data file is generated containing all 28 BOQ items, each with price, measurement, and image path:

export const items = [
  { id: 1, name: "Wardrobe Section 1", width: 15, height: 2.75, sft: 41.25, rate: 1350, qty: 1, total: 55687.50, image: "/img/wardrobe1.jpg" },
  { id: 2, name: "Wardrobe Section 2", width: 15, height: 2.25, sft: 33.75, rate: 1350, qty: 1, total: 45562.50, image: "/img/wardrobe2.jpg" },
  ...
];
        

You can replace image paths with real interior work images inside public/img/.

Step 3: Creating the React Components

ItemRow Component

Displays a single BOQ row with image and values.

const ItemRow = ({ item }) => (
  <tr>
    <td><img src={item.image} width="60" /></td>
    <td>{item.name}</td>
    <td>{item.width}</td>
    <td>{item.height}</td>
    <td>{item.sft}</td>
    <td>{item.rate}</td>
    <td>{item.qty}</td>
    <td>{item.total}</td>
  </tr>
);
        

ItemTable Component

Displays the full BOQ table and grand total.

const ItemTable = () => {
  const grandTotal = items.reduce((sum, i) => sum + i.total, 0);
};
        

Step 4: The App Component

Displays the complete BOQ UI.

function App() {
  return (
    <div>
      <ItemTable />
    </div>
  );
}
        

Step 5: Running the Application

After running the PowerShell script, start the React app:

cd boq-app
npm start
        

The app will open at:

http://localhost:3000

You will now see a beautiful BOQ table with:

• All item names
• Images
• SFT, Rate, Qty
• Automatically calculated Grand Total

Conclusion

Using a single PowerShell script, we created a complete React + TypeScript BOQ Application that can display interior work items professionally with images and pricing.

This setup is perfect for:

• Interior Designers
• Architect Firms
• Construction BOQ Teams
• Contractors & Vendors

Want API support, admin login, or PDF quotation export? I can help you extend this application further.