868 views

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

• Cursor: An AI first code editor based on Visual Studio Code that speeds up development. I use it with claude-3.5-sonnet but most other popular models are supported too.
• Visual Studio Code: A simple code editor that has many extensions and nice themes. I still use it sometimes - although far less since I started using Cursor.
• Tailwind CSS IntelliSense: IntelliSense for Tailwind CSS. It gives me auto-completion and hover previews of the CSS used in the tailwind classes.
• 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.
• Replicate: A platform for running and deploying AI models. They have a large library of models that can be used off the shelf. Removes the burden of managing your own infrastructure.
• Map of Reddit: A map of the Reddit subreddit network. A great tool to discover new stuff on Reddit.