superpeers.co — As a full time working developer, I was always feeling left behind when I saw other developers shipping side projects. During the last 10 years of developing iOS apps, not showing the work was devastating. Being the critic of my work, I found flaws on each one. I thought "Maybe, maybe with a side project I could show the kind of work I enjoy doing". I had many ideas. Ideas that were left unfinished, or never got started due to perfectionism.

Then I read Show Your Work by Austin Kleon. It convinced me to show what I've done, what I've been doing. Great book.

Last month, a conversation with a friend from Superpeer struck an idea. They didn't have an explore page. For those who don't know, Superpeer is a platform where people of expertise on any subject can make 1-on-1 calls for a price. Lack of an explore page was on purpose, but I had my idea that could be a side project.

I started sketching, on how profile cards were going to be listed, maybe add categories?, where and how the data will be stored. Goal was to ship in a day or two. I didn't want to pull the data from Superpeer, since that would create data inconsistency. People write same things differently. The list would be curated.
This would enable me to feature some profiles worth mentioning. I needed a way to make people submit their profiles, and I would approve them. Decided to not do categories at first. It was only going to be a logo, a way to submit profiles, and a list.

Technical Details

I first thought to store the data via a Rails app using PostgreSQL, use Activeadmin as CMS and use the API mode of Rails to provide data for a Next.js front-end. Seems complicated but it really isn't. Static generation of the Next.js is a useful feature and I can use any modern JS UI frameworks easily. But building a Rails backend was really an overkill for a one day project. I decided on Airtable instead. A simple spreadsheet where I can upload profile images and fetch them through an API was good enough. It also had a form view where I can create a form to add entries and share the link.

Naming

First I though of superpeerdirectory, superpeerlist and other long names but then found superpeers.co was available and bought the domain.

Design

For the UI, I used Tailwind CSS framework. How you're going to build the product  affects the way you design it. Since Tailwind had a complete UI library, I opened Figma and searched for Tailwind. Found a template that had all the colors, font-sizes and some components.

Tailwind CSS UI Template for Figma

I had my building blocks, so I started creating a simple layout and a profile card. Having a single column layout would make every card get good attention from the viewers and adding a mobile version would be very easy. Every color, text style, shadow and spacing there was named the same way Tailwind named them. That's the power of design systems. Any developer who got this file would not spend extra effort trying to figure out things.

Superpeers First Draft

Development

I created an Airtable, added sample data. Then I created a Next.js project, added my boilerplates, Tailwind CSS and built the profile component, connected to Airtable API, and voila! the listings were there. This entire process took 2 hours to complete. Configuring Tailwind and applying layout divs took around an hour. The initial version didn't have profile images, but the site looked very bland. Then I added images. Next.js 10 introduced a new Image component that fetches and caches images if they are received from known domains.

Release

After the main parts are complete, I searched Twitter for "superpeer.com/" and discovered profiles that were active. Selected 15-20 of them and added one-by-one manually.

I needed data on how many people visited the site and where did they come from.  I wanted to switch to Fathom for some time, so Superpeers became my first site that used Fathom Analytics. It's a privacy-first simple analytics tool.

I deployed the project to Vercel. Then I announced it on Twitter:

In less than 8 hours, only from Twitter, the site got 1.1k visitors:

In the first 4 hours, 40 profiles were submitted.

Vercel has a nice performance analytics tool for Next.js, Nuxt.js and Gatsby projects. The site's peformance was great in the first week, but when more profiles were added, score went from great to poor very quickly. This is something I need to address in the future.

Vercel Analytics Score on 15 March, 2021

Small Iterations

[Feb 15] When you share something on Twitter, expect feedback. Initial form asked all the data and this was overwhelming. So I reduced it to just one field: Profile URL. For every submission, I visit that profile, grab all the data, make sure the language is right, and approve.

[Feb 15] I realized that I didn't give any credits to myself, so I added a footer link to this website.

[Mar 10] Subscriptions were a feature Superpeer had just released, and everybody had subscription enabled by default. This was meaningless to have on profile cards, so I went through all profiles and found the ones that had paid subscriptions, updated their data. You can also create streams and have them on your profile, I added that as a different tag as well.

[Mar 10] Increased the size of the header items.

The website looks like this as of March 12th, 2021:

This has been a great exercise for me to learn new technologies like Tailwind and Airtable. It also let me try Fathom Analytics for the first time. And I have something that I can tweak and iterate on. I'm thinking of adding categories and search next.

After sharing, I found out that there are similar products that were made before mine, check them as well:
- FindPeer: https://findpeer.me
- awesome-superpeer: https://github.com/suadev/awesome-superpeer