What tools to use for your next web based project?
Tags: webdev, tooling, beginners
Published: 2021-08-29 11:04:01

Picking the right tools is one of the most important steps to starting any project. This is also the step where most people spend a lot of time, thinking and researching about all the available tools out there.

## You cannot predict the future
I think the biggest challenge is making sure that the tools you pick will be able to handle your future use cases. But you cannot predict the future, and so we spend a lot of time researching every new tool out there and finally lose motivation to get started.

Another issue is thinking about scaling while building an MVP. Some tools are good for high performance and scaling, but hard to work with, whereas others are easy to work with but are not as fast as other tools. But wile building an MVP or a proof of concept, the most important thing is to build something and get users to test it, rather than obsessing about that 10ms optimization.

##A general framework
The first step is to understand what type of project you are going to build. Is it a minimum viable product, or is it a proof of concept for some feature? Or are you going to build the final project itself?

In general if you are building an MVP or PoC, just pick whatever makes life easier for you, and forget about scaling, or support for all possible future use cases. Because chances are, this will not be the final project. If things work out, you will have a second chance to rethink your choices.

But if you are building the final project itself, you will need to understand the advantages and limitations of all the tools you pick. Again, you cannot predict the future, so don’t worry too much. Just set a deadline for yourself to do the research, and make your decisions within the deadline.

Here are some of my go to tools, based on some use cases I have come across:

###Design tools
This is maybe not relevant here, but I personally like to visualize what I am about to build (at least on a piece of paper).

[Figma](https://www.figma.com/) is my go to tool to design anything. There are tons of other tools like [Adobe XD](https://www.adobe.com/in/products/xd.html), [Sketch](https://www.sketch.com/), [InVision](https://www.invisionapp.com/), etc.. but figma is just easy to use and collaborate.

Be sure to check out wire-framing toolkits and UI toolkits available on the figma marketplace, which can save you lots of time and effort while trying to ideate on something quickly.

###Frontend tools
There is a new frontend tool coming out every week. So I think this selection comes down to personal preference, and just picking whatever your team is most comfortable with.

[React](https://reactjs.org/) is my go-to tool for all kinds of frontend projects. Simply because I am comfortable with it, and the community is great. There is almost nothing you cannot do with it. If you are unsure, just go with React.

If you are looking to build a blog, landing pages or a static website, be sure to check out [Next.js](https://nextjs.org/). It can do both server side rendering (SSR) and static site generation (SSG). Do not pick Gatsby, Next.js is much much better (from personal experience).

For building the UI be sure to take advantage of available UI tools instead of building everything from scratch (although it can be a good learning exercise in CSS). Some of my favourite tools are [Material UI](https://material-ui.com/) for quick development, [tailwind](https://tailwindcss.com/) and [styled-components](https://styled-components.com/) for more custom things. Take advantage of UI themes available for free out there.

Make sure that you do a quick google search before you decide to build anything in react, because chances are it has already been done before.

[Vue.js](https://vuejs.org/) is also a popular light weight alternative to react. Many interactive websites nowadays use Vue.

If you are looking to build a simple SPA with very few features, then definitely check out [Svelte.js](https://svelte.dev/). It is light weight, easy to use and is a great fit for simple use cases like calculator pages, information display from APIs, landing pages, or even simple blogs.

I am not too familiar with [Angular](https://angular.io/), but from what I know, it is usually used in enterprise projects. If you like typescript, and object oriented programming and have a lot of people going to work on the project, then angular might be the best choice.

If you are a fan of functional programming, then be sure to check out [Elm](https://elm-lang.org/) that let’s you build frontend using functional programming concepts.

Basically the conclusion is that if you are building a PoC or something with simple features, check out Vue.js or Svelte. Otherwise just pick react and don’t overthink it.

###Backend tools
Coming to backend tools, I think the first consideration to make is what programming language you are comfortable with.

You could also have micro services where each service does a separate task, or even go with a serverless architecture with tools like [lambda](https://aws.amazon.com/lambda/). This would make your backend system programming language agnostic, but might be hard to customize or optimize certain things.

If you want to build an MVP then just pick a python based tool like [Flask](https://flask.palletsprojects.com/en/2.0.x/) or [FastAPI](https://fastapi.tiangolo.com/), or pick [Node.js](https://nodejs.org/en/). I think python and javascript are the most popular languages now, and the community support is amazing. There is almost nothing that you cannot do in both.

[Django](https://www.djangoproject.com/) is a great option to get started with backend development. The problem with Django and python in general is that it is slow, but nowadays it is quite optimizied and lots of companies are using Django on their backend. Other than ease of development, it also makes hiring easier, since a lot of people are familiar with it.

If your primary use case is fast CRUD operations, with an MVC architecture - then I would recommend [Spring](https://spring.io/projects/spring-boot) in Java or [Phoenix](https://phoenixframework.org/) in Elixir. .NET might also be a good option here, although personally I am not a fan of it. I have been using Phoenix at work, and it is just amazing. Fast, simple, good project structure, the community is good but not as vast as other tools.

If you are looking to build real time systems, like games or chat - then I would recommend checking out Phoenix. It has a built in feature called channels, that makes working with web sockets very easy. Other popular options would be Node.js or [Golang](https://golang.org/). Golang is great for stand alone services that do one thing very fast.

If performance and scale is your primary goal then again I would recommend Phoenix or Spring. Both elixir and java were built to scale and handle high loads. If you want performance but not huge scale, then Node.js or Golang might be good options.

The conclusion here is to use Python if you want to get something out there quickly, or you have to run deep learning models. If you want performance or have any real time use cases consider phoenix, Node.js or Golang. If you want both performance and huge scale, consider Spring or Phoenix.

###Databases
The step to figure out here is to understand if you want SQL or NoSQL. Postgres is quite popular now - it has tons of features, can handle some unstructured data, and even index it.

I have not worked with NoSQL systems, but MongoDB seems the most popular tool there. You could even consider managed options like firebase.

If you are building an MVP then definitely checkout Supabase, for a managed postgres database, with great tooling in all languages.

##Conclusion
Tools change every day, tomorrow something new might come up, which is perfect for your use case, and you might decide to move to it. Being able to adapt easily is very important today. Try not be confined to a single language or tool, pick whatever is best suited to solve your problem fast and effectively.

Let me know if I missed out your favourite tools in the comments!