Antrol AI makes it possible to generate icons with AI in seconds through a simple UX.

I built it to learn more about the end-to-end process of a SaaS application, from ideation to deployment.

It was built using Next.js, Stripe, the GPT API, S3, self-deployment, and a CDN.

Project Purpose and Goal

The main goal was to learn more about Next.js 14, Server Actions, and how to self-host a Next.js project. I had also never used Stripe or S3 before, so I needed to learn and implement several new tools.

Even though it’s a SaaS project, monetization was not the main goal. I don’t have ads or affiliate links. It was simply an enjoyable project to build and a great opportunity to learn.

I aimed for a minimalist design focused on UX. Since most users struggle to write effective prompts, I created a guided flow to help them achieve better results.

Problems and Thought Process

This project came with several challenges.

Authentication (Next.js):

Handling auth across server and client environments was tricky. I spent time studying real-world implementations, especially open-source projects from experienced Next.js developers.

Self-hosting:

Since I’m hosting through a VPN, I couldn’t rely on some Vercel features. To maintain performance, I implemented a CDN for caching, which keeps the landing page fast.

Performance:

Initial Lighthouse scores were poor. I improved them by converting images to WebP and resizing them to match their rendered size.

Image rendering issue (production):

A major issue appeared after launch: generated images were very slow to load.

To fix it quickly, I used Sharp on the frontend to resize images. It worked, but it’s not ideal since it increases load time.

A better solution would be:

• Generate optimized images on the backend
• Or process them asynchronously and store ready-to-use versions

I haven’t prioritized this yet due to low usage, but it’s a clear next step.

Lessons Learned

This project helped me grow in two main areas: technical execution and product thinking.

On the technical side, I gained hands-on experience with:

• Next.js (App Router, Server Actions)
• Stripe integration
• S3 storage
• Deployment and infrastructure decisions

On the product side, I learned what it means to ship and support a real application.

Even without focusing on monetization, getting users from LinkedIn and Instagram exposed real-world issues. For example, after launch, I discovered the app didn’t work properly on Safari and had to fix bugs in production.

Time was limited since this was a side project, but the outcome was worth it.

More importantly, this project shifted my mindset:

building something real teaches far more than just studying.

Overall, it was a strong step forward in both engineering and product development.