Personal Website
When I set out to build my personal website, I wanted more than just a static portfolio. I wanted a modern, performant, and scalable solution that reflects best practices in web development. After evaluating several options, I settled on Next.js, Tailwind CSS, PostgreSQL, Prisma, Better Auth, Vitest, Playwright, and Vercel.
This stack gives me:
- Performance (Next.js + Vercel)
- Beautiful UI (Tailwind CSS)
- Reliable data layer (PostgreSQL + Prisma)
- Secure authentication (Better Auth)
- Testing (Vitest + Playwright)
Next.js: The Backbone of Modern React Apps
Next.js was an easy choice because it combines the flexibility of React with powerful features like:
- Server-Side Rendering (SSR) and Static Site Generation (SSG) for better SEO and performance.
- API Routes for building backend logic without spinning up a separate server.
- File-based routing that keeps things simple and organized.
This framework gave me the perfect balance between a static site and a dynamic application.
Tailwind CSS: Utility-First Styling
I wanted a design system that was:
- Fast to implement without writing tons of custom CSS.
- Responsive by default, with a mobile-first approach.
- Highly customizable for branding.
Tailwind CSS checked all these boxes. Its utility-first approach allowed me to iterate quickly and maintain a consistent design without sacrificing flexibility.
PostgreSQL: A Reliable, Scalable Database
For data persistence, I chose PostgreSQL because:
- It's battle-tested and widely used in production environments.
- Supports complex queries and relationships.
- Offers strong consistency and reliability, which is crucial for any app that stores user data.
Prisma: Type-Safe Database Access
Working with raw SQL can be error-prone, so I opted for Prisma as my ORM because:
- It provides type safety and autocompletion in TypeScript.
- Schema-driven development makes database migrations easy.
- It integrates seamlessly with PostgreSQL and Next.js.
Better Auth: Simple, Secure Authentication
Authentication is often a pain point, but Better Auth (formerly Auth.js) made it straightforward:
- Built-in support for OAuth providers like Google and GitHub.
- Session management without reinventing the wheel.
- Tight integration with Next.js, reducing boilerplate.
Vercel: Effortless Deployment
I deployed on Vercel because:
- It's optimized for Next.js, offering zero-config deployments.
- Global CDN ensures fast load times everywhere.
- Built-in preview deployments make collaboration and testing easy.
Testing: Confidence at Every Level
To keep the site reliable and regression-free as it evolves, I chose a fast, modern testing combo:
Vitest
- Lightning-fast unit & integration tests
- Runs natively with Vite for near-instant feedback
- Full TypeScript support and great DX in a Next.js project
Playwright
- Robust end-to-end browser testing
- Simulates real user interactions across Chromium, Firefox, and WebKit
- Catches issues in navigation, forms, rendering, and full user flows
- Reliable CI integration and auto-waiting for stability