My Favourite Software Tools for Building Stuff

Below is a curated list of software tools that help me build my projects. I occasionally recommend these to my friends and decided to make a list of them.

Stack

• Next.js: It's the first framework I learned to use and I've never had to switch. I like the simplicity of the file based routing system and there's plenty of great documentation.
• Tailwind CSS: A utility-first CSS framework that helps me style websites quickly. It eliminates the need to maintain separate CSS files and the headache of naming classes consistently.
• Supabase: It's a wrapper around Postgres that provides all the backend services I need.

Editor

• Visual Studio Code: A simple code editor that has many extensions and nice themes. Although it freezes sometimes, I still use it over other editors.
• Tailwind CSS IntelliSense: IntelliSense for Tailwind CSS. It gives me auto-completion and hover previews of the CSS used in the tailwind classes.
• GitHub Copilot: This is a must have for me. The code completion and generation features speed up development significantly. Funny anecdote: my video on Copilot is among the most viewed on that topic.
• VS Code Speech: It enables you to talk with the editor and GitHub Copilot. Only recently started using this but I like the idea of being able to code without typing.
• Prettier: I format my code using prettier. The extension itself isn't great but there are three plugins that really help:
  • prettier-plugin-tailwindcss: Sorts classes based on recommended order.
  • prettier-plugin-classnames: Wraps verbose class names - especially useful with Tailwind CSS.
  • prettier-plugin-merge: Plugin that sequentially applies the formatting rules of multiple plugins.

Design

• Lucide: It's an icon library that you can import into your react applications. It saves lot of time because I don't have to scour the web for icons. They have a consistent and minimal style which is also nice.
• Flaticon: Another library of icons that I use if Lucide doesn't have what I need. The '.png' files are free and are available in different sizes.
• Carbon: Sometimes use this to create and share formatted images of code snippets. Has several nice formatting options and applies syntax highlighting.
• Mockups Design: A collection of free and high quality mockups. I haven't used this one yet but it looks amazing nonetheless.
• Landing Page Design Examples: This is a repository of nice landing pages that I made a while ago. I didn't think that I would use it as much as I do today.
• Shots: A free tool to make high quality mockup images on beautiful backgrounds.
• Fluid Type Scale Calculator: Tool that generates font size variables for a fluid type scale.
• Avatar Placeholder: API and library for profile picture avatars that look nice.

Miscellaneous

• StippleGen: A tool that converts images into stippled (dot) images. The images look nice and work well as backgrounds for dark mode.
• SFXR: A free tool that generates 8-bit sound effects. Great first place to generate sound effects because there aren't any royalty of licensing issues when using this.
• Lottie: Although I haven't used Lottie yet, it's caught my eye several times. It's a library of lightweight and editable animations.
• Pimpmysnap: Let's you add gifs and backgrounds to your X Posts. The images are free but include a watermark.
• PettyFolio: Curated list of the best portfolios on the web.
• Aurlien: A tool that lights the display to a color you choose which is great when using your desktop as a light.