Kyle Wong

As a web developer (sort of, hobbist), using tools that are right for me is crucial to building and scaling modern applications. Over the years, I have had the opportunity to work with various technologies, and I have found a combination of tech stacks that work best for me. In this blog post, I will share the tech stacks that I am currently using to build modern web applications.

IDE

Neovim

Neovim is a modern and highly extensible text editor that provides a streamlined development experience. With Neovim, you can easily navigate and edit code, run commands, and use plugins to enhance your workflow. I have found Neovim to be especially useful for writing and editing code quickly and efficiently, and most importantly, it is fast.

Recently I have stumbled upon LazyVim, and liked it a lot already.

Been trying with Helix but didn't like the motions as much as vim motions.

Web Framework

NextJS

Next.js is a React-based framework that simplifies server-side rendering (SSR) and statically generated (SSG) web applications. It provides an efficient development experience with automatic code splitting, optimized image loading, and built-in support for server-side rendering. What I like most about Next.js is its flexibility, as it can be used with a wide range of technologies, including GraphQL, REST APIs, and serverless functions. Next.js also has excellent documentation and a supportive community, making it easy to learn and use.

Other than Next.js, I am also playing around with Svelte Kit and SolidStart to see which fits the best for me.

This site was built on top of nextjs as well.

ORM

Prisma

Prisma is a database toolkit that simplifies database access and management for modern applications. It provides a type-safe and queryable data access layer, allowing developers to interact with databases using a simple and intuitive API. Prisma supports multiple databases, including PostgreSQL, MySQL, and SQLite. I find Prisma especially useful for its type-safe API, which enables me to catch errors during compile time rather than runtime. Prisma also integrates well with other technologies, including GraphQL and Next.js.

API Layer

tPRC

tRPC is a modern way for building a type safe web APIs. It provides a high-performance, type-safe, and easy-to-use API development experience. tRPC also supports automatic client-side code generation, making it easy to build client applications that can consume tRPC APIs. What I like most about tRPC is its simplicity and ease of use, as it abstracts away a lot of the complexity associated with building APIs. tRPC also has excellent performance and is well documented.

Just writing functions and everything is wired up automatically, how cool is that?

Styling

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that simplifies the creation of custom and responsive user interfaces. It provides a comprehensive set of pre-defined CSS classes that can be used to style HTML elements, reducing the need for custom CSS code. Tailwind CSS also supports customization and configuration, allowing developers to create unique designs and branding. I find Tailwind CSS especially useful for its ability to quickly create custom UI components without needing to write custom CSS code.

Radix UI

Radix UI is a set of pre-built, customizable and accessible UI components that enable you to build beautiful web applications quickly. Radix UI components are built with accessibility and performance in mind, making it easy to build fast and accessible web applications. I have found Radix UI to be especially useful for building complex UI components quickly and easily.

Database

Supabase

Supabase is an open-source alternative to Firebase that provides a suite of tools for building and scaling modern applications. It includes a database, authentication, storage, and hosting services, as well as real-time event streaming and integration with popular tools like Stripe and Auth0. Supabase also supports serverless deployment options and can be used with a wide range of technologies. What I like most about Supabase is its ease of use and its ability to provide a full-stack experience. It simplifies the development process by eliminating the need to set up and manage multiple services.

Majority of my databases are hosted under Supabase, however I think PlanetScale, Neon or Railway Postgres might be good for me as well.

Conclusion

In conclusion, these tools have been an excellent choice for me, and I would recommend them to any developer looking to build modern and efficient web applications. While there are many other technologies available, the tools above has simplified the development process and allowed me to focus on building great applications. As a software developer, finding the right combination of technologies is crucial, and I believe these tech stacks offer a solid foundation for building modern web applications.

Coming next, i will be sharing tools that I am using on my computer.