Building modern web applications requires speed, accessibility, and a consistent design language. I have worked with almost every UI library available in the ecosystem. I remember the days of writing thousands of lines of custom CSS just to get a modal window to look right on mobile devices. Then I discovered Chakra UI, and it … Read more >>
If you are a React developer, you know how much time it takes to build a professional-looking dashboard or a clean landing page from scratch. I recently started using HeroUI (which many of you might know by its former name, NextUI) for several of my client projects based in the US. In this tutorial, I … Read more >>
In my eight years of building React applications, I have seen many developers struggle with “prop drilling.” It usually starts small but quickly turns into a maintenance nightmare where data is passed through ten levels of components. I remember working on a large-scale fintech dashboard for a client in New York where we hit this … Read more >>
I have found that passing data between components is the most fundamental skill you need to master. Whether you are building a small dashboard or a massive enterprise platform, you will constantly need to move information from one part of your app to another. In this tutorial, I will show you exactly how to pass … Read more >>
Testing React components used to feel like a chore. I remember spending hours mocking the DOM just to see if a button worked. Everything changed when I started using Cypress for component testing. It allows you to see your components in a real browser while you build them. In this guide, I will share my … Read more >>
Handling file uploads is a common task in modern web development. Whether it is an insurance claim form or a job application, users need to upload documents. In my eight years of working with React, I have seen many developers struggle with the default HTML file input. It is notoriously difficult to style and manage. … Read more >>
A React button component is a small function that renders a <button> and receives its label as children and its behavior as an onClick prop. Once it also accepts a variant, a size and a loading state, and forwards every other prop to the real button, you have one reusable button component for the whole … Read more >>
Recently, while building a React dashboard for a client in New York, I needed to create a component that could accept some props, but not all of them were required. That’s when I realized many developers struggle with optional props in React. We often want flexibility, a component that works even if certain props aren’t … Read more >>
While working on a React project for a U.S.-based analytics dashboard, I needed to reuse a few UI components with slightly different behaviors. At first, I thought of duplicating the component and tweaking it, but that quickly became messy. That’s when I explored ways to extend functional components in ReactJS, and it made my workflow … Read more >>
Recently, I was working on a React dashboard for a client in Chicago where users could track their project completion in real time. I needed a custom progress bar that looked modern and fit perfectly with the app’s theme. While React offers a few prebuilt libraries, I wanted to create a custom progress bar component … Read more >>