CSV Magic

Posted: 7/29/2022

One of my most ambitious projects to date, CSV Magic is a spreadsheet editor made with React that aimed to alleviate some of the frustrations the I had with a certain green application traditionally used for editing spreadsheets.

Goals:

• Quick and easy comparisons for file contents

• Evenly, but somewhat randomly assign new values to rows

• Maintainable and extensible

• Run entirely in browser

Tools Used:

• Bootstrap

• React

• TypeScript

• Jest

Choosing the Tools:

Typically, I make it a goal to learn some new technology when I set out on a new project, but I held back this time around. Since it was a larger project than what I was used to, I wanted to be more focused on how I built, than what I built with. Consequently, I decided to use React and TypeScript since they were what I was most familiar with.

The Process:

My first step was grabbing my notebook and making a list of exactly what I wanted the app to do based on the problems that I frequently ran into when dealing with spreadsheets. I had previously made a Python script to solve any some of my problems but found that I was wasting too much time modifying the script for whatever I currently needed it to do.

Once I had my list of features I gave create-react-app a run (which I would later end up regretting) and got to building. One misstep that I made initially was trying to layout the spreadsheet with a CSS grid, when there was already a perfectly good HTML element designed specifically for displaying tabular data. I think part of that stems from learning web development during a period when tables were the norm for layout, and then needing to unlearn that.

After I had the basic layout figured out, I developed my system for performing translations to the data, and wrote tests to make sure that they were performing as expected

I ran into some unanticipated performance problems somewhat early in the project, which forced me to rethink having the data as a simple 2D array representing the table. Instead, I switched to cells as objects so that they could quickly and easily be found based on their row and column, and to make any reordering or other changes to the table structure far less painful.

From there, the project came together quickly. There were inevitably additional features that I decided that I wanted, and that prompted some refactors. For the most part, the structure I built and the tests that I had written made it a smooth experience to expand the scope of the project.

Next Steps:

I have some other performance issues that I would like to tackle, and some additional features that I want to add, such as Regular Expression support in searches. I do find myself using this app on a fairly regular basis, so I’m pretty happy with how it turned out.

The app itself can be used at CSV Magic

The source code is on my GitHub https://github.com/mirite/csv-magic