🤩 20 Awesome Tools For Your Web Dev Toolkit 🛠️

Introduction

I've been coding for more than 8 years and I love doing side projects while my main source of income as a Developer is selling my soul to employers ☠️.

You know, trying out your own ideas, turning them into small businesses, or just keeping your fingers crossed that someone will actually use and like what you worked on for countless nights.

Alright, jokes aside, over these years, I've collected tools that primarily focus on delivering big value while mostly being available for FREE.

I'll describe each of the tools so you can consider using them while working on a side gig, for your current company, your own side project (next 🦄 I hope!), or just for improving yourself as a Web Developer.

On top of that, I'll present the FREE limits of each tool and mention what's the next pricing level so you can decide if it's worth it or not.

Sounds good? Let's dive in!

1. BigDevSoon (Shameless plug ahead 🙊)

Well, project-based learning is one of the best skills you can possibly master in Web Development. As a creator, I'll always promote BigDevSoon because it's an application I lacked when learning how to code. It helps you simulate that real workflow you'll encounter in your real job as well as build a strong portfolio of real-world projects based on professional Figma designs with the assistance of your own AI Project Buddy - Elise.

The FREE version is very generous as you can download 1 Figma Design per month and access all of the projects (15+ and 130+ implementation cards) so far! We might adjust it a bit while releasing 24 hours (Daily Challenges) early next year but for now, you can enjoy it as much as you want!

The monthly plan starts from $5/month as we still have a 50% discount for Early Bird price and it allows you to use ChatGPT Project Buddy - Elise, download up to 3 Figma files every month, and a few more features too!

2. SmartLook

It's a great tool for improving the UX/UI of your website/web app, sessions of users visiting your product are recorded and you can watch them with a little of 🍿 to realize the real flow of users and brainstorm over it, i.e. what you created in your head and if it's reflecting the real understanding that users have about your website/app.

They offer up to 3,000 monthly sessions in a FREE plan which is a lot in my opinion, at least for starters.

Pricing of the Pro plan starts at €55/month and increases monthly sessions to 5,000, I'd probably start with a FREE plan as long as you can for this one.

3. HotJar

Very similar tool to SmartLook but they also offer unlimited heatmaps that are very helpful to understand to what extent your users scroll the website or basically click a lot (e.g. to improve your CTA buttons by enlarging them or moving a little bit up as most people don't scroll too much).

They have different approaches as on a FREE plan you can record up to 35 daily sessions and have unlimited heatmaps.

Pricing of the Plus plan starts at €32/month and extends daily sessions to 100 while enabling some more filtering, segmentation of data, and tracking custom user actions, it could be worth it once you start to scale.

4. Notion

Well, this is a huge one. All-in-one workspace for a lot of projects I worked on, tasks, notes, documentation, it has it all. You can even create a Blog based on Notion, integrate AI, and do a lot of more things with it. I hugely recommend this tool for Web Developers to start practicing their writing skills, noting down their journey, and learning how to write technical documentation but you can probably discover many more use cases of it on your own.

In a FREE version, you get a Collaborative workspace with GitHub/Slack integrations, some simple analytics, 7 days page history, and can invite up to 10 guests, it's a very generous one.

Pricing of the Plus plan starts at $10/month and is mostly suited for teams, unlimited file uploads, 30-day page history, and can invite up to 100 guests. It might be worth once you need it.

5. Linear

Sure, Notion is good almost for everything but sometimes we like specialized products, Developers often work in Agile environments, tasks, boards, sprints, and so on. We've used GitHub Board for tasks but it quickly became too simple while Linear is a next-gen, super cool UX/UI tool for specifically building products, issues, sprints, and roadmaps. We used it for 3 teams and enjoyed it a lot!

The FREE plan allows for unlimited members but only 250 issues so it could not be enough for more teams/team members, you can also import issues e.g. from GitHub.

The standard plan starts from $8 per user/month (they recommend it for 1-50 users) and it allows for unlimited issues and file uploads, some guest accounts, private teams, and admin roles.

6. Vercel

I tried many cloud-based platforms for static sites, and in general, modern development but the ease of Vercel makes it extraordinary, super fast deployments, CI/CD integration, starter Database, Web Analytics, custom domains, env. variables, even Serverless Functions. On top of that, Next.js which is super popular right now comes from the Vercel team and integrates smoothly with their services.

I already described most of the FREE version benefits above but it's worth mentioning that they support 35+ Frameworks.

Pricing of the Pro plan starts at $20 per user/month and basically allows "everything more" which is tricky I'd definitely reach out to their support team to understand the limits better, they also have some Basic DDoS Mitigation included.

7. Hasura

Imagine being a Frontend Developer, having a great app idea but lacking of Backend Developer or knowledge in that area. Hasura comes to the rescue where you just create database tables and columns and they unblock you with secure, production-ready GraphQL API. It's a really robust tool and I've seen it running in production with 0-100k+ users, they also have custom actions for more complex business logic. It'll definitely allow you to go serverless at least in the initial phase of growing your product or for smaller gigs that involve full-stack functionalities.

In a FREE version, they allow you to connect 2 databases per project, up to 100MB data passthrough/month, and up to 3M API requests/month which is a pretty good start.

The professional plan is again "tricky" as it starts at $1.50/active hour and allows for unlimited databases and passthrough (additional $0.13/GB) and up to 6M API requests/month. Again, this is not an easy task to calculate all the possible costs and scaling needs but worth talking with their support when needed.

8. Supabase

Well, might be a bit subjective but I love this tool and we heavily rely on it in BigDevSoon, amazing, super fast Firebase alternative with a lot of services. PostgreSQL database with a really cool ORM/DB wrapper (JS/Node.js clients) for CRUD operations, Authentication out of the box, Edge Functions based on Deno (Serverless), Storage like Cloudinary for assets, and much more... I tried it, I liked it, I still use it. 😁

The FREE version covers everything from the above with some limits that are quite generous, the only moment to scale would be if you want to have 3 or more environments and then the FREE plan might not be enough, as well as project pausing can be annoying sometimes.

The PRO plan starts from $25/month/org and has much more generous limits. Then, you just "pay as you go" while going beyond the predicted limits.

9. Cloudinary

When scaling BigDevSoon, I've been trying different storages, we ended up (for now) with Supabase Storage but Cloudinary is widely used and quite awesome too. The caching out of the box (CDN-based), image transformations (responsive images, reducing image size), as well as video assets support, make it quite simple as an upload-download-all-in-one tool. They have some APIs to work on the Backend too, I've been enjoying using it for some time in the long term.

The FREE plan allows you to have 3 Users / 1 Account with 25 monthly credits which is more or less around 25k image transformations or 25GB storage, in most cases, you might not need transformations at all.

The Plus plan starts at $89/month which is a huge difference but also allows for 3 Users / 2 Accounts and 225 monthly credits.

10. LaunchDarkly

Ah, how many times we were building features for users that shouldn't yet land in production but we didn't want to stop development, multiple branches, PRs, total chaos in general. But there is a solution, you probably can quickly build it on your own even on Frontend (quite silly but can work too 😁) by introducing feature flags that you only know of their existence. This way you can ship your code while users are generally not affected. Well, LaunchDarkly somehow solves most of these problems and is much more mature with FE <-> BE support with real-time feature flags, targeted for specific user properties and so on.

The sad part is they changed their FREE version to a 14-Day Trial but it's still worth testing with unlimited feature flags, environments, dashboards, and a lot of SDKs they have built over the years.

However, the Starter plan starts at $8.33 per seat/per month (billed annually) which might be worth the cost once you want to do some A/B testing, introduce features under flags, for specific groups of users, or many other use cases you could possibly encounter during the lifecycle of your product.

11. Sentry

It's fun to walk in the dark from time to time but not knowing that your users experience crashes, issues, and 🐛 is not fun at all! I love everything about Sentry and they also added replays where you can watch a video of how the user "got to the crash" while they also support source maps, breadcrumbs, logs, and other features!

In the FREE version, you have limited error and performance monitoring which is around 500 replays I believe per month, and some errors (never got to the upper limit).

In their Team Plan for $29/month, they have 50k errors, 100k performance units, still 500 replays, and 1GB attachments, in most cases you will probably stay on a FREE plan (at least initially).

12. Zapier

A little bit of automation never hurts. And you can do tons of combinations with Zapier (around 3000 apps included). I remember using it for a case where someone contacted me via a Netlify Form and I've been automatically sending an email based on that action - but I'm pretty sure there are many more use cases.

In the FREE plan, they have 100 tasks/month which is basically what I described above, e.g. a trigger for the workflow when something happens and they execute a chain of events through the apps you've configured.

Next is the Starter plan which is around $20/month with 750 tasks/month included with "Multi-step Zaps" which allow for more chain of events in the workflow as well as a few other features.

13. Brevo - ex. SendinBlue

I've been searching for a simple "Newsletter Email Tool", MailChimp, and SendGrid were good options but too robust. While I was using it, Brevo bought them I guess but it's still a very simple, straightforward tool for collecting Contacts Lists, sending emails (scheduled campaigns), using Templates, or creating your own, nice-looking emails with a simple Drag & Drop UI Editor. They also have e.g. NodeJS API to send emails programmatically which is nice.

In the FREE plan they have up to 300 emails/day with a watermark in emails but Drag & Drop Editor, and Email Templates are available which is quite nice.

Then, I had to choose a Starter Plan which allows sending 20,000 emails/month for $25/month but also to remove the 300 emails/day limit I had to pay an additional $10/month which is $35/month in total - well once you scale your Contacts List I guess you will need to do it too. (or build your own email solution 👀)

14. Calendly

When I was doing Coaching/Mentoring with Aspiring Web Developers it was a perfect tool for easy scheduling. Create simple calendar event types, choose your availability, and automatically set calls e.g. on Hangouts or Zoom. A lot of folks in our industry use Calendly for various, quick meetings where you just send a link to your Calendly profile and people can choose available slots from it. They also have a nice React library in case you need it.

The FREE version is great for personal use but it's limited to only one event type with unlimited meetings, it offers integrations, branding, and customizable links.

I like the Standard plan for $10 seat/month as it allows me to integrate e.g. Stripe upfront payment for calls and set many more event types.

15. ScreenshotOne

Very cool, simple tool for taking screenshots of websites without cookie banners and ads. My use case was to take screenshots of user solutions for BigDevSoon and Edge Functions from Supabase in Deno do not have access to the file system yet hence we needed an external tool for it.

In the FREE plan, there are 100 screenshots/month included and 20 requests/minute. Good for starting but definitely can run out of these limits quickly.

In the Hobbyist plan for $14/month, you have 1,500 screenshots/month and 40 requests/minute which is much better, and $0.009 per extra screenshot once scaling.

16. Simple Analytics

Very nice alternative to Google Analytics without cookies (privacy-first, server-side solution). It's a super cool UX/UI-looking tool that allows users to quickly check Referrals, Pages, Devices, and Countries, as well as easily integrate multiple domains. They have some Goals and Events but I haven't used them yet.

They actually don't have a full FREE version but 14 day trial so you can get a sense of the app during that time.

The first Starter plan is €19/month and allows up to 100,000 data points for 10 users and 10 websites as well as events support. I think data-driven analysis is crucial hence it might be important to have Analytics up and running.

17. iubenda

Ah, this one is lovely as well. Imagine trying to kick off your business and needing to take care of all the GDPR, cookies, ToC, Privacy Policy, and all the other law stuff. It's like an all-in-one solution that surprisingly works really nice and I couldn't find a better 3rd party service than this one yet.

It's not available for FREE at all but the Essentials plan starts at $6.99/month per site or app which covers most of the needs, they generate all the pages and have a nice cookie banner solution too hence it's gonna speed up the start of your potential product a lot, once it scales it'll probably be smart to switch to some long-term lawyers that are more bounded to you as it's a general solution.

18. ChatGPT

Yeah, I know, everyone knows about it but I like to diversify the tools I use as much as I can, and having this "buddy" is always good while I'm coding, to do a quick code review, brainstorm together or simply generate code snippets based on some documentation link. Seriously, as a Web Developer, you have to use it if you still don't. 🤖 Even learning to construct prompts is a great skill these days, as well as using their API.

The FREE version is limited to ChatGPT 3.5 which is well, ok but not too great anymore...

The Plus plan is $20/month and it gives you access to GPT-4 which helped me a lot of times and shortened my development time while coding features, it can use the Bing browser as well as generate images which is amazing!

19. GitHub Copilot

Yeah, again, having a specialized AI, it's a common pattern that we get generic solutions such as ChatGPT and then sub-solutions come in handy. I used it before they had integrated chat and it was already good. It quickly learns your style, analyzes code, and can be that super clever autocomplete you always needed. If you work for a company ask them to buy it for you but even when working alone it's still worth it!

The pricing for Copilot Individual is $10/month and you have most of the features included.

20. daily.dev

I think it's the coolest ever-made feed for Developers. Stay up-to-date, earn XP, have quick TL;DR, read original posts, and simply be aware of what's going on in the Tech Industry. You can use it as a browser extension or try their web version and from a UX/UI perspective it reminds me of Linear which is a very modern Web Development style of creating apps/websites.

It's available for FREE!

Summary

Holey moley! We covered a lot of tools, starting from UX/UI tools, and moving to more documentation, and tasks tools. Then Frontend <-> Backend tools to speed up development, as well as some more feature flags, error handling, automation, emails, calendar events, screenshots, analytics, legal, AI, and Developers Feed tools. What a journey!

I hope you find this article insightful and at least one of these tools can help you boost your business, company, or side projects, or just make you better as a Web Developer!

It's been my goal for a long time to spread a project-based learning approach through the community and having BigDevSoon up and running, an app we've been working on for the last 2 years is a great achievement to us.

If you enjoyed the writing, feel free to spread the word! ❤️