<h1>Introduction</h1>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:<ul><li>Notes (A powerful WYSIWYG rich text editor)</li><li>Whiteboards</li><li>Todolists (for obvious reasons)</li><li>Sticky Notes</li><li>A lightning fast HTML-CSS-JS playground for awesome frontend devs</li><li>And a highly highly powerful and lightning fast Command Palette</li><li>A Pomorodo timer that rewards you with a point every time you complete a session!</li></ul><h2>Some useful links 🔗</h2><ul><li>Homepage / Live website -&gt; <a target="_blank" rel="noopener noreferrer nofollow" href="https://usepaperclip.vercel.app/">https://usepaperclip.vercel.app</a></li><li>Paperclip's GitHub repo -&gt; <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/lalit2005/paperclip/">https://github.com/lalit2005/paperclip</a></li><li>Paperclip's code editor's repo -&gt; <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/Lalit2005/paperclip-code-editor">https://github.com/Lalit2005/paperclip-code-editor</a></li></ul><h2>Tech Stack 📚</h2><ul><li>Next.js - The most amazing React framework on the planet</li><li>Auth0 - For perfect authentication system</li><li>Pagely - Blazing fast not-code website with Notion (for building homepage quickly)</li><li>TailwindCSS - Styling</li><li>Vercel - Hosting</li><li>Prisma - Database ORM</li><li>Supabase (Postgres) - Database</li><li>Tiptap - The headless editor framework for web artisans</li><li>Excalidraw - Powerful whiteboards</li><li>Radix UI - Primitive react component library</li><li>Headless UI - UI component library</li><li>Axios - HTTP requests</li><li>React Hook Form - Form handling</li><li>Zod - Form Validation</li><li>SWR - Remote data fetching</li><li>Typescript - Type checking</li></ul><h2>Features' Overview</h2><ol><li>Powerful Notes ⚡️ (almost like Notion)</li><li>Watch Youtube videos while writing notes</li><li>Add whiteboards inside notes 🤯</li><li>Embed any websites in notes</li><li>An incredibly powerful and turbo fast Command Palette</li><li>Full text search on all documents and on all content(todos, whiteboards, etc..)</li><li>Make notes public and share em' as blazingly fast websites</li><li>Folders for notes/Sort notes based on tags (more on this below)</li><li>Sticky notes</li><li>Powerful Whiteboards for sketching and prototyping</li><li>Folders for whiteboards</li><li>Share whiteboards and edit them in real time (thanks to Excalidraw)</li><li>Todolists</li><li>Lightning fast HTML-CSS-JS playgrounds/code editor</li><li>Share playgrounds / Embed them in documentation sites!!!</li><li>Pomorodo timer that rewards points for completing a session</li></ol><h2>Features of Paperclip</h2><h3>Notes</h3><ul><li>An intuitive and a super powerful editor with almost all features of Notion</li><li>Embed any website</li><li>Play youtube video while writing down notes</li></ul><h2>The process of building Paperclip ⚙️</h2>A brief overview of the process and decisions that I made while building Paperclip.<h3>The beginning 🤔</h3>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.<h3>Authentication</h3>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 <a target="_blank" rel="noopener noreferrer nofollow" href="https://staticshield.vercel.app/">StaticShield</a>, it literally felt like a breeze 🌊. I just had to fetch the API keys, add them to Vercel and <code>.env.local</code>, add a new <code>/pages/api/[...auth.ts]</code> file and run <code>yarn dev</code> to start the server and boom 🤯.<h3>The Note editor</h3>This is the most difficult part of the project. I was just thinking that adding a 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 <a target="_blank" rel="noopener noreferrer nofollow" href="https://tiptap.dev">tiptap</a>. 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 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/Lalit2005/staticshield-examples/tree/master/with-vuejs">this example</a> for <a target="_blank" rel="noopener noreferrer nofollow" href="https://staticshield.vercel.app/">StaticShield</a>. 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). I had to work my fingers to the bone to convert those examples. I finally reached the 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.<h3>Prisma - The best ORM ◮</h3>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 <code>Tab</code> and <code>Enter</code> keys by hitting it multiple times to get my job done. Perfectly. This made the <code>/utils</code> 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 👇<h3>Pagely - Build a super fast website with Notion</h3>I was able to get a pretty descent and minimal website with the help of Notion and <a target="_blank" rel="noopener noreferrer nofollow" href="https://pagely.site">Pagely</a>. I just wrote the content in Notion, shared the Page with web, give the URL to Pagely and boom 💥. The website was ready and I styled the whole website with <a target="_blank" rel="noopener noreferrer nofollow" href="https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en-GB">Stylebot</a>. Hence I made the homepage of Paperclip with no-code in under 30 mins!!<h3>The blog</h3>This might be the most weirdest title you will have ever read. This section gives a overview of how (the process) I wrote this very blog. It was no brainier for me to write the blog with Paperclip itself 🤯. I just wrote the blog in Paperclip, exported it as MD, copied the content, posted in Hashnode and published it 🥱I know that this is a bit of a tedious process, so I'm 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 with Paperclip too!!

From notes, todo lists, sticky notes, whiteboards to HTML-CSS-JS playgorunds, Paperclip is everything you will ever need

How I built Paperclip - Reimagine productivity with Paperclip

From notes, todo lists, sticky notes, whiteboards to HTML-CSS-JS playgorunds, Paperclip is everything you will ever need