🎉 Introducing Only Formats | The quickest way to format code!
Tags: nextjs, netlify, javascript, react
Published: 2022-03-01 07:47:57

![](https://cdn.dribbble.com/users/720738/screenshots/3848385/media/3fb3a31b0a1fd949593feab51cf712a0.gif)

Hey everybody!

I saw the **[Netlify x Hashnode](https://townhall.hashnode.com/netlify-hackathon)** 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](https://twitter.com/JanaSunrise), and @faheem_khan_dev 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1645956633202/7ott9BUI0.png)

**[Only Formats](http://onlyformats.netlify.app/)** 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.

![](https://media3.giphy.com/media/3o7btPCcdNniyf0ArS/200.gif)

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1645964144136/yDTd_5D9s.gif)

> I removed Java temporarily because it throws an unknown error. [ISSUE](https://github.com/max-programming/only-formats/issues/2)

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1645964675521/UR1dusg0c.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](https://github.com/max-programming/only-formats)

[Live Website](https://onlyformats.netlify.app)

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

![](https://media3.giphy.com/media/VgC5dVK3KzQCm1TdPI/200w.gif?cid=82a1493b1y9z1fvlf8tdqyl7h4d4sgp8g8kkej34gl0m9b5s&rid=200w.gif&ct=g)