Writing
Articles and hands-on labs on React, Firebase, web performance and the tools I use every day. 48 posts on Dev.to with 90k+ views.
50 articles
Firebase · Web Tooling · AI
Build AI-powered React apps with Firebase AI Logic
In this hands-on lab, you will embark on a transformative journey to supercharge your frontend development skills by mastering the fundamentals of Firebase AI Logic.
Firebase · Web Tooling · AI
Build AI-powered React apps using Genkit
In this blog, I will walk you through why I think learning Genkit is useful for you, and then we'll build something practical together.
Firebase · Web Tooling · ReactJS
Dynamic Feature Management with Firebase Remote Config in React
In this blog, we'll learn what Firebase Remote Config is and its use cases in a real-world application.
Firebase · Web Tooling · ReactJS
From Zero to Serverless: Firebase Cloud Functions with React
In this codelab, we will explore how to develop a real app using Firebase Cloud Functions with React. We'll start from absolutely nothing and end up with something you can actually deploy and show off.
Firebase · Web Tooling · ReactJS
Supercharge Your React App Deployment with Firebase Hosting
In this code lab, we will explore Firebase Hosting and how it works. We will start with the basics and then move on to advanced topics like setting environment variables.
Firebase · Web Tooling · ReactJS
Exploring Firebase Storage with React
In this blog, we will explore Firebase Storage with React. Why you should consider Firebase Storage for your next project?
Firebase · Web Tooling · ReactJS
Secure your React app with Firebase Auth
In this blog, I discussed, how to secure your React app with Firebase Auth. I focus on mostly Email/Password authentication and Google sign-in.
Firebase · Web Tooling · ReactJS
Firestore CRUD 101: Building Apps with React
In this blog, we will learn how to create a basic CRUD (Create, Read, Update, Delete) application using Firebase Firestore and React.
Firebase · Web Tooling · ReactJS
Building a Lightning-Fast CRUD App with Firebase Realtime Database & React
In this blog, we will learn how to create a basic CRUD (Create, Read, Update, Delete) application using Firebase Realtime Database and React.
Firebase · Web Tooling
Firebase Realtime Database vs Cloud Firestore
For the last couple of years, I am using Firebase extensively in my personal projects. One of the most difficult choice is to make between Firebase Real-time Database vs Cloud Firestore. After using both of them here are some of the key points I found which can help you to choose between both of the storage options.
Automation · Web Tooling · DevOps
Make & Makefiles: A Modern Developer's Guide to Classic Automation
In this blog, we'll learn why Make deserves a place in your development toolkit and how to leverage it effectively in contemporary projects.
React Native · Frontend
From Mobile to Browser: A Guide to React Native for Web
In this blog, we will learn about React Native web. The goal is to build webapps faster with your already existing React Native app codebase.
Testing · Web Tooling · ReactJS · Frontend
Testing Your React App with Cypress
In this blog, we will learn how to setup a bulletproof E2E testing setup using React + Cypress.
React · Frontend
Deep Dive into Server-sent Events (SSE)
In this blog, I will discuss all about SSE and when to use it with the implementation details.
React · Frontend
Short Polling vs Long Polling - A Comprehensive Guide for Developers
In this blog, I'll walk you through short polling and long polling in React—the two most common approaches that can transform your static app into a dynamic, real-time experience.
React · Frontend
Building Real-Time Apps with React and Socket.IO
In this blog, I'll walk you through the basics of websockets and how to implement that using Socket.IO by building a simple Chat Application.
React · Frontend
Getting Started with GraphQL and React
In this blog, I'll walk you through the basics of GraphQL by building a simple React app that fetches user info using Apollo Client.
NextJS · Frontend
Deep Diving into the Next.js App Router
In this blog, we will talk about the App Router, how it actually works in practice, and some cool tricks you can use to leverage your app.
Web Tooling · Frontend
From Zero to Production: Setting Up React with Webpack Explained
In this post, we'll break down: What Webpack actually is and How to get a React project up and running with Webpack.
Testing · Frontend
Unit Testing React Components with Jest and React Testing Library
In this blog, I will deep dive into unit testing React apps with Jest and React Testing Library.
Web Accessibility · Frontend
Develop Webapps for Everyone: A Guide to Web Accessibility
In this blog, let's talk about something that should be on all our radars but often gets pushed to the backburner: web accessibility
Web Tooling · ReactJS · Docker
From Chaos to Containers: Journey of Dockerizing a React App
In this blog, I will share how you can start moving your React app to Docker and why you should do that.
Documentation · Testing · Web Tooling · ReactJS
Building and Documenting UI Components with Storybook and React
In this blog, I'll walk you through setting up Storybook in a React project and show you how to build and document components that you can reuse throughout your applications.
Testing · Web Tooling · ReactJS
Playwright for React Devs: A Complete Guide with API Testing
In this blog, I'll walk you through setting up Playwright for a React app built with Vite and TypeScript, with special attention to handling API integration testing.
Web Performance · Video Optimization · Frontend
Video Optimization 101: Tips for Faster and Smoother Web Delivery
In this article, we will understand how to optimize videos for the web to give the end user the best experience. They bring our ideas to life, show off our products, and engage users like no other medium can.
Web Performance · Web Vitals · Frontend
Redefining Web Performance Standards with INP
In this article, we will explore about Web performance, which is no longer a technical detail but a game changer in how users experience the internet. The newest kid on the block of core web vitals is Interaction to Next Paint (INP).
Web Performance · Web Vitals · Frontend
A Comprehensive Guide to Web Vitals: Metrics That Matter for Performance
In this article, we will explore the basics of Web Vitals and understand how they can help us to improve web performance.
Web Performance · Frontend · ReactJS
Mastering React Performance: Tips and Best Practices
Building a React app is easy. But optimization is the most difficult part. In this article, I will be discussing some of the most popular techniques to master web performance in React.
Web Performance · Frontend · ReactJS
Boosting Performance: Image Optimization in React
Image Optimization is one of the most crucial parameters for optimizing web performance. In many parts of the world, the internet is still slow and takes a lot of time to load the pages. As frontend developers, we have to think about all the users. Our goal is to make the web apps faster. This blog will help you in your journey to make your web app faster.
Web Performance · ReactJS · Web Performance
Optimizing UX: The Art of Adaptive Loading in Web Performance
In today's time, becoming a web developer is not that easy as more and more challenges come hand in hand. You can't build one solution that will work for all the users. In this article, we are going to discuss one such topic called Adaptive Loading.
Frontend · SSR · SSG · ISG · CSR
Exploring Web Rendering Strategies: A Deep Dive into CSR, SSR, SSG and ISG
In this article, I will explain different web rendering strategies and how to choose one. What are SSR, SSG, CSR and ISG? and how to choose one for your next frontend project?
ReactJS · Web Tooling
The Magic of Hot Reloading in React
Have you ever been working on a React app and found yourself continuously refreshing the page whenever you changed to see the updates? It can be a tedious and time-consuming process. Well, that's where hot reloading or HMR (Hot Module Replacement) comes in.
ReactJS · Virtual DOM · DOM
Demystifying Virtual DOM in React
Virtual DOM is one of the most crucial topics for a React Developer. The essence of how React renders on the web lies in virtual DOM. This article will explain how virtual DOM works and its nitty-gritty details.
Web Tooling · Vite · Webpack
Vite vs Webpack: A Comparative Analysis
In this article, we'll delve into the features, strengths, and use cases of both Vite and Webpack to help you make an informed decision for your next project.
State Management · Zustand · ReactJS
Decoding Zustand: Simplifying State in React
Zustand is a state management library for React that offers a minimalistic yet powerful API. It provides a simple way to manage the state of your application without the need for complex abstractions.
Zod · TypeScript
Exploring Zod: A Comprehensive Guide
In the world of TypeScript, sometimes, the Typescript validations are not enough for us. In those situations, we want more control over the validations to make our code more robust. This is where Zod comes into the picture.
Frontend · ReactJS · Custom Hooks · Interview Prep
Implement the useDebounce custom hook in React
In this blog, we’ll build a useDebounce custom hook from scratch, explore why it's useful, and show how you can integrate it into real-world projects.
Frontend · ReactJS · Custom Hooks · Interview Prep
Implement the useFetch custom hook in React
In this blog, we’ll dive into building a useFetch hook from scratch and understand its benefits by integrating it into a real-world project
Frontend · ReactJS · Custom Hooks · Interview Prep
Implement the useCopy custom hook in React
In this blog, we'll build a useCopy hook from scratch, understand each part of the implementation, and see a real-world example to use it in your UI.
Frontend · ReactJS · Custom Hooks · Interview Prep
Implement the useStateWithReset custom hook in React
In this blog, we'll walk through the step-by-step creation of a useStateWithReset hook and see how to use it in a real-world scenario.
Frontend · ReactJS
Deep Dive Into the useReducer() hook
In React, useReducer() is one of the most important hooks. We use the useState() hook for component-based state management. That is good if your component only has two or three states. But if you have many states in the component, then useReducer() can be a better choice.
Frontend · ReactJS
Conditional Rendering and Rendering List in React
Sometimes we want to show a React component when a condition yields true. It is called Conditional Rendering. Also, rendering through a list of values to display a Component multiple times is very common in React. In this blog, we are discussing these two topics.
Frontend · ReactJS
Prop Types and Default Props in React
prop-types is a library with which you can check the type of props in React. With defaultProps, we can pass default values to props.
Frontend · ReactJS
All You Need to Know About Props in React
In React, we always think about Components. These components need a way to communicate with each other. Props are a great way to communicate between components by sharing data between them.
Frontend · ReactJS
An in-depth guide on State in React
In React, State is one of the essential concepts to learn. If you are new to React or an intermediate-level developer, this article will help you to dive deep into State and help you to write better code.
JavaScript
'this' keyword in JavaScript
If you are new to the world of JavaScript, then you may find 'this' keyword a little bit tricky. In this blog, I will discuss some basics of 'this' keyword, how we can use and its problems.
JavaScript
JavaScript Variables (var vs let vs const)
If you are new to the world of JavaScript, then you might be thinking that why JavaScript uses different keywords to declare a simple variable. So in this blog, I am going to discuss all of this and clear all your doubts.
TypeScript
Get Started with TypeScript
Do you want to take your first step in the world of TypeScript? Do read this blog to get started on this journey.
Git · Version Control System
Deep Dive into Git (Part I)
What is Git? Why understanding it is so much important? In this article, we are going to understand it.
Git · Version Control System
Deep Dive into Git (Part II)
In my previous blog, I discussed 'what is Git?'. In this blog, I am going to share how you can get started with git commands.
