How I made a Pastebin clone with NO database and NO back-end code

bokub

Boris K

Posted on May 29, 2020

How I made a Pastebin clone with NO database and NO back-end code

Hello everyone !

I'd like to show you the project I've been working on for the last few weeks, which is, as said in the title, a client side paste service, called NoPaste.

What does it mean exactly? Let's take a simple example

When you share a piece of code on Pastebin, your data is saved somewhere in a database, then Pastebin gives you a short link to access this data

NoPaste has a different approach: instead of using a database, your data is compressed then stored into a unique URL that can be shared and decoded later.

As a result, there is no risk of data being lost, censored or deleted. The data is stored entirely in the links and nowhere else!

Here are a few examples so you can see it in action:

This code is the CSS code used on the NoPaste page.
It has more than 3400 characters, but thanks to the compression, the link to access it has a length of 1710 characters.

Want something more impressive?
What about the CSS code of the Bootstrap grid system?
Because there are lots of repetitions, the compression is very efficient: 67959 characters stored in a link that's only 5762 characters (compression ratio about 8%)🤯

But a link length cannot be infinite! What's the limit?

Well, that's true, in some cases your browser won't support a URL which is too long, but that limit is actually quite high:

Browser Max length Notes
Google Chrome (win) 32,779 (mac) 10,000 Will not display, but larger links work
Firefox >64,000
Microsoft IE 11 4,043 Will not show more than 2,083
Microsoft Edge 2,083 Anything over 2083 will fail
Android 8,192
Safari Lots

And here are the link length limits on a few popular apps / sharing methods:

App Max length
Reddit 10,000
Twitter 4,088
Slack 4,000
QR Code 2,610
Bitly 2,048

You can embed NoPaste snippets in (some) websites

Unfortunately, dev.to is not one of them, but if you have a personal website, you can easily embed a NoPaste code snippet using the "Embed" button

The text inside an embed can be highlighted and copied, but not directly edited, unless you click on the "Edit" button. Perfect for tutorials!

Here is a preview made with jsFiddle:

Thanks for reading!

Don't hesitate to star ⭐ my Github repository, and leave comments if you have suggestions or ideas of improvement

GitHub logo bokub / nopaste

📋 Client-side paste service

Thanks again 👍

💖 💪 🙅 🚩
bokub
Boris K

Posted on May 29, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related