Antrol AI
Antrol AI is a fullstack Next.js application that allows users to create icons for their projects. I built this project from scratch to learn more about Next.js, Stripe, CDN, GPT API, and S3. I really enjoyed working on this, because I really tried to implement the robust application for production, with self-hosting and all.
Next.js
Node.js
Typescript
Stripe
S3
OpenAI
Postgres
Prisma
Motion
Tailwind
Sentry
PostHog
i18n
CDN
Project Purpose and Goal
- I created this project with two main objectives. First, to build a complete SaaS application from scratch - going through every stage from development to production deployment. Second, I wanted to learn more about the new Next.js 14 , including server actions and how to do self-hosting with Next.js . I had also never used Stripe and S3 before, so I had to learn a lot of new things and implement them in this project.
- While this is a SaaS project, monetization was not the main goal. I don't even have any ads or affiliate links in this project. It was simply an enjoyable project to build and a great opportunity to learn many new things.
- I tried to create a minimalist design with a focus on UX. Since most users struggle to write good prompts, I created a guided flow to help them achieve better results.
Problems and Thought Process
- I don't even know where to start because I really faced several challenges when starting this project. The first issue I encountered was authentication in Next.js because it involves two environments: server and client. To solve this, I searched all over the internet, focusing on GitHub repositories from people who work with Next.js.
- Self-hosting: I am using a VPN to host everything for my project, and some features of Vercel are not available. To address this, I had to find a solution for good loading speeds. I implemented a CDN to host some cached pages, which keeps my landing page very fast.
- Performance : At first, my landing page looked fine, but when I ran Lighthouse, the results were very poor haha. I started an extensive search to understand how to improve it. I converted all images to WebP to optimize their size and resized them to match the actual rendered dimensions. This improved the performance scores significantly.
- This bug was only discovered in production. The generated images were extremely slow to render on users' screens because I wasn't optimizing the images. To quickly fix this, I used Sharp to resize the images on the frontend. The solution worked, but it's not ideal because it added extra load time on the frontend. For example, if you go to the gallery, you'll notice a long loading time because I'm resizing all images when the user opens the page. I could fix this in several ways, such as generating resized WebP images on the backend or creating a job to run after generation and save on db to show the user the result immediately. Unfortunately, I haven't had time to fix this yet, and since we currently don't have active users, this refactor won't have much of an impact for now.
Let's check this generation!link
Lessons Learned
- This project was really awesome because I learned a lot about all the technologies I wanted to use, and also learned about product development and how to ship a project.
- While I didn't aim to create a lucrative business or run ads, just having users from LinkedIn and Instagram gave me great experience working with a production product. For example, when I first shipped the app, I discovered it wasn't opening properly in Safari and had to quickly fix bugs in production
- Being a side project, my time to work on this and create the best possible experience was limited. However, I'm really happy with the results and everything I learned. This experience contributed significantly to my growth as a developer.