In this article, I will share my thought process and decisions when building my current personal project : AestheticHR. It is an employee management app with minimalist feel and intuitive UX. This project meant to be a pilot or MVP.

This project combined minimalist, aesthetic looking web app and performant backend, while also maintains good developer experience and development speed, both in frontend and backend.

The Stack

Frontend and Authentication

I used Next.js for this project's frontend, because :

• Library support : Vast library ecosystem, and also Clerk, user authentication that I also use in this project is fully supported.

• Good performance : Although not the best in terms of performance and bundle size, Next.js is still good enough for this use case (employee management software), which the users are expected to have decent company PC and good internet speed to download Next's JS bundles in short amount of time.

This project used shadcn-ui and Tailwind for component and styling, because :

• shadcn is not a component library, but a collection of re-usable components that you can copy and paste into your apps. Because of this, shadcn is highly customizable but still give an awesome boilerplate to start the project

• Tailwind is used in shadcn-ui by default, but Tailwind is great by itself for its flexibility and simple to use and memorize syntax.

For authentication and user management, I used Clerk for this project. It is battery-included oauth and user management service which make developer's life easier in building MVP apps. It is also free up to 10,000 MAU, which is awesome ! You have to check Clerk or Kinde which is similar service. Other good and open-source choice is Auth.js but it is more time-consuming to use but also forever free.

Backend Server

For backend, I use Go, Gin and sqlc (which I covered in my other blog post), for these reasons :

• Golang is fast for web server, faster than Node.js and has small size because it can be deployed as binary using Docker multi-stage build

• Gin is a popular, stable and fast web framework. It has simple syntax and battle-tested for many cases.

• sqlc gives the best of many worlds for database concerns. It has great performance because it will generate lower level Go's database/sql code. With so many ORM in today's world, sqlc only needs us to write plain SQL, which is great because no need to learn new one-project-use syntax. sqlc will also throw error in compile time when we write wrong SQL syntax or table name

Deployment

For deployment, I used AWS EKS and ECR to deploy both frontend and backend Docker containers. But as I realize moments later EKS doesn't have free tier, costing around $0.10 per hour per cluster. I run it for a day and surprised when I see my billing. After this realization, I pivoted to Vercel for frontend and Docker with Fly for backend.

• Both are easy-to-deploy and have generous free tiers. As I mentioned, this project is MVP, not fully production use, because if the scale got bigger the cost of these two deployment tools will be very high (Vercel is known for its expensive cost) and it needs to be moved to AWS or GCP (that is cheaper), which I already write the AWS pipeline if needed.

Database

For DB, since I used SQL, I used AWS RDS in the beginning, but also realized that it is not free even for personal projects. Then I moved to Neon DB, a managed Postgres service, which has generous free-tier and very easy to use. Similar service is Planetscale which is a managed MySQL service.

Conclusion

Concluding the 'Aesthetic HR' journey, it's been a ride through tech choices. We opted for Next.js on the frontend, implemented Clerk for user management, and styled it with shadcn-ui and Tailwind.

On the backend, speed mattered, so we went with Go, the simplicity of Gin, and straightforward SQL using sqlc. Deployment had its twists - starting with AWS EKS, realizing the costs, and switching to Vercel and Fly for a budget-friendly setup.

In the database realm, we shifted from AWS RDS to Neon DB, appreciating the value of free tiers. 'Aesthetic HR' is more than code; it's a mix of user-friendly design, speedy development, and a watchful eye on expenses.

As we sum it up, remember: each line of code is a decision. 'Aesthetic HR' is a journey in finding that sweet spot between tech savvy and real-world practicality.

That's it for this article. Hope it benefits you. Please leave a comment if you have any question or feedback. Thanks for reading !