Aug 31, 2021

How I built Paperclip - The ultimate productivity tool you will ever need.

Hello everyone 👋🏻, I am really excited to share my journey building Paperclip.

Paperclip is the ultimate productivity tool you will ever need. Paperclip has all the things you will want to be productivity. Here are the tools that makes Paperclip:

Intro video

Paperclip demo

Tech Stack 📚

Features’ Overview

  1. Powerful Notes ⚡️(almost like Notion)
  2. Watch Youtube videos while writing notes
  3. Add whiteboards inside notes 🤯
  4. Embed any websites in notes
  5. An incredibly powerful and turbo fast Command Palette
  6. Full text search on all documents and on all content(todos, whiteboards, etc..)
  7. Make notes public and share em’ as blazingly fast websites
  8. Folders for notes/Sort notes based on tags (more on this below)
  9. Sticky notes
  10. Powerful Whiteboards for sketching and prototyping
  11. Folders for whiteboards
  12. Share whiteboards and edit them in real time (thanks to Excalidraw)
  13. Todolists
  14. Lightning fast HTML-CSS-JS playgrounds/code editor
  15. Share playgrounds / Embed them in documentation sites!!!
  16. Pomorodo timer that rewards points for completing a session

All the features of Paperclip




A huge thanks to Excalidraw. This would not have been possible without it 🙏

Command Palette

This is my most favourite part of Paperclip


And a lot more… Mentioning everything does not seem possible, the blog’s getting too big. To experience every feature, just go ahead and create an account here

The process of building Paperclip ⚙️

A brief overview of the process and decisions that I made while building Paperclip. Most of the technologies in this tech stack are similar to the ones with Pagely (my previous project). You can read about it here

The beginning 🤔

Hello everyone (again) 👋🏻, this is one of the oldest ideas that I ever had. I had this idea from a long time, a very long time - even before when I started with coding. I had used Todoist, Trello and Notion before. But I often found myself switching between apps and I also wanted the whole process to be smoother. By saying smoother, I wanted to navigate faster with keyboard. Only with keyboard. This is where the idea of Paperclip arose.


Building authentication has never been this easier before Auth0. Auth0 is the best thing that has happened in the sphere of authentication that requires care and a high level of security. The first thing I did in building Paperclip authentication! This was because I already knew that this would take no more than 5mins from creating a next app to finish authentication. Since I already used Auth0 for building StaticShield, it literally felt like a breeze 🌊. I just had to fetch the API keys, add them to Vercel and .env.local, add a new /pages/api/[...auth.ts] file and run yarn dev to start the server and boom 🤯.

The Note editor

This was the most difficult part of the project. I was thinking that adding just a simple rich text editor in an app is just a cake walk. But once I knew the level of difficulty of implementing this, I was almost giving up “notes” in Paperclip. That’s exactly when I came across tiptap. But the main problem was - although tiptap had a react library, it was mainly built to work with Vue 😔. I had no prior experience with Vue while building this example for StaticShield. But I always felt that Vue was not my cup of tea. But when I saw the features of tiptap, they attracted me. So I mustered up the courage and took that plunge. It was then I found out that Tiptap almost had all the core setup. So I could build all what I want(extensions) upon Tiptap.

I first went with all the extensions from their docs, repo and examples. But some of the examples where from a different world (Vue) that I never wanted to enter into (atleast for now). So I just went with experimenting different(trial and error) solutions. I had to work my fingers to the bone to convert those examples.

After the editor became usable, I worked on having a emoji per note. I first went with emoji-mart but they took too long (~5sec) to load after each click. So I rolled up my sleeves to build my own Emoji picker. I first tried fetch the GitHub emoji API and render all the emojis. But this resulted in too many requests for PNG images. So I finally went with rendering all emojis with the help of this library.

I finally reached a point where I had implemented almost all the main features of Notion. But that was also when I discerned that only 10-15 days where left!!! So that’s when I rolled up my sleeves to build other core features of Paperclip. The thing that made me fast was Prisma, which leads to the next section.

Prisma - The best ORM

Prisma increased my speed exponentially. All my Next.js API routes had to deal with creating, reading, updating, and deleting records in the Postgres database on Supabase. With the help of GitHub Copilot and the incredible Typescript support from Prisma, I only had to break the Tab and Enter keys by hitting it multiple times to get my job done. Perfectly. This made the /utils almost empty which had to deal with communicating with external services and queries. Since I followed an API-first approach. I was able finish all the APIs in a matter of hours. But the main challenge was with the frontend.

After finishing the core features, I realized that I completely forgot the homepage. But I was able to get it perfectly done in about half an hour 👇

Pagely - Build a super fast website with Notion

I was able to get a pretty descent, SEO friendly and minimal website with the help of Notion and Pagely. I just wrote the content in Notion, shared the Page with web, gave the URL to Pagely and boom 💥. The website was ready and I styled the whole website this awesome Stylebot chrome extension . Hence I made the homepage of Paperclip with no-code in under 30 mins!! I then thought rewrite this route to homepage, but this did not seem to work. So I just put it in an iframe temporarily which looked good too!!

The whiteboard

Excalidraw has a NPM package(react component) that lets us embed a whiteboard in our app! It’s natural for any person to use this. I too did that. But I had to struggle to get it working with Next.js. When everything worked fine, the most important thing started breaking/crashing - saving data to DB. I tried my best to solve it, but it seemed impossible.

The blog

This might be the most weirdest title you will have ever read. This section gives a overview of how I wrote this very blog (the process). It was no brainier for me to write the blog with Paperclip itself 🤯. I just wrote the blog in Paperclip, exported it in markdown format, copied the content, posted in Hashnode and published it 💦

Here’s the public Paperclip on this very blog →

I know that this is a bit of a tedious process, so I just started building an API to fetch the content just like Notion API but a much simpler one that sends you the basic HTML and you can style it the way you want. You can build a CMS on top of Paperclip too!!

And as I was writing the blog in Paperclip, I caught some nasty bugs which I was able to solve successfully. I had almost the similar experience with Notion except for the / command. So I’ll be removing the toolbar soon and adding the “popup on /” feature. Thanks to this awesome blog. And I wrote this blog while watching this cool video from Fireship

Writing blog


Since I am planning to use Paperclip as my only productivity app, I am sure many more features will be added. Here are some of the things that I have planned to accomplish for Paperclip

You can always view the updated roadmap here