🚀 How I built AI pictures generator in a GitHub logo style 😻 and got featured in GitHub's Twitter and Instagram 🤯

Igor Kotua — Wed, 01 Nov 2023 16:50:41 +0000

Hi there 👋

My name is Igor and I really like building cool apps 🤗

A month ago I saw a very interesting project by Steven Tey - Spirals. It is an app that allows to generate AI pictures with spirals "hidden" in them.

I really liked the idea and went on to build OctoArt - generator of AI pictures in a GitHub logo style.

The project turned out to be quite successful - more than 4.5k pictures have been generated since then and more importantly GitHub posted about the project in their official Twitter and Instagram accounts (yes they have Insta account lol).

// Detect dark theme var iframe = document.getElementById('tweet-1708136705843249510-338'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1708136705843249510&theme=dark" }

How I build OctoArt

As I said earlier, idea of this app came to me after I saw Spirals app. So I just went on and forked it 🙈

It's beauty of open-source, you can just take someones code and they are gonna be fine with it!

I just changed some colors and styles, added my Replicate API key, swapped spiral image with a GitHub logo, changed website logo (my wife created it in ProCreate) and went live with a tweet. Simple as that.

// Detect dark theme var iframe = document.getElementById('tweet-1707071883202404780-488'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1707071883202404780&theme=dark" }

How it works

From the tech side of things, the app is pretty simple. It is built with Next.js app router, Replicate, Vercel KV (Redis) and Blob (S3).

The generation process works like this:

User types a prompt
We generate unique id using nanoid
Prompt together with GitHub logo is sent to Replicate API
Once generation is completed (~10 seconds), Replicate sends a webhook back to us together with id
In a webhook route we save the image to Vercel Blob and then save the image url into Vercel KV
Finally, we show a generated picture to users

You can see all the code on GitHub.

LogoPicture AI

Capitalizing on this success, recently I decided to build and app that allows to generate AI pictures with any logo. It's very early, but I already managed to generate $100 in revenue from a single Hacker News post 🤯

Check out LogoPicture AI

In the next article I am going to tell about how I built LogoPicture AI with Next.js, Replicate, Supabase and LemonSqueezy. Don't miss it 😉

All the best,
Igor

🚀 5 open-source copy and paste Tailwind CSS 💨component libraries YOU HAVE to try in 2023 🔥

Igor Kotua — Mon, 04 Sep 2023 12:04:13 +0000

I love Tailwind CSS. For me it's impossible to develop UIs using something different. It just doesn't work.

The best part of Tailwind CSS is that it allows to collocate JS, HTML and CSS in one file. And this unique feature makes sharing Tailwind components a breeze.

I have collected a list of 5 libraries with beautifully crafted Tailwind CSS components which you can copy-paste right into your code, for free ✨

Check them out ⬇️

1. DaisyUI

53 components for actions, data display, data input, layout, navigation and even mockups 😮
Easily customizable components and style system
Custom themes and theme generator

Find components here:
https://daisyui.com/

2. Flowbite

330 free and premium components for tables, footers, CTAs, pricing, FAQ and more
Standalone libs for React, Vue and other frameworks which help to implement interactivity 🎭
460+ SVG and JSX icons

Find components here:
https://flowbite.com/

3. HyperUI

Components for Application UI, Marketing websites and eCommerce
Out-of-the-box responsiveness, dark mode and support for Alpine.js 🏔️

Find components here:
https://www.hyperui.dev/

4. shadcn/ui

My favorite one 🤗

40+ accessible and pixel-perfect components for React, Next.js and Remix
Easily customizable themes and styles
Handy CLI 🤌, out-of-the-box dark mode and more

Find components here:
https://ui.shadcn.com/

5. Tailwind Elements

500+ Material UI style components build with Tailwind CSS 😮
Compatible with any framework + standalone React lib
Fully open-source, support for themes and dark mode

Find components here:
https://tailwind-elements.com/

That's a wrap!

If you like content like this, checkout my weekly newsletter where I share learnings building open-source products and trying to make money with them 🤑

💌 Subscribe

Cheers 🥂
Igor

Forem: Igor Kotua