CSVision

Inspiration

I noticed that data analysts and business users often need to combine and compare information from different sources, but existing tools are either too complex or require manual, error-prone work. I wanted to create a simple, intuitive platform that empowers anyone to upload, map, and merge any two CSV datasets—no coding required.

What it does

CSVision allows users to upload any two CSV files, automatically maps similar columns using smart matching, and merges all rows from both datasets. The result is a unified table that combines mapped columns and includes all unique columns from both files. This enables users to quickly analyze relationships, trends, and insights across disparate datasets—whether it’s weather and energy, sales and marketing, or any other data combination.

How its built

• Frontend: Built with React and Tailwind CSS for a responsive, user-friendly interface.
• Backend: Node.js and Express handle file uploads, CSV parsing, and intelligent column mapping using exact matches and string similarity.
• Data Processing: I used csv-parser for efficient CSV reading and string-similarity to match columns with similar names.
• Integration: The backend merges all rows from both datasets, unifying mapped columns and appending unmapped ones, then returns the result to the frontend for visualization.

Challenges I ran into

• Column Mapping: Automatically and accurately mapping columns with different naming conventions (e.g., Date vs. Date_Time) was challenging. I refined the matching logic to strike a balance between flexibility and accuracy.
• Data Diversity: Supporting arbitrary CSV structures meant handling missing values, different column orders, and inconsistent data types.
• User Experience: Designing a UI that is both powerful and simple for non-technical users required careful planning and feedback.

Accomplishments that I'm proud of

• Built a robust, general-purpose CSV integration tool that works for any pair of datasets.
• Achieved automatic, intelligent column mapping without hardcoding or manual intervention.
• Created a seamless, end-to-end workflow from upload to visualization.

What I learned

• The importance of flexible data processing pipelines that can adapt to diverse real-world data.
• How to leverage string similarity and heuristics for practical, user-friendly automation.
• The value of clear, iterative UI/UX design to make complex tasks accessible.

What's next for CSVision

• Advanced Mapping: Allow users to manually adjust or confirm column mappings.
• Data Transformation: Support for filtering, aggregation, and custom calculations.
• Visualization: Add built-in charts and analytics for deeper insights.
• Collaboration: Enable sharing and exporting of merged datasets and analysis results.
• Scalability: Optimize for large files and add support for more formats (e.g., Excel).

Built With

• express.js
• node.js
• react
• tailwindcss