Presenting the Page Speed score for a recent project undertaken for a client.
A bit about the website and all the requirements we had while making it -
- More than 100 pages (This doesn't include the dynamic pages) 😳
- Multiple data endpoints for fetching the content 🫠
- Tons of High Res Images (Static and Dynamic) 👀
- Live Preview when editing articles and events
- and Low Latency (Of course! 😭)
Typical client requirements for websites these days. 🫣
Now some of you might already know that Next JS fits perfectly for making projects like these and does most of the heavy lifting for you. So honestly, these things can be easily achieved using Nextjs features like Draft Mode, Image, ISR, and others. But in this article, we will not be going into details of these.
Being a developer your job is to build and integrate ideas and requirements faster. And build an app that is easy to use for your client and also for you to build upon it. And for this, it's not just the framework that we need to correctly choose but also the tools we use.
List of tools
These are the tools we use daily to improve our DX when building any application.
1. React Hook Forms 🔥
The best package for building forms and managing their states. we have used a couple of the form builders in the past but we always land on this as the final choice for building robust and interactive forms.
With their dev tools, your life is 10x better when debugging your forms.
2. Zod 🔮
Validation === zod
It is simple, small, and powerful!
3. TailwindCSS 🪄
Believe me, when I say this, don't use css-in-js. Just use Tailwind for building your app, it will be 3x more performant automatically. And the best thing about this is, there is no magic happening under the hood, It is what it is.
4. Rafty UI ✨
If you want to build fast, you need a component library and it should support Tailwind. There are a ton of libraries out there but in the end, they lack a ton of features compared to other Non TailwindCSS libraries.
So we created our component library for this, it is open source and has a ton of features out of the box. Go check it out and let us know what you think.
5. TanStack Query 🎆
Hands down the best library for helping you manage data fetching and data re-validation. Use it with axios for fetching data, it is an amazing combination.
https://tanstack.com/query/latest
6. React Icons 💖
Need icons for your design, just use react-icons. It does the job. It's more than just a package full of icons. You can use these builtin providers to improve your DX more.
https://react-icons.github.io/react-icons
Conclusion
These are just our opinions on tools that we love using when building an application. You might have a different stack or set of libraries that you use, comment them down below and we can give feedback on them.
Top comments (0)