Hey, I’m Hassan – Senior DevRel at Vercel. I write about my side projects and things I learn in AI and web development. Hope you enjoy this issue!

This year is off to a roaring start for me. I launched two side projects that got a combined 60k users, started this newsletter and got hundreds of subscribers, made a video that got 50k views, wrote a technical blog post that got thousands of reads, and got featured in news articles.

I’m so thankful for all the support I’ve gotten so far and I’m excited for what’s to come.

In this post, I want to talk about restorephotos.io, the AI side project I built that hit 50k users in less than 10 days. I’ll talk about why and how I I built it, what I learned from building it, and my general process for approaching side projects. I’ll also give you a sneak peek into my next one.

The Idea

I first came up with the idea after seeing a similar paid app that offered image restorations and being intrigued. I did a google search for AI APIs that could do image restoration, and ended up discovering that Replicate had one that I could use. I have a group chat with my family and my parents often send old photos of myself and my brothers in it so I really wanted to build a quick proof of concept and test it out.

I spent half a day spinning up a quick UI and got some pretty impressive results when I tested it on an old picture of my dad doing karate.

After that, I was convinced that people would want to use it for their old family photos. So I got to building.

How I built it

Overall, there are 4 main parts to the project:

The Frontend (Next.js): this included a landing page, upload component, and some image components
The Backend (Next.js): this was a Next.js serverless function
Storage (upload.io): this was where I stored photos after folks uploaded them
AI API (replicate): this is where the image restoration magic happened

An architectural diagram for restorephotos.io

The first thing I needed to do was build an upload component. One good option would have been to just have an <input> that let users upload files and sent them to a storage solution like S3. What I ended up doing is using upload.io, which gave me a react upload component and a storage solution that was automatically connected.

Once I got that working, I created a new file in the api directory of my Next.js project to spin up a new serverless function. In this serverless function, I sent a fetch request to the AI API on Replicate with the image that the user had uploaded on the frontend, and polled Replicate until it returned a response. Once I got that response, I’d return the restored image to the frontend and display it to the user.

All of this, from idea to finished product, took me about a day and a half to build over a weekend. When I finished, I was excited to launch.

If you want to see me go over the architecture in more detail and also go over the code I wrote, watch this 4 minute video I made.

The Launch

When I finish a product, I’ve learned that it’s not good to launch right away. Instead, I’ll tweet a screenshot of it to gauge interest and DM a few friends to try it out to find any bugs or suggest improvements. So I sent out a tweet with a screenshot.

Hassan El Mghari @nutlope

Building an AI web app that helps restore old blurry photos! Dropping tomorrow and as usual, it'll be free and open source.

My AI side project that restores old photos.

Little did I know it would get over 3,000 likes. When this happened, I knew people would be excited, so I spent extra time polishing the UI and landing page, and posted in the internal Slack at my company where I got some great feedback from Guillermo and Malte.

After incorporating this feedback, I launched what would turn out to be my most successful project the next day.

Hassan El Mghari @nutlope

Announcing Face Photo Restorer! Restore any old blurry face photos with AI – 100% free and open source. restorephotos.io

It was a little surreal to see the project do as well as it did. Hundreds of people were sharing it, tagging me and posting their family photos. I saw 10 separate articles (1, 2, 3, 4, 5, 6, 7, 8, 9, & 10) mention it online and folks making TikTok videos and YouTube videos about it. It was crazy.

In 24 hours, it got 15,000 users and unlike other projects I’ve launched in the past, it kept acquiring new users organically. I didn’t do any advertising besides the initial launch tweet and a few follow up tweets. It continued growing, hitting 25k users 2 days in and 50k users 9 days in. It’s still going strong with 3-4k unique users a day.

The stats after 9 days:

139,000 page views and 53,000 unique users
79,000 images restored

The Cost

It turns out having 50,000 people use your website costs money – who knew? Here’s a breakdown of my costs for this project:

~$400/month (Replicate)
$20/month (Vercel)
$35/month (Upload.io)

I got a $240 bill from Replicate, which hosts the AI API that I use, making it my most significant cost. This is because I pay around 1 cent per 3 images restored, which adds up when you have tens of users.

The $400/month I listed is an estimate of how much it will cost this month based on the current usage. I ended up reaching out to Replicate to help cover the cost and they agreed to sponsor the project since I included them in the footer and the README, which was a relief.

The second cost was paying for Vercel to host and deploy my application. I work at Vercel so I didn’t have to pay this but wanted to include it for transparency. My project almost falls into the Vercel free tier but the 80,000 image generations put me about the limit for serverless function execution. The last cost of upload.io is for storage and I’m currently paying this one out of pocket.

I definitely could have charged for this project and made some money, but my primary motivation right now is learning, open sourcing, and trying to inspire others. And in the process, growing my Twitter and newsletter for when I do have paid products in the future.

Lessons Learned

There was definitely some luck involved, but this isn’t an overnight success. I shipped 10 side projects in 2022 and experimented with a lot of ways to launch something. I’ve learned what works and what doesn’t, and what I realized is that simple products win.

If you build simple products that do one thing really well, have a good looking UI, and are free to use or very easy to get started with, it’ll do well in my experience. Especially if these products incorporate new technology like AI.

My next side project is going to be a semantic search tool that enables you to search phrases and questions from your favorite developer YouTubers. This will be more involved from an AI standpoint so I’m excited to roll up my sleeves and dive deep, then release and open source a great project, and teach others how to build similar ones. Stay tuned for it!

I also launched a little side project two days ago that uses GPT-3 to generate twitter bios. It’s been used to generate over 18,000 bios so far – check it out!

Hassan El Mghari @nutlope

Building a Twitter bio generator! Copy your current twitter bio & it will generate a few improved variations using AI. Launching in 2 days and as usual, it'll be free and open source.

A screenshot of my latest AI side project, a twitter bio generator

Strategy for 2023

In 2023, I’m going to be doubling down and almost exclusively shipping AI side projects. It’s such an exciting field, especially as a full-stack developer who doesn’t have a background in machine learning. I just enjoy using the APIs in creative ways and launching new products with them.

The reason this field is so exciting is that the apps you build will just keep getting better as new machine learning models get released. My photo restorer app will be better in a year because someone will probably release a better photo restoration machine learning model that I can use. And I’ll switch to it by changing one line of code. It’s truly amazing to think about.

Every single thing I do for now will be free and open source as I have no intention of making money. I just want to build cool projects that people want to use, teach people how I made them, and hopefully inspire others to do the same.

P.S, I started a YouTube Channel, where I’ll be posting videos where I deep dive into how I built my side projects, post some funny videos , and also show you how to build awesome AI web applications using React and Next.js. Subscribe so you don’t miss the first video that drops in two days!

If you’ve made it all the way here, thank you so much for reading. I appreciate you being a part of my journey and I’m going to leave you with Buildspace’s motto:

Dare to Dream. Dare to Build.

Hassan’s Substack

50k users in 10 days: Building a Viral AI app