Otter

An introduction to my side-project

· Reading time: 3 minutes · 729 words

For the past year, I’ve been building an app in my own time; the sort of app that I used to use 3 other apps to achieve the same thing. It has bookmarking, notes & some other useful features - not particularly "exciting", but extremely useful, at least to me.

I also made it to scratch an itch I've had for a long time - to create something useful that I would use daily. I always intended to document my progress, a la #buildinpublic, but never got around to it.

Now is as good a time as any to start I guess, so here goes… by the way, the app is called Otter 🦦.

The name was chosen when I asked my wife which animal emoji she liked best. I think Otter's are pretty cool too..

Progress has been slow because I typically work on it late at night or first thing in the morning before my family wakes up.. 🥱 which has meant I've fallen asleep while coding numerous times!

Otter is built with React + next.js, a pair that I’ve had a lot of experience with over the years; TypeScript; @supabase for authentication and database; and it’s hosted on @vercel.

React Query is used for all data fetching; @stitchesjs and @radix_ui are used for styling and components.

Bookmarking was the first big feature, it was pretty easy, surprisingly nuanced, but there's so much more to be added. In the meantime, @IFTTT is used to integrate with a bunch of services that I use and automatically add items to Otter.

I want Otter be the home for all my online activity, with feeds of my "actions" across the web (Twitter likes, GitHub stars & many more) and where I eventually consume undiscovered content from too.

Each instance of Otter is self-hosted & will likely only have one user per instance, so is private & secure by design. I've purposely reduced the number of 3rd party services so setup is fairly straightforward if/when it is ready for others to use.

Although I create apps using these technologies by day, it has been quite a learning curve. I hadn’t used @supabase before, and I certainly hadn’t fooled around with Postgres databases either - there’s a lot I still need to learn there!

Many things have changed throughout development - it started out using Sveltekit. The @supabase integration, in particular auth, has been iterated on a lot. Initially I created my own implementation but an official next.js integration was released which standardised everything. 👌

Ultimately it has to be super simple to save & search things in to Otter, so it is an API-first app. I’ve made bookmarklets, Apple Shortcuts, a Chrome extension, a @raycastapp extension & @scriptableapp widgets to make it easy to add, search & display items depending on my device.

I like being in control of my app's data; having the API there to use however I see fit has been incredibly empowering.

There are no plans for a native mobile app because I believe that the web is perfect for this kind of app. One of my favourite services, @mailbrew also happens to be "non-native" and it has really made me appreciate the power of the web even more.

In the making of Otter, there have been so many small hurdles and challenges, things that I got stuck on for one reason or another. For example: scraping, or fetching info/metadata on a link has been tricky. Not all pages want to be scraped, so workarounds were needed.

For an important, but "hidden" feature like this, it has gone through quite a few iterations to where it is today and I spent a sizeable amount of time working on this aspect of the backend. There are a bunch of other aspects that I'll dive into someday. #todo

I used Open AI's Dall•E to help create a logo for Otter. Emojis are cool, but AI generated (or inspired) logos are even better.. This one is supposed to be the letter O like an otter's face.. not sure why it looks like a Q, but it's a pretty good starting point I think.

Making Otter has been a labour of love, but it has definitely made me a better developer. I can bring learnings and experience from this into the work I do for my clients. I'm excited to see where this takes me.


This was originally posted as a Twitter thread

Zander Martineau
@MrMartineau
🏌️‍♂️ • 🚵‍♂️ • 🍖🔥 • 🥁
mister martin-oh