My Tech Stack
Like most developers, I've spent years trying out different tools and technologies to figure out what works best for me. And after some trial and error, I think I've landed on something that allows me to build and ship projects blazingly fast.
In this post, I'll dive into the core components that make up my personal tech stack. From coding editors and frameworks to libraries and deployment platforms, I'll give you a rundown of what each tool does and why I chose it.
Whether you're looking to level up your own dev setup or you're just curious to see how another dev rolls, I hope you find this post useful!
Frontend: Svelte
Perhaps one of the most commonly asked questions I get is what frontend framework I use for my projects. And the answer is always the same: Svelte.
Simply put, Svelte is a frontend framework built on simplicity and performance. It allows you to build user interfaces that are reactively updated without the need for a virtual DOM, the technology that powers other popular frameworks like React and Vue.
Svelte instead relies on a compiler that takes the code your write in .svelte files and turns it into highly optimized vanilla JavaScript code that's responsible for updating the DOM when a state change occurs. The result is faster load times, smaller bundle sizes, and a really smooth experience for the end user.
And the best part? The syntax is super easy to pick up, especially if you're already familiar with vanilla JavaScript.
So if you're looking to build fast, lightweight, and highly performant web applications, I'd highly recommend giving Svelte a try. Take it from someone that left this comment after seeing one of my Svelte projects!
Backend: SvelteKit
It's probably no surprise that SvelteKit is the fullstack framework I use to build all of my projects.
SvelteKit is a framework that's built on top of Svelte that comes with a ton of features out of the box, including server-side rendering, file-based routing, and a built-in adapter system that makes it easy to deploy your projects to platforms like Vercel, Cloudflare, and DigitalOcean.
While I've seen Svelte paired with other backend technologies and a wide variety of programming languages, like Python and Elixir, I've found that writing both your frontend and backend code in JavaScript allows you to move faster without having to context switch between different languages and ecosystems.
Design: Figma
It's safe to say that my design skills have improved a lot over the years as I've become increasingly committed to creating web experiences that not only functional, but also beautiful.
Now, before I jump into coding, I usually create a rough mockup of the project I'm about to build. I've come to believe that designing prototypes for user interfaces is a skill directly impacts the quality of the final product.
And my tool of choice for such prototyping is Figma.
It's almost a no-brainer at this point; Figma is a powerful web-based design tool that's free for individual use! These days, I've begun to use Figma to design UI components for all of my projects!
I even finalized the design for my personal website (yes, the one you're reading this blog post on!) in Figma after having originally sketched the layout for the site while on a flight last year:
Styling: TailwindCSS + DaisyUI
For styling, I always use TailwindCSS.
I've realized Tailwind's class-based styling approach is miles better than writing vanilla CSS. Reading and modifying your styles directly in your markup allows for a much faster developer experience. It's also great to have responsive utilities built into the framework so you can make your site look great on a device of any size.
Sometimes, for larger projects, I'll add DaisyUI to my stack. It's a library of pre-made components for TailwindCSS that you can pick and choose from to build out your UI. It's a great way to speed up the development process since it often reduces the amount of CSS I need to write from scratch.
The result is a visually appealing and highly responsive UI:
Database: Supabase
When it comes to databases, Supabase has become my go-to. It's an open-source Firebase alternative that provides all the backend services I need: a PostgreSQL database, authentication, real-time functionality, and storage.
The ease of setup and integration with the rest of my stack, coupled with its generous free tier, makes Supabase an invaluable tool in any project I work on.
Deployment: Vercel / DigitalOcean
For deployment, I rely on both Vercel and DigitalOcean, depending on the project's needs.
Vercel is perfect for quickly deploying and hosting my SvelteKit projects (including this website!), as they too have a great free plan and support seamless Git integrations for auto-deploys.
DigitalOcean, on the other hand, is my choice for more complex applications that aren't necessarily conducive to the serverless architecture that Vercel provides. JustBuzz.In, for instance, requires an always-online websocket server to function, a use-case for which Vercel's serverless functions aren't well-suited.
DigitalOcean's $6/month droplets, on the other hand, are perfect for this kind of project.
Code Editor: VSCode
This one should come of little surprise to most developers. VSCode is one of the most popular code editors in the world, and for good reason.
I prefer it over its counterparts for three main reasons: (1) the vast library of extensions, (2) the built-in Git integration, and (3) the ability to customize the look and feel of your editor to your heart's content.
While some say that it can get a bit sluggish when compared to command-line text editors like Vim or Emacs, I've personally never had any problems with it on my ARM-based MacBook. And hey, you can even use the Vim keybindings extension if that's your thing 🙃
Terminal: iTerm2
Lastly, iTerm2 is the terminal I use on my Mac.
I use Zsh as my shell along with the Starship prompt, and I think that it makes for a great experience!
Oh, and I'm the biggest fan of Iosevka, a beautiful monospace font that I use in both my terminal and my code editor.
So there you have it, a peek into the toolbox that keeps my digital creations humming. I hope there's a nugget or two in this list that you found useful—after all, it's all about mixing, matching, and making something awesome.
Happy coding!
If you liked this post, feel free to check out some of the projects I've built with this tech stack here. You can also check out my previous blog post, which covers how I sold my first startup last year!