🎉 Introducing Only Formats | The quickest way to format code!

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?

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.

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!

Next.js with TypeScript
Chakra UI
Prettier to format code
Monaco editor for code editing
PrismJS for syntax highlight
Simple Icons (for language icons)
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

🎉 Introducing Only Formats | The quickest way to format code!

Comments (3)

More from this blog

🎣 Webhooks Demystified - Get Real-Time Personal Notifications with Discord Webhooks

🛑 Why You Should Avoid the onclick Attribute in Your Code

🎉 Presenting Memoriez - A quick & easy journal

🗃️ How to use Mongoose with Next.js for MongoDB?

🎨 Sort imports using Prettier in a JavaScript Project inside VS Code!

Story

Only Formats - What is it?

Motivation

App tour

Tech Stack

Conclusion

Command Palette

Comments (3)

More from this blog

Story

Only Formats - What is it?

Motivation

App tour

Tech Stack

Conclusion