From Zero to Serverless: Firebase Cloud Functions with React
FirebaseWeb ToolingReactJS
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.
Supercharge Your React App Deployment with Firebase Hosting
FirebaseWeb ToolingReactJS
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.
Exploring Firebase Storage with React
FirebaseWeb ToolingReactJS
In this blog, we will explore Firebase Storage with React. Why you should consider Firebase Storage for your next project?
Secure your React app with Firebase Auth
FirebaseWeb ToolingReactJS
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.
Firestore CRUD 101: Building Apps with React
FirebaseWeb ToolingReactJS
In this blog, we will learn how to create a basic CRUD (Create, Read, Update, Delete) application using Firebase Firestore and React.
Building a Lightning-Fast CRUD App with Firebase Realtime Database & React
FirebaseWeb ToolingReactJS
In this blog, we will learn how to create a basic CRUD (Create, Read, Update, Delete) application using Firebase Realtime Database and React.
Firebase Realtime Database vs Cloud Firestore
FirebaseWeb Tooling
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.
From Mobile to Browser: A Guide to React Native for Web
React NativeFrontend
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 Your React App with Cypress
TestingWeb ToolingReactJSFrontend
In this blog, we will learn how to setup a bulletproof E2E testing setup using React + Cypress.
Deep Dive into Server-sent Events (SSE)
ReactFrontend
In this blog, I will discuss all about SSE and when to use it with the implementation details.
Short Polling vs Long Polling - A Comprehensive Guide for Developers
ReactFrontend
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.
Building Real-Time Apps with React and Socket.IO
ReactFrontend
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.
Getting Started with GraphQL and React
ReactFrontend
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.
Deep Diving into the Next.js App Router
NextJSFrontend
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.
From Zero to Production: Setting Up React with Webpack Explained
Web ToolingFrontend
In this post, we'll break down: What Webpack actually is and How to get a React project up and running with Webpack.
Unit Testing React Components with Jest and React Testing Library
TestingFrontend
In this blog, I will deep dive into unit testing React apps with Jest and React Testing Library.
Develop Webapps for Everyone: A Guide to Web Accessibility
Web AccessibilityFrontend
In this blog, let's talk about something that should be on all our radars but often gets pushed to the backburner: web accessibility
From Chaos to Containers: Journey of Dockerizing a React App
Web ToolingReactJSDocker
In this blog, I will share how you can start moving your React app to Docker and why you should do that.
Building and Documenting UI Components with Storybook and React
DocumentationTestingWeb ToolingReactJS
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.
Playwright for React Devs: A Complete Guide with API Testing
TestingWeb ToolingReactJS
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.
Video Optimization 101: Tips for Faster and Smoother Web Delivery
Web PerformanceVideo OptimizationFrontend
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.
Redefining Web Performance Standards with INP
Web PerformanceWeb VitalsFrontend
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).
A Comprehensive Guide to Web Vitals: Metrics That Matter for Performance
Web PerformanceWeb VitalsFrontend
In this article, we will explore the basics of Web Vitals and understand how they can help us to improve web performance.
Mastering React Performance: Tips and Best Practices
Web PerformanceFrontendReactJS
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.
Boosting Performance: Image Optimization in React
Web PerformanceFrontendReactJS
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.
Optimizing UX: The Art of Adaptive Loading in Web Performance
Web PerformanceReactJSWeb 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.
Exploring Web Rendering Strategies: A Deep Dive into CSR, SSR, SSG and ISG
FrontendSSRSSGISGCSR
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?
The Magic of Hot Reloading in React
ReactJSWeb Tooling
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.
Demystifying Virtual DOM in React
ReactJSVirtual DOMDOM
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.
Vite vs Webpack: A Comparative Analysis
Web ToolingViteWebpack
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.
Decoding Zustand: Simplifying State in React
State ManagementZustandReactJS
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.
Exploring Zod: A Comprehensive Guide
ZodTypeScript
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.
Implement the useDebounce custom hook in React
FrontendReactJSCustom HooksInterview Prep
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.
Implement the useFetch custom hook in React
FrontendReactJSCustom HooksInterview Prep
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
Deep Dive Into the useReducer() hook
FrontendReactJS
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.
Conditional Rendering and Rendering List in React
FrontendReactJS
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.
Prop Types and Default Props in React
FrontendReactJS
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.
All You Need to Know About Props in React
FrontendReactJS
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.
An in-depth guide on State in React
FrontendReactJS
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.
'this' keyword in JavaScript
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 Variables (var vs let vs const)
JavaScript
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.
Get Started with TypeScript
TypeScript
Do you want to take your first step in the world of TypeScript? Do read this blog to get started on this journey.
Deep Dive into Git (Part I)
GitVersion Control System
What is Git? Why understanding it is so much important? In this article, we are going to understand it.
Deep Dive into Git (Part II)
GitVersion Control System
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.