How I Built My AI SaaS in Just 2 Days

In my last blog post, I explained why I think that now is a good time to build an AI-powered side project. Following my own advice, I started working on a new project myself. It's an AI-powered journaling app with smart features. You can try it out for free at https://smartdiary.co.

I recently released a YouTube video where I talk about this project and how I made it. In this blog post, I want to go into a bit more detail about the tech stack and tools involved.

Table of Contents

• The tech stack
• OpenAI API
• Subscription payments
• Logo and domain
• New course

The tech stack

I built and deployed the first version of my Smart Diary in just 2 days, and by then it already included several cool AI features.

I built the whole application using Next.js. The new Next.js app router together with server actions and server components allows me to build the project super fast because I don't have to set up server endpoints and can just write my backend logic directly in my React components.

Together with Next-auth for authentication and Prisma for database access, I can do everything I need directly in my Next.js code.

Here's an example of what such a server action looks like:

As of writing this post, server actions are still in alpha and I'm not sure yet about all the conventions (for example, when it comes to error handling). But they are working perfectly fine for me.

If you want to learn how to use Next.js 13 server components, server actions, and other features like authentication, you can watch my Next.js 13 e-commerce tutorial on YouTube. The tech stack there is pretty much identical.

For smaller indie projects, like my diary app, having all my database calls so close to my components makes it faster and easier to add features quickly. In large projects, having a separate backend (like an Express server) might still be a better solution tho. This would also be required if you need an API, for example, to connect a native mobile app.

To everyone who bought my Next.js + Express.js course: I'm currently working on a new part where we convert the whole project we built there to the new Next.js 13 app router. I think this makes the course even more valuable because you learn how to use both the "old" pages directory and the app router. Many developers and companies still prefer the battle-tested pages directory, so it's good to know how to use both. The update is of course free if you already bought the course.

OpenAI API

For the actual AI features in my Smart Diary app, I use OpenAI's GPT API. This gives you access to the same language model used on the ChatGPT website. This API used to be quite expensive back when I first talked about it on Youtube, but the prices for the newer ChatGPT models decreased drastically. Now you can generate a thousand words for a fraction of a cent:

(1k tokens are around 750 words)

OpenAI has an SDK you can use to easily send your prompts to their API. You just have to sign up for an API key first. To generate the text, you give the AI human-readable instructions:

Then you just call this from your server action and display the result in the UI!

I haven't done it yet, but I'm also planning to implement Vercel's new AI SDK. This is just a wrapper around the OpenAI API (or any other AI API) that allows you to stream the AI response word for word rather than having to wait for the full thing to be generated. This way, you can create an experience like ChatGPT where the text flows onto the screen:

This doesn't only look cool, it also decreases the time the user has to wait before they see something on the screen.

Subscription payments

I'm planning to add paid Premium subscriptions to my Smart Diary. For the payment provider, I'm planning to use either Lemonsqueezy or Paddle. Why not Stripe? Well, if you use Stripe you have to handle payment tax and EU VAT which can be quite difficult. Both Lemonsqueezy and Paddle handle this for you by acting as a so-called "merchant of record". The fees are a bit higher, but it saves you a lot of work and potential headaches.

Logo and domain

I used the free Microsoft Designer tool to generate a logo for Smart Diary in a matter of seconds:

The logo is not perfect, but I think it's pretty decent for virtually zero effort!

I bought the domain, smartdiary.co, at Namecheap for $2 for a whole year. I would love to have the .com domain, but that one costs $2.5k. If the project makes money, I'll buy that domain too.

New course

I'm also planning to create a brand new course where we build a Saas project with Next.js 13, OpenAI, a payment processor, and more. Sign up for my email newsletter to get notified when I have more info! I send regular web development tips as well as my latest blog posts to this newsletter, so it's well worth signing up!

And again, I invite you to try out my Smart Diary for free at https://smartdiary.co!

See you soon!

Happy coding and take care!

Florian