https://www.rasikjain.com/ Recent content on Rasik Jain - Senior Architect | Generative AI & Full-Stack Engineering Hugo -- gohugo.io en Sat, 22 Jun 2024 00:00:00 +0000 https://www.rasikjain.com/posts/store-additional-user-information-in-firebase-using-react-and-javascript/ Sat, 22 Jun 2024 00:00:00 +0000 https://www.rasikjain.com/posts/store-additional-user-information-in-firebase-using-react-and-javascript/ To store additional information for a user in Firebase using React and JavaScript, you typically use Firestore or the Realtime Database, as Firebase Authentication does not allow for arbitrary additional data to be stored directly in user profiles. Here’s a step-by-step guide on how to achieve this using Firestore. Step 1: Set Up Firebase in Your React App First, ensure that you have Firebase set up in your React application. You need to install Firebase and initialize it in your project. https://www.rasikjain.com/posts/differences-between-getserversideprops-and-getstaticprops-in-next.js/ Sat, 03 Feb 2024 00:00:00 +0000 https://www.rasikjain.com/posts/differences-between-getserversideprops-and-getstaticprops-in-next.js/ Introduction: Next.js is a popular React framework that enables developers to create server-side rendered applications with ease. Two essential functions in Next.js are getServerSideProps and getStaticProps, which help developers pre-render pages and optimize performance. Although they share similarities, they have significant differences in terms of functionality and usage. In this blog, we will explore the differences between getServerSideProps and getStaticProps and provide real-world examples to help you understand their use cases. https://www.rasikjain.com/posts/boosting-performance-with-useeffect-best-use-cases-and-examples/ Tue, 27 Jun 2023 00:00:00 +0000 https://www.rasikjain.com/posts/boosting-performance-with-useeffect-best-use-cases-and-examples/ Introduction: As a React developer, you’re likely familiar with the useEffect hook. It’s a powerful tool that allows you to manage side effects in functional components. While its primary role is to handle tasks like data fetching, DOM manipulation, and subscriptions, useEffect can also be a game-changer when it comes to optimizing your application’s performance. In this blog post, we’ll explore some of the best use cases of useEffect in improving performance, complete with sample code to help you get started. https://www.rasikjain.com/posts/mastering-chartjs-in-react-a-comprehensive-guide-with-examples/ Sun, 21 May 2023 00:00:00 +0000 https://www.rasikjain.com/posts/mastering-chartjs-in-react-a-comprehensive-guide-with-examples/ Introduction: In the world of web development, data visualization plays a crucial role in conveying information effectively. Chart.js, a popular JavaScript library, provides an elegant and flexible way to create interactive and visually appealing charts. In this blog post, we will explore how to integrate Chart.js into a React application and leverage its powerful features to create stunning charts. We’ll cover the installation process, basic usage, and provide practical examples to help you get started. https://www.rasikjain.com/posts/enhancing-web-performance-with-react-lazy-loading-feature/ Tue, 09 May 2023 00:00:00 +0000 https://www.rasikjain.com/posts/enhancing-web-performance-with-react-lazy-loading-feature/ Introduction: In today’s fast-paced digital world, website performance plays a vital role in providing a seamless user experience. As web applications become increasingly complex, it’s crucial to optimize the loading time of our applications. One powerful technique to achieve this is lazy loading. In this blog post, we’ll explore how React’s lazy loading feature can significantly improve web performance by deferring the loading of non-critical components until they are actually needed. https://www.rasikjain.com/posts/efficient-data-flow-in-react-unveiling-the-power-of-prop-drilling/ Mon, 01 May 2023 00:00:00 +0000 https://www.rasikjain.com/posts/efficient-data-flow-in-react-unveiling-the-power-of-prop-drilling/ Introduction: React, the popular JavaScript library for building user interfaces, offers several powerful features that make it a developer-friendly choice. One such feature is prop drilling, a technique used for passing data from a top-level component to a deeply nested component. In this blog post, we will explore the concept of prop drilling, understand its benefits and limitations, and provide an example using TypeScript to demonstrate its usage. What is Prop Drilling? https://www.rasikjain.com/posts/typescript-arrays-25-essential-functions-and-examples/ Sat, 22 Apr 2023 00:00:00 +0000 https://www.rasikjain.com/posts/typescript-arrays-25-essential-functions-and-examples/ Introduction: Arrays are a fundamental data structure in TypeScript, allowing us to store and manipulate collections of elements. TypeScript provides a rich set of array functions that simplify common tasks and enhance the functionality of arrays. In this article, we will explore 25 essential functions of TypeScript arrays and provide practical examples to help you harness their power in your projects. 1. push(): Adds one or more elements to the end of an array. https://www.rasikjain.com/posts/simplifying-state-management-with-react-usecontext-feature/ Sat, 15 Apr 2023 00:00:00 +0000 https://www.rasikjain.com/posts/simplifying-state-management-with-react-usecontext-feature/ Introduction: React, being a popular JavaScript library for building user interfaces, provides various tools and features to handle state management. One such feature is useContext, which allows developers to share state across different components without prop drilling. In this blog post, we will explore the useContext feature in React and demonstrate its usage with a TypeScript example. Understanding useContext: The useContext hook is part of the React library and allows components to consume values from a provided context. https://www.rasikjain.com/posts/simple-notes-app-using-react-typescript-nodejs-graphql-mongodb/ Mon, 14 Jun 2021 00:00:00 +0000 https://www.rasikjain.com/posts/simple-notes-app-using-react-typescript-nodejs-graphql-mongodb/ In the series of the blog post, I am going to walk through step by step process of building a Simple Notes App using React, TypeScript, Node.js, GraphQL , and MongoDB. During the process of our development, we are going to use some useful npm packages like Express, Apollo-Server, Typegoose, Mongoose, TypeGraphQL , and Bootstrap. Here is the Github Source Code to run the application. Table of Content Dev Environment Setup GraphQL Server Backend Folder Structure Creating Node. https://www.rasikjain.com/posts/using-sql-dynamic-queries-in-redshift-database/ Thu, 15 Oct 2020 00:00:00 +0000 https://www.rasikjain.com/posts/using-sql-dynamic-queries-in-redshift-database/ While working with a client, we had a requirement to perform bulk insert/update using Retool table and Redshift database. For this situation, We had to loop through the table records and execute a dynamic SQL query in Redshift. Redshift database supports execution of dynamic SQL with the help of Prepared Statements or Stored Procedures. Prepared Statements We use prepared statements when we want to execute dynamic SQL queries directly without a stored procedure. https://www.rasikjain.com/posts/tips-and-resources-passing-cloud-aws-solutions-architect-associate-2020-exam/ Fri, 20 Mar 2020 00:00:00 +0000 https://www.rasikjain.com/posts/tips-and-resources-passing-cloud-aws-solutions-architect-associate-2020-exam/ Last week I finally took a plunge and decided to take the AWS Solutions Architect 2020 - Associate exam. I passed the exam with a score of 926 / 1000. I have been working in the cloud space for more than 5 years, but never got the interest in taking the exam. While having a chat with a friend, he told me that he cleared 4 to 5 AWS certifications including AWS Solutions Architect - Professional. https://www.rasikjain.com/posts/security-application-authentication-workflows/ Fri, 06 Dec 2019 00:00:00 +0000 https://www.rasikjain.com/posts/security-application-authentication-workflows/ Here are three scenarios for implementing authentication workflows. Internet Applications (Public facing) For internet web applications and APIs, Session based (SessionID cookie) and Token Based (JWT) Authentication can be implemented. Session Based: Implemented for a majority of traditional and stateful web applications. Once the user is authenticated, A Session state is created and stored in an external State server or SQL database. The Session state is identified by a unique SessionID. https://www.rasikjain.com/posts/using-reactjs-hooks-introduction-usestate-useeffect/ Fri, 08 Nov 2019 00:00:00 +0000 https://www.rasikjain.com/posts/using-reactjs-hooks-introduction-usestate-useeffect/ With the release of Hooks in React 16.8, it is now possible to store state in a function. We can add react features like useState and useEffect into the function directly without needing to create class. useState The useState hook adds state to the functional components. useState hook allows you to declare one state variable at a time. import React, { useState } from 'react'; function Counter() { //Declare the "counter" state variable const [counter, setCounter] = useState(0); return ( <div> <p>Clicked {counter} times</p> //increment the counter by 1 on every click <button onClick={() => setCounter(counter + 1)}>Click here</button> </div> ); } useEffect The useEffect allows to manage side effects in a functional component. https://www.rasikjain.com/about/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.rasikjain.com/about/ I am Rasik Jain, a Software Engineer and Architect based in New Jersey. My current mission is building the next generation of intelligent, AI-native applications. I focus on the intersection of Generative AI and modern Front-end engineering, transforming complex machine learning capabilities into intuitive, high-performance user experiences. Rather than building simple interfaces, I architect end-to-end systems that can reason. My daily work involves designing Agentic RAG pipelines and sophisticated AI Agents using LangChain and LangGraph. https://www.rasikjain.com/contact/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.rasikjain.com/contact/ Name Email Message Send Message https://www.rasikjain.com/resume/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.rasikjain.com/resume/ Please click to download PDF resume: