In my day job there’s been a number of times where I’ve been working on an analytics tracking issue and I’m either looking to understand the general structure of a given URL or I’m searching through 1,000+ characters of tokens and UTMs and redirect paths looking for a specific string of text.
I’ll be honest, I’ve sat there and manually split the URL out into all of its component pieces in order to make sense of the query string keys and values. It was painful. Really painful.
So, what do you do when you feel that sort of pain? That pain of knowing there must be an easier way…
Well, you solve the problem with code!
My solution to the problem is the does-what-it-says-on-the-tin URL Deconstructor! Try it out or check out the code.
What is it and what does it do?
URL Deconstructor is a simple web app that takes a URL the user enters and, when they click the “Deconstruct” button, it displays the component parts of that URL in tabular format below.
This helps to break down complex URLs so that the contents can be more easily understood.
How was it built?
It was built with React using Create React App as a starting point.
There are three main components to the app:
App.js– This is the main app component that renders all of the content including the two components below. Apart from handling state withuseState(), it also handles the<input>field change and<form>submit (including error handling with atry... catchstatement), as well slightly more complex state management for the URL deconstruction withuseReducer().UrlInput.js– This component is primarily the URL<input>field. It displays an error message if thetry... catchinApp.jsreceives an invalid URL.UrlParts.js– This component handles the layout of the two tables that are displayed (one for a Basic URL Breakdown and the other for Query String Keys & Values). As some URLs don’t have certain elements – i.e. a hash or query strings – there are some conditional checks to avoid displaying those with empty values in the table. I used the ES6Array.map()helper function to loop through all available query string key/value pairs to display them all.
CSS is largely handled in a single, separate App.css file, though there is currently some conditional inline CSS within the App.js component.
It took around 5 hours to build in its current form (as of May 8, 2022).
What did I learn?
There was nothing too ground-breaking here. Instead it was more of a case of using the knowledge that I already have through recent learning.
It’s always good, as you’re learning, to just reinforce some of those fundamental things through repeated use, such as:
- Handling
onChangeandonSubmitevents for user input. - Conditional CSS styling.
- Error handling.
- Conditionally rendering components or elements.
- Displaying data via loops.
On the more negative side, I think I may have made the URL deconstruction process a bit more involved than it needs to be. The rationale for using useReducer() to break down and store the different parts of the URL was because it involves multiple bits of related state. I think I used it because I had just recently learnt about it! I could just use useState() and set an object as the state.
What’s next?
The core of the project is essentially complete; it works and it solves the problem I set out to solve. However, if I were to continue developing the app I would consider the following:
- Make the styling approach consistent by changing the conditional inline styles to be class-based – this way we can avoid all inline CSS
- Further breakdown the URL in the “Basic URL Breakdown” section to include the protocol (i.e. HTTPS), different parts of the subdomain/domain, and the TLD
- Implement a “Copy Value” button to allow a user to quickly copy a specific query string value to their clipboard
- Implement a more straightforward alternative to
useReducer(as discussed above), such asuseState - Implement a form of export feature (i.e. CSV/Excel, JSON, txt)
- Implement a search field to filter matching query string keys/values