 — Once you have the data, managing it locally to your application and keeping it in sync with data in your database

 — Rendering data to the user in a clear and digestible manner

 — Collecting required data from the user

 — Making sure you code doesn’t have type errors when working with data

 — An environment that lets you develop and iterate quickly to build an MVP

Not only must you build out your idea quickly but it has to look good also.

Through this experimentation I have tried many libraries such as Redux, RTK Query, RxJS, Formik, Material UI, Tailwind, ChakraUI and a whole host of others. All wonderful libraries and ones I will goto depending on the specific use case but not ones I will go into detail here.

Before I share the libraries/tools I personally use I would like to share the high-level reasons why I picked these:

I can make a dynamic, interactive, well functioning web app:

 These libraries give me everything I need to enable me to collect and present data from a user. Its the building blocks of any good interactive web application.

 They are built and developed by some really smart developers who I know I can trust. The Javascript community is full of such talented individuals and its amazing to be able to utilise their work in your everyday projects.

 Moving fast these days is essential. You have an idea or your client has an idea its really important these days to turn that idea into reality as soon as possible.

My apps look half descent with minimal effort:

 Not only must you build out your idea quickly but it has to look good also. It’s great to be quick but if your app looks like a pile of turd then less people will use it and you will have less engagement.

 Making forms in any UI is hard. To get it flowing, showing user enough information so they know what to do but not too much they become overwhelmed and lost. Having a super useful library to assist you in this endeavour is essential.

 for a good 5 years now. Ever since I tried it and understood the improvement in DX from using JSX and also how props work I fell in love. There have obviously been some changes along the way such as classes to functional components and the implementation of hooks. But it beats writing UI in pure Javascript and gives you a really nice set of tools to build modern, reusable UI components and can be interactive and dynamic.

 it just worked and it was fast. Since then I haven’t looked back. If you ever used npm with CRA and remember waiting for it to first load up when you had any sizeable app then you will really appreciate tools like Vite. This is what it gives you:

I can testify for the first 4 of these (I got this list from 

). For me as a developer this is more than enough reasons to use Vite.

 because I was bored of Material UI and wanted to try something new that was close enough to Material UI but different enough to make it interesting.

Mantine hit that sweet spot. It’s selection of components is very extensive. It’s being continually developed. It’s on version 7 at the time of this writing. It’s native styles are really nice. It allows me to develop good looking UIs quickly without looking like a typical Google app.

If you haven’t tried it I suggest you do. So far I haven’t been disappointed.

Tanner Query is so useful for calling apis, handling the loading or error state and also providing a cache across the Frontend which you can easily use or refresh depending on your use case. If your app is API heavy and there isn’t much need for lots of global state then Tanner Query is such a useful library and I recommend it to anyone. The 

 is also great and the maintainers seem to really care about the library.

Forms are an inevitable part of any application. They may not be the sexiest thing in web development but if you want to capture any kind of data from the users then you’re going to need them. I first started with the 

 library and that was great. But then I tried out 

 and really liked the api it provided and the ease with which is handled pretty complex form situations. Especially with dynamic forms. Since making the switch I haven’t looked back.

I admit I was slow to get on the Typescript train but once I did I have had no desire to jump off. I remember very vividly adding Typescript to an existing JS project I was working on as part of a team. Straight away type errors started popping up — incorrect props being passed down, variables being used as one type even though they were something totally different and many other things.

Tanner Query is so useful for calling apis, handling the loading or error state and also providing a cache across the Frontend which you can easily use or refresh depending on your use case.

You can get away with so much sloppy code in Javascript

Making any kind of sizeable app in Javascript these days is just asking for trouble.

Since that day I have only ever used Typescript and the amount of times it makes my development life easier cannot be underappreciated.

As Javascript developers we live in a day and age where we are spoilt for choice over what libraries and tools we can use in our everyday work. It’s got to a point where you could probably spend all your days just learning about all the tools rather than actually building anything!

However, I think its important to look around and see whats new but at the same time to actually get to business and build things. That is the main reason why we do this line of work. Therefore it’s important to settle on some main tools and libraries which can get you 70–80% of the way there. When you use these things over and over you not only get really efficient at using them, you also discover the depth of utilities they actually contain.

With every app there will always be specifics that need individual tools but the large majority of Web applications do the same thing. So pick some libraries and tools you like and get really freaking good at using them!

Explore my latest blog post detailing my current Frontend Stack, including React, Vite, Mantine, Tanner-query, react-hook-form & Typescript. Gain insights on their functions, how to optimize them for your projects, and why this combination can significantly improve your web development process.

Hi, I'm Adam Drake

Latest Blog Post

My current FrontEnd Stack — React, Vite, Mantine, Tanner-query, react-hook-form & Typescript

Skills