Excel/CSV Parser - MERN Project

A simple MERN stack application that allows users to upload Excel or CSV files, parse them, and display the data with pagination (50 rows at a time).

Features

• Upload Excel (.xlsx, .xls) or CSV files
• Parse files with 4 columns: sample_id, class_name, method_name, code_sample
• Display data in a clean, paginated format (25 rows per page)
• Copy all 25 rows at once to clipboard in formatted text
• Navigate between pages with Previous/Next buttons
• Responsive UI design

Project Structure

csv script/
├── backend/
│   ├── controllers/
│   │   └── uploadController.js
│   ├── routes/
│   │   └── uploadRoutes.js
│   ├── uploads/             (created automatically)
│   ├── package.json
│   └── server.js
├── frontend/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── components/
│   │   │   ├── Upload.js
│   │   │   ├── Upload.css
│   │   │   ├── Display.js
│   │   │   └── Display.css
│   │   ├── App.js
│   │   ├── App.css
│   │   ├── index.js
│   │   └── index.css
│   └── package.json
└── README.md

Installation

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Backend Setup

1. Navigate to the backend directory:

cd backend

2. Install dependencies:

npm install

3. Start the backend server:

npm start

Or for development with auto-restart:

npm run dev

The backend server will run on http://localhost:5000

Frontend Setup

1. Open a new terminal and navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Start the React development server:

npm start

The frontend will open automatically at http://localhost:3000

Usage

1. Open your browser and go to http://localhost:3000
2. Click on the file upload area or "Choose a file..." button
3. Select an Excel (.xlsx, .xls) or CSV file with the following format:
   • Column A: sample_id
   • Column B: class_name
   • Column C: method_name
   • Column D: code_sample
4. Click "Upload & Parse" button
5. View the parsed data (first 25 rows)
6. Click "Copy All 25 Rows" to copy current page data to clipboard
7. Use "Next 25" and "Previous 25" buttons to navigate through pages
8. Click "Back to Upload" to upload a new file

API Endpoints

POST /api/upload

Upload and parse Excel/CSV file

• Request: multipart/form-data with file
• Response:

{
  "message": "File uploaded and parsed successfully",
  "totalRows": 673
}

GET /api/data?page=1

Get paginated data

• Query Parameters:
  • page (optional, default: 1)
• Response:

{
  "data": [...],
  "currentPage": 1,
  "totalPages": 27,
  "totalRows": 673,
  "hasMore": true
}

Technologies Used

Backend

• Express.js - Web framework
• Multer - File upload handling
• xlsx - Excel/CSV parsing
• cors - Cross-origin resource sharing

Frontend

• React - UI library
• Axios - HTTP client
• CSS3 - Styling

Notes

• Data is stored in memory. For production, consider using a database (MongoDB)
• Uploaded files are automatically deleted after parsing
• Maximum 25 rows displayed per page
• Copy button copies all 25 rows in formatted text
• Supports Excel (.xlsx, .xls) and CSV formats

License

ISC