Building web app to check diff between two texts

in webtool •  2 years ago  (edited)

The idea

I have started this a few years ago when I had to compare two configuration files and find the difference. I know there are many desktop software and online tools to do it. But I haven't seen anything that I could use to compare files with a given format. For example, if I have given two JSON files to compare and find what are the changes, you can do a plain text diff. But things are getting harder since two JSON can be identical even if they look different. think of the following scenario of comparing two JSON content. The first one is as follows:
{ "key1": "value1", "key2": "value2" }
The second one is as follows:
{ "key2": "value2", "key1": "value1" }
Technically, these two are the same JSON but in a different order. Therefore, I wanted to get rid of that and build software that can compare two JSON considering their structure.
The solution I came up with was to convert both of these cases into the canonical format and then compare it. The online version of the app is deployed in https://differ.netlify.app/ as a netlify app. Here, you can insert two texts and compare them as text, JSON, XML, or as a property file.

Screenshot 2023-02-02 at 09.02.50.png

Here is what happens if you compare two JSON contents:

Screenshot 2023-02-02 at 09.25.10.png

Limitations

  • This is in a browser application and therefore the content size that can handle is also limited.
  • UI is not responsive with mobile and there are some works to do.

Future plans

  • Make UI more responsive.
  • Support saving and sharing a diff with others

Do you have any suggestions? Comment it down where I can use it to improve it.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!