Data Merge POC

A proof-of-concept React application that merges product data from three companies, allowing for editable fields and Excel export functionality.

Features

• React Frontend: Modern React application with component-based architecture
• Three Company Data Tables: Displays 10 products each with editable ItemCode and ItemCodeDesc fields
• Real-time Editing: Click on any description field to edit it directly
• Smart Merge Logic: Finds common ItemCodes across all three companies
• Backend Processing: Sends descriptions to backend for intelligent processing
• Excel Export: Export merged results to Excel format
• Modern UI: Built with Tailwind CSS for a clean, responsive interface

How to Use

1. Install Dependencies:

   npm install

2. Start Development Server:

   npm run dev

   This will start both the backend server (port 3000) and React dev server (port 3001)

3. Open the Application:

   • Navigate to http://localhost:3001 in your browser

4. Workflow:

   • Click "Load Product Data" to populate the three company tables
   • Edit any description fields by clicking on them
   • Click "MERGE" to find common ItemCodes and process descriptions
   • View results in the merge results table
   • Click "Export to Excel" to download the results

Sample Data

The application comes with sample data for three companies:

• Company A: Laptop Computer, Wireless Mouse, Mechanical Keyboard, etc.
• Company B: Portable Laptop, Gaming Mouse, RGB Keyboard, etc.
• Company C: Business Laptop, Ergonomic Mouse, Silent Keyboard, etc.

All companies share the same ItemCodes (ITEM001-ITEM010) but with different descriptions.

API Endpoints

• GET /api/data - Returns sample data for all three companies
• POST /api/merge - Processes descriptions through backend logic
• POST /api/export - Exports merged results to Excel format

Technology Stack

• Backend: Node.js, Express.js
• Frontend: React 18, Vite
• Styling: Tailwind CSS
• Excel Export: xlsx library
• Build Tool: Vite for fast development and building

Project Structure

├── package.json          # Project dependencies
├── vite.config.js        # Vite configuration
├── server.js            # Express server with API endpoints
├── index.html           # HTML entry point
├── src/
│   ├── main.jsx         # React entry point
│   ├── App.jsx          # Main App component
│   ├── index.css        # Global styles with Tailwind
│   └── components/      # React components
│       ├── ControlPanel.jsx
│       ├── CompanyTable.jsx
│       ├── MergeResults.jsx
│       └── StatusMessage.jsx
└── README.md           # This file

Development

For development with hot reload:

npm run dev

For production build:

npm run build
npm start

Available Scripts

• npm run dev - Start both backend and frontend in development mode
• npm run server - Start only the backend server
• npm run client - Start only the React dev server
• npm run build - Build React app for production
• npm start - Start production server