Coding Challenge #106 - JSON Validator And Prettier

This challenge is to build your own JSON validation and prettier tool.

Hi this is John with this week’s Coding Challenge.

🙏 Thank you for being a subscriber, I’m honoured to have you as a reader. 🎉

If there is a Coding Challenge you’d like to see, please let me know by replying to this email📧

Coding Challenge #106 - JSON Validator And Prettier

This challenge is to build a JSON validator and formatter. JSON is everywhere, in APIs, configuration files, and data exchange. If you’re a software engineer it’s hard to avoid.

Sometimes that also means you have to cope with broken or unreadable large globs of JSON, as a result I’ve often found myself using JSON linters or prettiers. They’re simple tools but incredibly useful for anyone working with JSON data. This Coding Challenge is to build one.

If You Enjoy Coding Challenges Here Are Four Ways You Can Help Support It

1. Refer a friend or colleague to the newsletter. 🙏

2. Sign up for a paid subscription - think of it as buying me a coffee ☕️, with the bonus that you get access to a monthly AMA and 20% off any of my courses.

3. Buy one of my self-paced courses that walk you through a Coding Challenge.

4. Join one of my live courses where I personally teach you Go by building five of the coding challenges or systems software development by building a Redis clone.

The Challenge - Building a JSON Validator and Formatter

You’re going to build an application that lets users paste in some JSON, check if it’s valid, and format it in a useful way. The tool will parse JSON, validate its structure, and provide useful transformations.

You can build it as a web application, desktop application or following the trend in CLI tools that is seeing a resurgence because of CLI based AI agents, a CLI tool. It’s your project, your choice!

Step Zero

In this introductory step you’re going to set up your development environment and create the basic project structure.

Choose your target platform and programming language.

Step 1

In this step your goal is to build the initial user interface for the JSON tool.

Create a UI with a large text input box where users can paste JSON into. The interface should be clean and responsive. Think about how to display error messages when validation fails - users need to know what went wrong and where.

At the end of this step you should have a UI that the user can enter JSON into, by either typing or pasting the JSON in.

Step 2

In this step your goal is to build the JSON validation and formatting.

Write the code to parse the input string as JSON (if you haven’t before, now might be a good time to do the JSON parser project) and detect whether it is valid. When the user clicks the validate button, your tool should check the JSON syntax. If the JSON is valid, display it in a nicely formatted way with consistent indentation so the structure is easy to read.

If the JSON is invalid, highlight the error with a clear message about what went wrong and where (line number, character position, or a descriptive message). Seeing well-formatted JSON when validation succeeds helps users understand their data structure and spot issues visually.

Test it with valid JSON:, for example

{"name": "John", "job": "software engineer", "country": "United Kingdom"}

When validated, it should display it nicely formatted:

{
  "name": "John",
  "job": "software engineer",
  "country": "United Kingdom"
}

Test with invalid JSON (for example a missing comma):

{"name": "John" "job": "software engineer"}

Verify that the tool shows an appropriate error message rather than formatted output.

Test with invalid JSON (trailing comma):

{"name": "John",  "job": "software engineer",}

Again verify the error is clearly identified. Test that minified valid JSON gets properly formatted when validated.

Step 3

In this step your goal is to implement a sort feature. Write code that takes valid JSON and reorganises it so that keys are sorted alphabetically at each level of the object.

For example, if the input has keys in the order [city, age, name], the sorted output should have them as [age, city, name]. The sorting should apply independently at each nesting level - if you have nested objects, each one gets sorted by its own keys.

Testing: Test with an unsorted object:

{"zebra": 1, "apple": 2, "banana": 3}

The output should be:

{"apple": 2, "banana": 3, "zebra": 1}

Test with nested objects:

{"z": {"b": 1, "a": 2}, "a": {"y": 3, "x": 4}}

The output should sort both the top level and each nested object:

{"a": {"x": 4, "y": 3}, "z": {"a": 2, "b": 1}}

Step 4

In this step your goal is to implement the compress feature.

Write code that removes all non-essential whitespace from the JSON while preserving any whitespace that appears inside string values. This means removing spaces, newlines, and tabs between structural elements like braces, brackets, and commas, but leaving the content of strings unchanged.

Testing: Test with formatted JSON:

{
  "name": "John",
  "message": "Hello World"
}

The compressed output should be:

{"name":"John","message":"Hello World"}

Note that the space in the string “Hello World” is preserved. Don’t forget to test with newlines in strings too.

Ensure that it is possible to return to the prettier version with the validate button.

Step 5

In this step your goal is to implement a JSON to YAML converter.

Write code that takes valid JSON and converts it to YAML format. Your converter should handle objects, arrays, strings, numbers, booleans, and null values, translating the JSON structure into proper YAML syntax.

Testing: Test with a simple object:

{"name": "John", "age": 30}

The output should be:

name: John
age: 30

Test with nested objects and arrays:

{"person": {"name": "John", "hobbies": ["reading", "coding"]}}

The output should be:

person:
  name: John
  hobbies:
    - reading
    - coding

Test with various data types:

{"active": true, "count": 0, "message": null, "score": 9.5}

The output should be:

active: true
count: 0
message: null
score: 9.5

Verify that your converter handles indentation correctly and produces valid YAML.

Going Further

You can take this further by:

• Add copy-to-clipboard functionality so users can quickly copy the result.

• Making the formatting configurable.

• Create a dark mode for the interface.

P.S. If You Enjoy Coding Challenges Here Are Four Ways You Can Help Support It

1. Refer a friend or colleague to the newsletter. 🙏

2. Sign up for a paid subscription - think of it as buying me a coffee ☕️ twice a month, with the bonus that you also get 20% off any of my courses.

3. Buy one of my courses that walk you through a Coding Challenge.

4. Subscribe to the Coding Challenges YouTube channel!

Share Your Solutions!

If you think your solution is an example other developers can learn from please share it, put it on GitHub, GitLab or elsewhere. Then let me know via Bluesky or LinkedIn or just post about it there and tag me. Alternately please add a link to it in the Coding Challenges Shared Solutions Github repo

Request for Feedback

I’m writing these challenges to help you develop your skills as a software engineer based on how I’ve approached my own personal learning and development. What works for me, might not be the best way for you - so if you have suggestions for how I can make these challenges more useful to you and others, please get in touch and let me know. All feedback greatly appreciated.

You can reach me on Bluesky, LinkedIn or through SubStack

Thanks and happy coding!

John