react-query-tanstack

I would like to share my experience using React Query for Fetch, cache and update data in your React application. In one my project, the requirement was how we can avoid unnecessary API calls if the data is stale. That exploration lead to React Query.

My Observations:

//Component did mount
useEffect(()=>{
try{
//Handle the loader…

Today sharing out my experience on using the frameworks Gatsby JS and Next JS

Gatsby Vs NextJS. (Image Source Google Images)

Gatsby JS:

GatsbyJS is a static site generator. It performs pre-build and returns static files (HTML, CSS, JS) as a result. This means that the back end does the server-side job once on the build stage (besides cases when the client in the browser asks for API).

Features :

My Observations:


Photo by Igor Miske on Unsplash

Today I’m going to do a share out on the different ways to render a web application. There are mainly 3 ways: Client Side rendering, Server Side rendering and Static site generation.

Client Side Rendering:

Client-side rendering allows developers to make their websites entirely rendered in the browser with JavaScript. Instead of having a different HTML page per route, a client-side rendered website creates each route dynamically directly in the browser. This approach spread once JS frameworks made it easy to take. The advantage of Client-Side Rendering (CSR) is once the page loads all subsequent navigation within the site will…


Here sharing a codepen for recreating a audio player progress bar using HTML, CSS, JS and jQuery.

Checkout the code and try it.

Happy Coding!


Personal Website Preview

Today sharing my experience on creating my own personal website which is hosted on Github.

Website URL: https://aravishack.github.io

Since its a static website, used React JS with Hooks alone for creating it.

React Typed is the one external libraries used for creating the effect of the typewriter. Here is the link to the library :

For hosting on Github, I followed the following docs: https://gist.github.com/TylerFisher/6127328 and https://pages.github.com/

Happy Coding!


Here I'm sharing my experience on recreating a responsive accordion which I saw on the jeep official website.

This uses HTML5, CSS3, JavaScript and jQuery.

Check out the code and try.

Happy Coding!


Here sharing my experiences on recreating a feature where we are comparing two image. The code is available on https://codepen.io/aravi-pen/pen/WPEmga

We will have two images positioned one over the other and a splitter is placed on the center of the image. We have written different mouse handling events to handle this. Check out the code and try to create a preview.

Happy Coding!


Photo by Kelly Sikkema on Unsplash

Here sharing a preview of creating a picture puzzle using HTML5, CSS3, JavaScript and jQuery.


A Conversation chat bot understands the context of the conversation and can handle any user goal gracefully and help accomplish it as best as possible. This doesn’t always mean that the bot will be able to answer all questions but it can handle the conversation well.

Eva is a conversational chat bot, for doing interview. Sometimes it is hard to find a panel to have a discussion or interview with a candidate. Now this problem can be solved by Eva. It manages the engagement of human conversation with the convenience of non-human interaction.

Sharing the experience on creating a chat…

Aravind S

A <>er

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store