Our Idea
We all have those times where we want to share some quick snippets of code online; whether we're hit by Discord's 2,000 character limit, or if we want to store and share some useful code snippets we'll come back to later. For tasks like these, most people tend to use an online Pastebin.
Quite honestly, online pastebins right now suck. I haven't come across a properly decent one till date! The most popular tool currently is pastebin.com, and their website is far from something I'd enjoy using. It's absolutely literred with a million advertisements and trackers everywhere. The UI/UX is terrible, and there are millions of accessibility problems.
There's also Hastebin, which has slightly better application interface however it's lack of basic features makes the website feel rather incomplete to me.
Ibrahim and I had discussed this idea before, and we'd been wanting to create a viable alternative for Hastebin/Pastebin for quite a bit of time, and the Supabase hackathon gave us an opportunity to do just that!
How we built it
I decided that I wanted my website to feel fast, as another issue I had with many of these other websites was how slow and unresponsive they were. For this, I decided it'd be best to collaborate with my friend Ibra, as he had worked with Rust previously for building games.
We decided that we'd use a multitude of Supabase features, and we'd deploy our site on Netlify using experimental Rust functions. We wanted the frontend to be in Next.js, simply because it's what I'm most comfortable with, and it has seamless integration with our Rust functions.
It was a bit risky for me at first, as I have my SAT exam coming up at the end of August, but I decided to risk it anyways 😛. This was a hackathon I was really passionate about, and which enabled me to use technologies I would never pass up on using in a heartbeat.
And with that, we got into building our application. We wanted to put our focus on on five main things: speed, accessibility, features, design and UX. We added my React library called kmenu to build a custom cmdk interface on our website for speedy keyboard navigation. We also worked to polish UX in the forms of Spinners and Toasts everywhere across the website.
We used Supabase's Auth features to keep track of users inside of Supabase's database. Along with this, we briefly used Supabase storage to store raw .txt files of each snip, but that feature we still half-completed and we decided not to ship it for the hackathon. Although, we have no plans of abandoning this project! We'll continue with updates and feature additions on our GitHub.
Along with this, we used Supabase's serverless edge functions for highlighting our code. After reading a blog on 'Adventures In Highlighting Code In The Browser', we decided this is a perfect time make use of edge functions to quickly highlight our code on the server nearest to the end user.
In terms of features, we decided that we'd use many of Pastebin's features and add in some of our own. Here's a list:
- Authentication with GitHub and GitLab
- Encrypted snips (with passwords)
- Viewing and filtering snips
- Syntax highlighting for over 150 languages
- Custom slugs
- Editing snips
- Deleting snips
- Custom expiry times
- Creating snips from the terminal
- Command menu for easy access to commands
- Keyboard shortcuts for navigation
You can even easily integrate this project into a Discord bot to automatically create snips from messages! We have a public and well-documented API written in Netlify/AWS Lambda serverless functions using a blazing fast Rust runtime.
We had no shortage of challenges whilst building this product. In fact, due to issues with Rust and Windows, Ibrahim had to re-install his entire operating system in the middle of the hackathon! But in the end, after two all-nighters, a re-install of Windows, and all odds of us finishing this project, we managed to finish this and turn it in before the submission deadline. We hope you'll enjoy it as much as we enjoyed using Supabase :)