Usman Sabuwala
Usman Writes

Usman Writes

๐ŸŽ‰ Introducing Only Formats | The quickest way to format code!

๐ŸŽ‰ Introducing Only Formats | The quickest way to format code!

Usman Sabuwala
ยทFeb 27, 2022ยท

3 min read

Featured on daily.dev

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Table of contents

  • Story
  • Only Formats - What is it?
  • Motivation
  • App tour
  • Tech Stack
  • Conclusion

Hey everybody!

I saw the Netlify x Hashnode Hackathon and I was very very excited to participate this time. It was quite hard to think about an idea but I finally got one!

Story

This time building an app was a weird and funny experience at the same time.

In the beginning, I, Sunrit Jana, and Faheem Khan were about to work on a different idea together, but then because of lack of time management we couldn't do so. And then I came up with this idea and finished it.

I thank them for supporting me with this project too ๐Ÿ™‚.

Only Formats - What is it?

frame_edge_mac_v94_light.png

Only Formats is a web application that helps you quickly format code and copy it easily!!!

It makes things very easy with a very quick and simple user interface with no complications ๐Ÿ’ซ.

The supported languages that Only Formats can format are:

  • JavaScript
  • TypeScript
  • CSS
  • HTML
  • PHP
  • JSON
  • Markdown
  • SQL

Motivation

The real reason and motivation behind building this app were that I saw a lot of people having doubts and when they send the code, it's mostly unformatted, thus making it unreadable.

To understand it, I had to open up VS Code or any other website that takes a lot of my time.

I built this app with a very simple set of tools to format and copy and paste code with syntax highlighting that makes things a lot better!

App tour

The first main page is very self-explanatory, you can select the language you want to format code in or search by clicking on the search icon on the top right.

search.gif

I removed Java temporarily because it throws an unknown error. ISSUE

Once you've selected that, you will be redirected to that page with the tools. There might or might not be settings for a formatter an indentation. You can set that value and it will reflect changes instantly!

Paste the code or simply type it out on the code editor and once you type in the code, it will format it in one go!

paste and copy.gif

It's also a PWA (Progressive Web App) so you can install it and work with it offline too

Also an API to format code is coming soon ๐Ÿ˜‰!

Tech Stack

This is one of my favourite parts of the app! I enjoyed using the following Tech Stack!

  1. Next.js with TypeScript
  2. Chakra UI
  3. Prettier to format code
  4. Monaco editor for code editing
  5. PrismJS for syntax highlight
  6. Simple Icons (for language icons)
  7. Netlify for deployment

Conclusion

I really enjoyed building this project and I encourage all of you to contribute to this project! It will be very nice of you to create issues and/or make pull requests to make it better and better every day ๐Ÿ˜Š.

GitHub Repo

Live Website

Thanks to the folks over at Hashnode and Netlify for this amazing Hackathon! This time I learned a lot of things and most importantly about working with a deadline.

Goodbye everyone

ย 
Share this