Imagin

6 minute read

Imagin is a public-facing SaaS product that has been officially launched on Product Hunt Platform. It is an Ai-powered icon/logo generation design tool targeting small-medium companies and individuals, which allows rapid design and generation with high customisability.

Each new user will automatically grant 5 free credits, 1 credit is spent for each generation. User will be able to revisit their previously generated icons and logos anytime by visting their profile page.

Imagin is now ranking at #28 on weekly launch board, and has 70+ upvotes on Product Hunt.

Type: Icon generation, Ai design tool

System Architecture Img

System Architecture

Next.js Tailwind TypeScript

Frontend was developed with Next.js - SeverSideRendering (SSR) framework (Version 12.x - page routing), and integrated Tailwind CSS which enable enahanced performance by delivering pre-rendered content to users, and enable high productivity on producing maintainable, adaptive, and mobile-friendly UI layout.

Pre-rendering allows search engine to easily crawl and index the complete HTML file, which helps with SEO optimisations.

As for Authentication, NextAuth, extended with Google, Discord and AWS SES Email Auth, has been integrated to the Application allowing immediately usage of our service.


tRPC

tRPC was utilised to handle backend workload considering it's a thin backend application, it integrates seamlessly with Next.js.

tRPC is a TypeScript-based framework for building strongly typed APIs in web applications. It is designed to simplify the process of defining, consuming, and interacting with APIs while leveraging TypeScript's static type checking capabilities.


The use of strongly typed APIs and auto-generated code leads to an improved developer experience. You can catch errors at compile time and benefit from TypeScript's IntelliSense for API usage, resulting significant productivity boost, especially for solo-developer or small dev team.


PostgreSQL & S3

Used prompts for icon generations will be stored in a production PostgreSQL Database hosting on Supabase while AWS S3 is used to host and serve the static assets.

S3, which has no minimum charge, and claimed to have unlimited storage was deemed to be the perfect fit for storing generated images.

System Architecture Img

Deployment

System Architecture Img

The SaaS product adopted serverless solution, allowing small-scale business to focus on development rather than spending large amount of resources on deployment configurations.

For pricing, AWS Lambda does offer a free tier including 1 million requests per month and 400,000 GB-seconds of compute time per month.

In summary, AWS Amplify empowers developers to focus on creating engaging user experiences while leveraging powerful cloud capabilities.