CSV Import Engine (Frontend-Only)

A React + Vite + TypeScript + Tailwind project designed to simplify importing, mapping, and previewing CSV files. This tool is built with scalability and real-world use cases in mind—ideal for CMS integration, content editors, data managers, or eCommerce administrators needing to process structured data without backend dependencies.

---

🧠 Why This Project?

As part of frontend technical assessment and to showcase skills aligned with the Evolving Web job requirements, this CSV Import Engine was created to demonstrate:

• Mastery in React, TypeScript, and Tailwind CSS
• Clean, modular component architecture
• Real-world usability through a CSV uploader with mapping UI and preview
• Reusable components and scalable logic suitable for integration with CMS platforms like Drupal or WordPress

This project reflects high attention to detail, best practices in UI/UX, and readiness to contribute to cross-functional teams and open-source CMS ecosystems.

---

🚀 Features

• Drag & Drop CSV Upload
• PapaParse Integration for CSV header parsing
• Auto Field Mapping and manual override support
• Live Data Table Preview (first 10 rows)
• Clear & Reset Workflow
• Tailwind UI with responsive, accessible layout

---

📦 Tech Stack

• React 19 with Vite
• TypeScript for type safety
• Tailwind CSS for utility-first design
• PapaParse for CSV parsing

---

🔧 Installation

git clone https://github.com/sameer0422/csv-import-engine.git
cd csv-import-engine
npm install

---

▶️ Running the App

npm run dev

The app will be available at: http://localhost:5173

---

📁 Project Structure

src/
├── assets/
│   └── products.csv          # Example CSV
├── components/
│   ├── FileUpload.tsx        # Handles CSV upload & drag-drop
│   ├── FieldMapping.tsx      # Displays editable field mapping UI
│   └── DataPreview.tsx       # Table preview of parsed CSV
├── pages/
│   └── ImportPage.tsx        # Container for import logic and display
├── App.tsx                   # Root component
├── main.tsx                  # App bootstrap
└── index.css                 # Tailwind base

---

💡 Potential Enhancements (Based on Job Description)

To align with best practices and Evolving Web's client-driven frontend excellence, we can expand this project with:

• 🔍 Field Type Inference: Detect string, numeric, date types for validation
• ✏️ Inline Editable Table Cells: Allow fixing data before import
• ⚠️ Field-Level Validation Rules: Highlight missing/invalid entries
• 🔄 Undo/Redo Stack: Better state control for mapping and edits
• 📤 Export Cleaned Data: Allow download after mapping/editing
• 🌐 Localization Support: Add i18n for multilingual compatibility
• 🧪 Unit + Integration Tests: Add tests with Jest + React Testing Library
• 🧩 Plugin System: Embed into CMSs (WordPress/Drupal) as a standalone React module

---

🤝 Contributing

Fork this project and submit pull requests. Every enhancement should include:

• Clear commit history
• Descriptive PR title
• Linting and formatting adherence
• Screenshots or test cases for UI

---

👨‍💻 Author

Sameer Haque – Frontend Developer

• Focus: React, TypeScript, CMS (Drupal/WordPress), UI/UX
• GitHub

---

📜 License

MIT License – Use it freely and extend as needed.