Forem: Vinit Gupta

Recreating the Dev Reaction Element using NextJS and Spring Boot

Vinit Gupta — Mon, 03 Mar 2025 02:48:52 +0000

I have always been fascinated by the reactions functionality (both UI and how it works) of this platform 🤯.

As a developer, I could not hold this curiosity for long and replicated this feature over the week.

This might look really simple, but there are a lot of steps involved. So as always let's dive into them 1 by 1.

0️⃣ Prerequisites

I am building this UI and functionality using

NextJS for frontend
TailwindCSS for Styling
Tanstack Query for query caching and optimizations
Spring Boot backend for API request handling
MongoDB to store and update reactions

You are free to choose what tech stack you want as the steps are not bound to any particular technology involved.

1️⃣ Building the UI

Starting with the simplest step, let's build the actual reaction button along with the different reaction emojis.

First to define the types that we are going to use :

Reaction Keywords and Emojis

The reactions will have a fixed set of values and the associated emojis. 2 type definitions are involved in this :


// reactions enum
export type ReviewReactionStringType = "helpful" | "insightful" | "funny" | "agree" | "love";


// emoji mapping
export const REVIEW_REACTIONS: ReviewReactionType[] = [
    { type: "helpful", emoji: "👍", label: "Helpful" },
    { type: "insightful", emoji: "🧠", label: "Insightful" },
    { type: "funny", emoji: "😂", label: "Funny" },
    { type: "agree", emoji: "🤝", label: "Agree" },
    { type: "love", emoji: "❤️", label: "Loved It" },
  ];

Once the above are defined, we can move forward to building the UI.

The Reactions Component

The reactions component takes in a few initialization data :

Reactions mapping defined above.
The reaction event handler.
User reactions made now or previously.
The total reactions map containing data for each reaction.

The Reaction List uses the user reactions data to show a visual representation that for the post, what reactions have been added by the user.

This is done keeping a map of the active reactions in the following format :

{
   love : true,
   insightful : false,
...
}

And this map is updated on every reaction click by the user(along with an API call using the event handler passed).

 const [activeReactions, setActiveReactions] = useState(
  Object.fromEntries(
    Object.keys(initialReactions).map((reaction) => [
      reaction as ReviewReactionStringType,
      initialUserReactions.includes(reaction as ReviewReactionStringType),
    ])
  )
);

  const handleClick = (reactionType: ReviewReactionStringType) => {
    // Immediately toggle the reaction in our local state
    setActiveReactions(prev => {
        return {
            ...prev,
            [reactionType] : !prev[reactionType]
        }
    });


    // Call the API
    onReactionClick(reactionType);
  };

The reaction count for each reaction is also displayed accordingly.

<ul className="menu menu-sm dropdown-content bg-base-200 top-8 left-6 rounded-box z-[1] mt-3 min-w-min p-2 flex-row flex-nowrap border border-slate-500 border-opacity-40 gap-6 text-3xl">
      {reactions.map((reaction: ReviewReactionType, index: number) => (
        <li 
          key={`${reaction.type}-${activeReactions[reaction.type]}`}
          onClick={() => handleClick(reaction.type)}
          className={`flex flex-col items-center justify-center
            px-2 py-0 rounded-md border 
            ${activeReactions[reaction.type]
              ? 'border-slate-300' 
              : 'border-base-200'} 
            hover:border-slate-300
            transition-all duration-200
          `}
        >
          {reaction.emoji}
          <span className={`text-sm`}>{reactionsMap[reaction.type]}</span>
        </li>
      ))}
    </ul>

The Custom Reaction Handler hook

The reaction handler function calls the following custom hook that uses React Query to call the API endpoint to toggling the reaction.

Note 💡 : One important design decision is to not keep a local state of whether the API call is for setting or un-setting a particular reaction. It is handled by the API.

Keeping the above in mind, what the reaction handler does is pass :

the entityId which is used to identify the Post on which the reaction is made,
the reaction made, and
the entityType which can be a Post or Comment(to be used in future).

Once the current request is completed, the reactions fetched for the post needed to be refetched. React Query provides a really useful method for handling this : QueryClient.invalidateQueries that takes in the Query Key for the post reactions(reaction-id) and refetches the data. This updates the total counts of the reactions for the post as well.

const useToggleReaction = ({
    entityId,
}:{
    entityId : string,
}) => {
    const queryClient = useQueryClient();
    const {sessionToken} = useGlobalStore();
    return useMutation({
        mutationKey: [`toggle-reaction-${entityId}`],
        mutationFn: async ({
            reactionType = "love",
            entityType = EntityType.POST
        }: {
                reactionType : ReviewReactionStringType,
                entityType : EntityType
            }) => {

            const token = sessionToken || queryClient.getQueryData(['access-token']);


            const toggleReactionData : ReactionData = {
                entityType,
                entityId,
                reactionType
            };

            ReactionSchema.parse(toggleReactionData);


            const headers = {
                "Authorization": `Basic ${token?.trim()}`,    
            }

            try {
            const toggleReactionResponse : AxiosResponse = await privateAccessClient.post('/reaction',toggleReactionData, {
                headers : headers    
            });

            const toggleReactionResponseData = toggleReactionResponse.data;

            queryClient.invalidateQueries({
                queryKey : ["reaction-"+entityId]
            })

            const toggleReactionResponseMessage : string = toggleReactionResponseData as string || '';

            return {message : toggleReactionResponseMessage, type : ResponseType.success};
        } catch (error) {
            // handle error
        }

        },
    })
}

The frontend is ready, but wait...

2️⃣ Reaction data design

After the view is done, we need to create the Controllers for reactions, which includes 2 endpoints : fetching the post reactions and toggling the user's reactions for that post.

But to be able to create these endpoints, we first need to create the data design for :

Reaction entity that will be stored in MongoDB ⛃.
Reaction toggle Request DTO.
Reaction fetch Response DTO.

Reaction Data Entity

To store the reactions in the Database, a reaction entity is used for every entity.
This works in a way like, for each entity (in these case, a post) has the following data in the reaction document :

The entityId and entityType for the current reaction document. In this case, entityId refers to the post ID and entity type is POST.
The Reactions map which stores the reactions for that post for all the users, with the User ID as the key and all reactions for that particular user in a set.
The Reactions count map which is used to store the total of each type of reaction for all the users.

📌 Since every time we fetch the reactions, it will be fetched using the entity type and entity ID, a compound index can be created using the @CompoundIndex annotation.

@Document(collection = "reaction")
@Data
@Builder
@CompoundIndex(name = "entity_idx", def = "{'entityId': 1, 'entityType': 1}")
public class Reaction {
    @Id
    private String id;

    private String entityId; // ID of the post, comment or any other entity
    private EntityType entityType; // type of the entity

    private HashMap<String, Set<ReactionType>> reactions;

    private Date lastModifiedOn;

    private HashMap<ReactionType, Integer> reactionCount;

}

Reaction Request and Response DTO

The reaction request requires 3 pieces of data (as the toggling is handled by the reaction service):

The Reaction type,
The Entity ID, and
The Entity Type (POST/COMMENT)

public record 
ReactionRequestDTO(
        String entityId,
        EntityType entityType,
        ReactionType reactionType) {
}

The reaction response is to have :

The Current User's reactions on the entity
Total reactions count
Reactions Map used to store the total of each type of reaction for all the users

public record ReactionsDTO(
        Set<ReactionType> userReactions, 
        long totalReactions, 
        Map<ReactionType, Integer> reactionsMap) {
}

Reaction repository DB Methods

Fetching the user's reactions along with the counts of total reactions for the entity, which can be done using MongoDB aggregations.

This aggregation:

Uses MongoDB's find operation with projection
The value parameter specifies the filter criteria (like WHERE clause in SQL)
The fields parameter specifies which fields to include:
- 1 means include the field
- The syntax 'reactions': { ?2: 1 } means "only include the entry in reactions map where the key matches the userId (third parameter)"

 @Query(value = "{ 'entityId': ?0, 'entityType': ?1 }",
            fields = "{ " +
                    "'id': 1, " +
                    "'entityId': 1, " +
                    "'entityType': 1, " +
                    "'reactions': { ?2: 1 }, " +
                    "'lastModifiedOn': 1, " +
                    "'reactionCount': 1 }")
    Optional<Reaction> findByEntityIdAndEntityTypeAggregated(
String entityId,                                                                     EntityType entityType,                                                                    String userId);

Once the data designs are ready, let's work on the real action.

3️⃣ Reaction Service

The service layer is where all the logical stuff goes on.
First up, is the fetching of reactions for the entity.

Fetch reactions for the entity

For a particular entity, the entity ID, the entity type and the user ID of the current logged in user is required.

The reaction service fetches the details according to the above data as required in the ReactionsDTO defined above.

public ReactionsDTO getReactions(EntityType entityType, String entityId, String userEmail){
        String userId = reactionUtil.encodeKey(userEmail);

        Reaction userReaction = reactionRepository.findByEntityIdAndEntityTypeAggregated(entityId,entityType,userId)
                .orElse(Reaction.builder()
                        .reactions(new HashMap<>())
                        .entityType(entityType)
                        .entityId(entityId)
                        .reactionCount(reactionUtil.initReactionsCount())
                        .lastModifiedOn(new Date())
                        .build());

        long totalReactionsCount = 0;
        for(Map.Entry<ReactionType, Integer> reactionEntry : userReaction.getReactionCount().entrySet()){
            totalReactionsCount += reactionEntry.getValue();
        }

        return new ReactionsDTO(
                userReaction.getReactions().getOrDefault(userId, new HashSet<>()),
                totalReactionsCount,
                userReaction.getReactionCount());
    }

This is relatively simple, compared to the toggle reaction service method below.

Toggling reactions

The toggleReaction method dynamically adds or removes a reaction while keeping storage efficient and counts accurate. While this seems complex, but breaking down into simpler steps help.

Retrieve or Initialize Reaction – Fetches the reaction entry; if absent, creates a new one with default values.
Toggle User Reaction – Adds the reaction if absent (toggle = 1), else removes it (toggle = -1).
Update Storage – Removes empty reaction sets to optimize memory.
Adjust Reaction Count – Updates the count, ensuring it doesn’t go below zero.
Save & Return – Updates the timestamp, saves to DB, and returns true. 🚀

The code for the above steps is as below :

public boolean toggleReaction(ReactionRequestDTO reactionRequestDTO, String userId){
        Optional<Reaction> optionalReaction = reactionRepository
                .findByEntityIdAndEntityType(reactionRequestDTO.entityId(),
                        reactionRequestDTO.entityType());
        // counter to update total reactions count for each type
        int toggle = 0;

        Reaction reaction = optionalReaction.orElseGet(() ->
                Reaction.builder()
                        .reactionCount(reactionUtil.initReactionsCount())
                        .entityId(reactionRequestDTO.entityId())
                        .entityType(reactionRequestDTO.entityType())
                        .reactions(new HashMap<>())
                        .lastModifiedOn(new Date())
                        .build());

        Set<ReactionType> reactionsSet = reaction.getReactions().getOrDefault(reactionUtil.encodeKey(userId), new HashSet<>());

        if(reactionsSet.contains(reactionRequestDTO.reactionType())){
            toggle = -1; // remove
            reactionsSet.remove(reactionRequestDTO.reactionType());
        }
        else {
            toggle = 1; // add
            reactionsSet.add(reactionRequestDTO.reactionType());
        }


        if (reactionsSet.isEmpty()) {
            reaction.getReactions().remove(reactionUtil.encodeKey(userId));
        } else {
            reaction.getReactions().put(reactionUtil.encodeKey(userId), reactionsSet);
        }

        HashMap<ReactionType, Integer> reactionsCountMap = reaction.getReactionCount();

        reactionsCountMap.put(reactionRequestDTO.reactionType(),
                Math.max(0, reactionsCountMap.getOrDefault(
                        reactionRequestDTO.reactionType(), 0) + toggle)); // add or delete based on user reaction added or removed
        reaction.setReactionCount(reactionsCountMap);

        reaction.setLastModifiedOn(new Date());

        reactionRepository.save(reaction);
        return true;
    }

4️⃣ Controller Layer

While the controller layer is the entry point for the above requests, not much should be going on in a controller function as per clean code principles.

So you can just look at these and these can be self explanatory :

@GetMapping
    public ResponseEntity<?> getReactionsForEntity(@RequestParam(name = "type") EntityType entityType, @RequestParam(name = "id") String entityId) throws BadRequestException {
        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();

        String username = authentication.getName();

        if(helper.isNullOrEmpty(entityId)){
            throw new BadRequestException("Reactions can be fetched for specific post/comment only");
        }


        ReactionsDTO reactionsDTO = reactionService
                .getReactions(entityType, entityId, username);
        ReactionsResponseDTO.ReactionsResponseDTOBuilder reactResDTOBuilder =
                ReactionsResponseDTO.builder();
        if(reactionsDTO.userReactions().isEmpty()){
            reactResDTOBuilder.message("No reactions found for user");
        }
        else {
            reactResDTOBuilder.message("Success");
        }
        reactResDTOBuilder.reactions(reactionsDTO);
        return new ResponseEntity<>(reactResDTOBuilder.build(), HttpStatus.OK);
    }

    @PostMapping
    public ResponseEntity<?> postReaction(@RequestBody ReactionRequestDTO reactionRequestDTO) throws BadRequestException {
        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();

        String username = authentication.getName();

        if(helper.isNullOrEmpty(reactionRequestDTO.entityId())){
            throw new BadRequestException("Entity ID is empty");
        }

        reactionService.toggleReaction(reactionRequestDTO, username);
        return new ResponseEntity<>(new ResponseDTO(
                HttpStatus.OK.getReasonPhrase(),
                "Reaction updated successfully"),
                HttpStatus.OK);
    }

5️⃣ Flow Diagram

All these steps can be understood in a simple diagrams as below :

Final Thoughts

While breaking down a feature from an existing website you love, seems tough but combined with a little perseverance and a little research helps you understand the level of engineering and thinking going on behind even the simplest of things.

Now everytime you click on that reaction button on Dev, you know somewhat of what is going on.

React Router DOM V6 Tutorial for Everyone

Vinit Gupta — Sun, 21 Apr 2024 14:32:39 +0000

For a Front-end application, one of the most important step is to define the routes and the pages that need to be shown to the user for the same.

The Old Way

Ages ago, when React router was not introduced, developers used window.location property to set the component to be displayed based on the conditions.

But, conflicted with the Thinking in React. React was introduced to prevent unnecessary page reloads.

For using the location property, the whole page had to be reloaded.



import React from "react"

import Login from "./components/Login"
import Profile from "./components/Profile"
import Home from "./components/Home"
import Dashboard from "./components/Dashboard"

const showHome = () => {
  if (window.location.pathname === "/") {
    return <Home />
  }
}

const showLogin = () => {
  if (window.location.pathname === "/login") {
    return <Login />
  }
}

const showDashboard = () => {
  if (window.location.pathname === "/dashboard") {
    return <Dashboard />
  }
}

const showProfile = () => {
  if (window.location.pathname === "/profile") {
    return <Profile />
  }
}

export default () => {
  return (
    <div className="ui container">
      {showHome()}
      {showLogin()}
      {showDashboard()}
      {showProfile()}
    </div>
  )
}

React Router DOM

React Router DOM makes routing a lot easier and more intuitive.

For the above application, let's convert it to use React Router DOM.

If you have a React application, just install react-router-dom using the command :



npm install react-router-dom

Once installed you are ready to use React Router in your application.

Select the location from where you want to enable routing. This is because there are certain components that are visible in all pages like the Navbar, Footer, etc.

Let's say you have a <Navbar /> and <Footer/> that stays on the screen on every page.

We can add the routing between these 2 components so that this is achieved :



<div className='app'>
      <Navbar />
      // Routing to be Added Here
      <Footer />
    </div>

`createBrowserRouter`

React router exposes this Router function to configure the routes before adding it to your application.

createBrowserRouter takes in an array of route configs that is used for matching routes to the components to be displayed.

Each route config takes in a few parameters like :

path : this is the actual path that will be used for matching and displaying of components to the user
element : The Component to be shown on the screen based on the path defined above > 💡 The above 2 are Mandatory arguments, but there are some additional arguments (which we will know in detail later in this article)
errorElement : This is the fallback component to be displayed to user in case of errors or Exceptions
loader : Each route can define a "loader" function to provide data to the route element before it renders.

Let's see a basic example of creating a browser router :



const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/profile",
    element: <Profile />,
  },
  {
    path: "/dashboard",
    element: <Dashboard />,
  },
  {
    path: "*",
    element: <NotFound />,
  },
])

This is how you define routes and the respective elements to be displayed.

🚨 Notice the * route - This is used to define the Custom Page to be displayed(in this case <NotFound /> for routes that are not defined instead of a Blank page to be shown to the User.

Now that the router is created, we need to tell React to use it for route matching.

`RouterProvider` Component

React Router DOM provides a RouterProvider component that is used to tell React to use the Router created above to display components at a certain location.

In our case, we are showing the Navbar and the Footer with all routes, so we add the <RouterProvider /> component in-between them.

The Router Provider takes in a router object as an argument to match the routes. So, we will pass the one we created above.

The code for the same :



function App() {


  return (
    <div className='app'>
      <Navbar />
      <RouterProvider router={router} />
      <Footer />
    </div>
  )
}

Here's the Demo 👇🏻

Protected or Authenticated Routes

Now that we have defined the different routes, we can Protect them based on User Authentication and Authorization.

We create a Custom Authentication Provider to wrap our whole Application.
Here, we mock the different cases based on Inputs :

Setting if the user is signed in.
The Role of the User : ADMIN or USER



import { createContext, PropsWithChildren, useContext, useState } from 'react';
export enum UserType {
  USER,
  ADMIN
}
interface User {
    id : number,
    name : string,
    role : UserType
}

const AuthContext = createContext<User | null>(null);

type AuthProviderProps = PropsWithChildren & {
  isSignedIn?: boolean;
  role : UserType
};

export default function AuthProvider({
  children,
  isSignedIn,
  role
}: AuthProviderProps) {
  // Uses `isSignedIn` prop to determine whether or not to render a user
  const [user] = useState<User | null>(isSignedIn ? { id: 1, name : "Vinit", role : role } : null);

  return <AuthContext.Provider value={user}>{children}</AuthContext.Provider>;
}

export const useAuth = () => {
  const context = useContext(AuthContext);

  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider');
  }

  return context;
};

NOTE : This is a Sample Custom Context Hook creation code. Check out this Amazing Blog by @miracool on how to use Authentication Context in React.

Now we can create a <ProtectedRoute/> component that checks if a User is Logged In. If not, redirects to /login route.



function ProtectedRoute({children} : PropsWithChildren) {
    const user = useAuth();
    const navigate = useNavigate();

    useEffect(()=> {
        if(user===null) {
            navigate("/login");
        }
    }, [user, navigate])
  return <>{children}</>;
}

I want the /profile and /dashboard Route to be accessible only if a User is Logged In. So I wrap these 2 with the Protected Route component inside the createBrowserRouter config :



{
    path: "/profile",
    element: <ProtectedRoute><Profile /></ProtectedRoute>,
  },
  {
    path: "/dashboard",
    element: <ProtectedRoute><Dashboard /></ProtectedRoute>,
  },

And voila, these 2 routes are only accessible to Logged In users.

But, we can go A STEP FURTHER with the `/dashboard` route and make it only accessible to `ADMINS`.

To do this, we create another component : <AdminRoute/> and check if the Logged In User is an Admin.

If Not, we redirect the user to a /contact-admin route, that Simply renders : Contact the Admin.



function AdminRoute({children} : PropsWithChildren) {
    const user = useAuth();
    const navigate = useNavigate();

    useEffect(()=> {
        if(user?.role!=UserType.ADMIN) {
            navigate("/contact-admin");
        }
    }, [user, navigate])
  return (
    <div>{children}</div>
  )
}

To make things more intuitive, we make the Protected Routes nested :



{
    path: "/dashboard",
    element: <ProtectedRoute><AdminRoute><Dashboard /></AdminRoute></ProtectedRoute>,
  },
  {
    path: "/contact-admin",
    element: <ContactAdmin />,
  },

Handling Errors 🚨

We are Humans. We do Mistakes.
There might be cases when there is an issue while Rendering a Particular Component.

At that point, we don't want the User to feel something like this :

This is where the errorElement argument in the Router Config object comes in.

If there is an Error in Rendering that particular Component, React router displays the Component you passed in.

So when I add the following in my <Home/> component :



function Home()
    throw new Error("Something")
}

I get the following page instead of Random Red Screens(also you can see the path if you follow the Arrow ↖) :

The code for the Config Object looks like this :



{
    path: "/",
    element: <Home />,
    errorElement : <Error/>
  },

👉🏻 You can add Custom Error Components for each of the Routes as per your Choice

Loading Data for Component

You might have to fetch some data to be used in the Component.
The best way to do is to Put the Logic the Component the Data is Needed.

But let's say there is some data fetching needed before the Component is Loaded.
This is where the loader argument comes in.

loader takes in a function that returns some data. Once the data is fetched, the component is loaded along with that data accessible using the useLoaderData() hook.

Let's say a User has some posts that need to be fetched from a server(I am using the Infamous Json PlaceHolder API to load some fake posts.

This is really simple to achieve using React Router.

The first step is to define a Utility Function to fetch the Data :



const fetchPosts = async () => {
  try {
    const posts = await fetch("https://jsonplaceholder.typicode.com/posts/");
    return posts
  } catch (error) {
    console.log(error)
    return  []
  }
}

And pass this function into the loader argument of the Route Config object :



{
    path: "/profile",
    element: <ProtectedRoute><Profile /></ProtectedRoute>,
    loader : fetchPosts
  },

Whenever the /profile route is hit in this case, the fetchPosts function is called and the Data is Parsed as a JSON.

Now, to use this inside my Profile component, all I have to do is use the useLoaderData() hook provided by React Router DOM and use it in my component :



const posts = useLoaderData() as Array<any>;
  return (
    <div>
      <div className='navbar'>
        <Link to={"/"} className='link mx'>Home</Link>
        <Link to={"/profile"} className='link mx'>Profile</Link>
        <Link to={"/dashboard"} className='link mx'>Dashboard</Link>
    </div>
      <h2>Your Posts</h2>
      {
        posts && posts.slice(0,10).map((post) => {
          return <div className='link'>{post.title}</div>
        })
      }
      </div>
  )
}

With React Router, you can do a lot of Customizations and achieve various Functionalities if you dive deeper, but this is the Gist of the Most of Important functionalities for React Router DOM.

Do check out their official Documentation for more explanations and guides.

And yes, do share if you like this Guide.

Tweets Scheduler Built using NextJS, Gemini API, Appwrite and Twitter API

Vinit Gupta — Mon, 25 Mar 2024 14:35:33 +0000

Yes, I built an application - Twidderly 🐥 (couldn't find something good) that will post Tweets on my behalf.
And the best part is that it doesn't just post random stuff.

💡 It converts my LinkedIn posts to tweets.

Let's see how I built this. But before that one thing : Do not misuse this build. I will be posting a guide to add one for your self.

A Sample before the actual process

What you will need?

Before actually getting into the code, I want to share what you will need to build the application.

npm installed on your system : I have used NextJS with Typescript to build Twidderly.
Appwrite Web App configured : I am using Appwrite Authentication and Database to store Tweets to be posted.
Gemini API Key : Gemini converts the LinkedIn post to Tweets and also generates 2 other tweets for each day.
Twitter (or X) API tokens and secrets : The most important part of this Application is to Tweet, using the API

The Setup Part

For the setup part, I will let you go through guides that helped me setup the project and the requirements easily.

⚙️ Setup NodeJS and npm on Windows and Mac

⚙️ Setup Typescript with npm and VS Code

⚙️ Setup Twitter API with NodeJS(works with NextJS API)

⚙️ Gemini API Setup

⚙️ Appwrite Setup (We only Need Authentication and Databases)

The Fun Part

Let's go through the fun part of the Application - Developing the Important Part of the Application

The Front End is built to do only 3 things :

Authenticate the User :

For this I used Appwrite Client to register and authenticate users before they can access the Post scheduling endpoint.

The Appwrite Client is exposed from the utilities/appwrite/index.ts file :

const getAppwriteClient = () => {
    const appwriteEndpoint : string = process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT!;
    const appwriteProjectID : string = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID!;
    // console.log(appwriteEndpoint,appwriteProjectID);
    const client = new Client();
    client
        .setEndpoint(appwriteEndpoint)
        .setProject(appwriteProjectID);
    return client;
}

export {getAppwriteClient};

This exposed client is used in the auth/login/page.tsx and auth/signup/page.tsx files for Authentication :

const handleLogin:FormEventHandler = async (e : FormEvent) => {
        e.preventDefault();
        const formData = new FormData(formRef.current!);
        const email : string = formData.get("email")?.toString() || "";
        const password : string = formData.get("password")?.toString() || "";
        // if(email!=="thevinitgupta@gmail.com"){
        //     return alert("You are not Authorized!")
        // }
        // console.log(email,password)
        setLoading(true);

        try {
            const client = getAppwriteClient();
           const account = new Account(client);
           const session = await account.createEmailSession(email, password);
           window.location.assign("/posts/create")
        } catch (error) {
            alert(error);
        }
        setLoading(false);
    }

Creating Posts

Once the user is Authenticated, the next part is the ability to create and schedule posts.
For scheduling, I am using Github Actions which I will explain in the last section.

For creating posts, I am using Appwrite and Gemini. Let's see how.

For the first step, I get the LinkedIn post from the posts/create/page.tsx file and then:

async function handlePost(event: FormEvent<HTMLFormElement>): Promise<void> {
        event.preventDefault();
        const formData = new FormData(formRef.current!);
        const post: string = formData.get("post")?.toString() || "";
        if (post.length === 0) {
            alert("Cannot Add Empty!");
            return;
        }

  . . .
}

Once I have the post, I need to first convert it to Tweets using the Gemini API route I create(we'll see it after this) and then added the different tweets to Appwrite Database storage :

async function handlePost(event: FormEvent<HTMLFormElement>): Promise<void> {
       . . .
        setLoading(true);
        try {
            const { data } = await axios.post("/api/gemini", {
                linkedinPost: post
            });
            const posts : Array<string> = data.split("|");
            // console.log(posts, typeof posts);
            let docIds : Array<string> = [];
            posts.forEach(async (tweet) => {
                const docId = await createDocument(tweet);
                if (docId === "failed") {
                    throw new Error("Not Created!")
                }
                docIds.push(docId);
            });

            alert("Posts create : "+docIds.length)
        } catch (error) {
            // console.log(error)
        }

        setLoading(false)
    }

Viewing the Currently scheduled Posts

Once your posts are scheduled, you can see the list of posts scheduled by you. You can also delete any post from the list and it is removed from the Database.

const getCurrentUser = async () => {
        setAuthLoading(true);
        try {
            const client = getAppwriteClient();
            const account = new Account(client);
            const session = await account.get();
            setUsername(session.name);
            setAuthLoading(false);
            getPosts(session.$id);
        } catch (error) {
            // console.log("error getting user")
            setAuthLoading(false);
            window.location.assign("/auth/login")
        }
    }
    useEffect(()=> {
        getCurrentUser();
    },[username])

I have also added the deletion function with each function that allows you to remove posts that you don't want to schedule :

const handleDelete = async (postId : string) => {
        const deletionResult = await deletePost(postId);
        if(deletionResult==="success"){
            const newPosts = posts.filter((post) => post.$id!==postId);
            setCurrentPosts(newPosts);
        }
        else {
            alert("Deletion failed!")
        }

    }

Now that the frontend is done, it's time to explore the code that is powering all of this.

The Process Flow

Before getting into the code, let's first understand the code flow :

User puts the LinkedIn post, which is sent to the api/gemini API route.
At this point, the post is sent to Gemini with the following prompt :

Analyze the provided text and generate 3 concise and engaging Twitter posts that capture the key points and essence of the content, suitable for Twitter's character limit (280 characters) and audience. Each tweet should be a complete thought and avoid cliffhangers. Maintain a consistent non-formal voice and tone throughout the tweets. Do not change the tone of the Post. DONT ADD ANY EXTRA TEXT LIKE TWEET 1, TWEET 2, etc. Just give 3 tweets, each separated by 2 newlines

The Response returned by Gemini is divided into 3 parts and sent to the createDocument() function that adds these to Appwrite Database

Code for the above steps

The api/gemini route uses the function exposed by utilities/gemini/index.ts file that processes the posts :

async function convertToTweet(linkedInPost : string, geminiApiKey : string) {

    // console.log(geminiApiKey);
    const model = getGeminiModel(geminiApiKey);

  const prompt = "Analyze the provided text and generate 3 concise ... Just give 3 tweets, each separated by 2 newlines"

  const result = await model.generateContent([prompt,linkedInPost]);
  const response = await result.response;
  const tweet = response.text();
  const tweetSeparator = /\n\n/; // Two newlines for separation

const tweets = tweet.split(tweetSeparator);
  // console.log(tweets);
  return tweets.join("|");
}

The posts are added to the Appwrite Database using a for-loop which calls the below function for each post from the posts/schedule/page.tsx front-end file :

const createDocument = async (tweet : string) : Promise<string> => {
    const dbId : string = process.env.NEXT_PUBLIC_APPWRITE_DATABASE!;
    const collectionId : string = process.env.NEXT_PUBLIC_APPWRITE_COLLECTION!;
    const client = getAppwriteClient();
    try {
        const account = new Account(client);
        const user = await account.get();
        const db = await new Databases(client);
        const docRef = await db.createDocument(dbId,collectionId, ID.unique(), {
            scheduledOn : new Date(),
            post: tweet,
            owner : user.$id
        }, [
            Permission.write(Role.users()), // only users can write to documents
            Permission.read(Role.any()),                  // Anyone can view this document
            Permission.update(Role.user(user.$id)),      // Current user can only Update the Document
            Permission.delete(Role.user(user.$id)),     // Current user can only Delete the Document
        ]);
        return docRef.$id;
    } catch (error) {
        // console.log(error);
        return "failed";
    }

}

The create document takes in 5 parameters :

DatabaseID
CollectionID
A Unique ID for the new Document
The actual Document, where I have added the Owner of the Document
Permissions array, without with the Document is not added.

🚨 You can understand more about Document Permissions in Appwrite Here 🔗

Once these posts are added, you can relax.

Because the Posting is done using Github Scheduled Actions as we see below

The Tweeting API

Until now we saw how to setup the whole App to be able to create Posts for a User. Now for the main part : The Tweeting of Tweets on Twitter or The X-ing of X-es on X.

Once you have setup the X-Developer Options and installed the following npm library :

npm install twitter-api-v2

We are ready.

Posting to Twitter is as simple as this :

Setup the Twitter Client :

const getTwitterClient = () => {
    // console.log("Hello")
    const apiKey : string = process.env.TWITTER_API_KEY || "";
    const consumer_secret : string = process.env.TWITTER_API_SECRET || "";
    const access_token : string = process.env.TWITTER_ACCESS_TOKEN || "";
    const access_token_secret : string = process.env.TWITTER_TOKEN_SECRET || "";
    const bearerToken : string = process.env.TWITTER_BEARER_TOKEN || "";
    const client = new TwitterApi({
        appKey : apiKey,
        appSecret : consumer_secret,
        accessToken : access_token,
        accessSecret : access_token_secret
      });

      const bearer = new TwitterApi(bearerToken);

      const twitterClient = client.readWrite;
      const twitterBearer = bearer.readOnly;

      return {
        readWrite : twitterClient,
        readOnly : twitterBearer
      }

}

Send the Tweet

const postTweet = async ({post} : {post : string}) => {
   const {readWrite} = getTwitterClient();
   try {
    const response = await readWrite.v2.tweet(post);
    return response.data;

   } catch (error) {
    // console.log(error)
    return error;
   }
}

That's it for the actual tweeting.

But for scheduling the Posts, I need to expose an API that I will call using Github Actions at certain times of the day.

The API does 3 things :

Check if the Request is Valid.
Checking the Time of Day
Posting a Tweet based on the Time : LinkedIn Tweet, Programming Joke or Tech News.

The Code is pretty self explanatory as you can see below :

export async function POST(req : NextRequest){
    const request = await req.json();

    const {encryptedData} = request as TweetBody;
    if(!encryptedData) {
        return new Response("Invalid Request", {
            status : 403,
        });
    }
    const {userId} = decryptData(encryptedData);
    if(!checkIfUserAllowed(userId)) throw new Error("Invalid User")
    const currentHour: number = new Date().getHours();
    try {
        // Switch based on time 
        if(currentHour>=8 && currentHour<9) {
            await createFromTechJoke()
        }

        else if(currentHour>=14 && currentHour<15){
           await createFromTechNews();
        }

        else {
            await createFromUserPosts(userId);
        }

        return new Response("Done!!", {
            status : 200,
        });
      } catch (error) {
        return new Response("Not Tweeted!!", {
            status : 500,
        });
      }
}

Scheduling using Github Actions

One of the best features of GitHub as a service are the Actions, which we can use to schedule tasks.

We can use cURL to call the API along with a Secret used to identify if it's a valid Request.

The action is Scheduled to run everyday 5 times which is defined as :

on:
  schedule:
    - cron: '0 4,8,11,14,16 * * *' # Scheduled at 10am, 2pm, 5pm, 8pm, and 10pm IST

The complete tweet.yml file is as below :

name: Daily Tweet Scheduler

on:
  schedule:
    - cron: '0 4,8,11,14,16 * * *' # Scheduled at 10am, 2pm, 5pm, 8pm, and 10pm IST

jobs:
  post-tweet:
    runs-on: ubuntu-latest

    steps:
      - name: Post Tweet
        run: |
          curl -X POST https://twidder.vercel.app/api/twitter \
          -H "Content-Type: application/json" \
          -d '{"encryptedData": "${{ secrets.TWITTER_POSTER_KEY }}"}'

📹 You can check this video out for the Complete Explanation on Setting up actions for your Repositories : GitHub Actions

I have not updated the README.md file yet, where I will be adding the setup instructions after this to configure Twidderly for your own posts.

Do star the Twidderly ⭐️ to get the Update. Also, I am open to any contributions to make the Application Better.

The Last Event Loop Guide you will Ever Need

Vinit Gupta — Sun, 17 Mar 2024 04:45:51 +0000

Yes, I said it. This is it.

💡 Read this Guide end to end to understand exactly how the Dreaded Event Loop in Javascript or NodeJS works.

Step 1️⃣ : Synchronous and Asynchronous

As a developer, you need to understand every code you write needs to be executed either Synchronously or Asynchronously.

Synchronous

Synchronous execution is when your program is executed line by line.

Take this code snippet for example :

console.log("Entry 👇🏻");

function add(firstNumber, secondNumber){
   return firstNumber + secondNumber;
}
console.log("Function Called : ",add(2,5));
console.log("Below function 🧐");

The output is :

Entry 👇🏻
Function Called : 7
Below function 🧐

Pretty simple right? The code follows a top to bottom approach of execution, with the function returning the sum immediately.

Let's take a different scenario.

Asynchronous

Asynchronous code is simply put to work on a separate context for execution. This doesn't mean that it is not being executed.

💡 Asynchrony, in computer programming, refers to the occurrence of events independent of the main program flow and ways to deal with such events.

This essentially means tasks that can be delegated away from the main thread of execution.

Let's take an example of reading data from a file using NodeJS.

const fs = require("fs");
console.log("Entry 👇🏻");

fs.readFile('sample.txt', 'utf8', (err, data) => {
    if (err) {
      // Handle error if file reading fails
      console.log("Error reading file");
    } else {
      // Invoke callback with file content
      console.log("File reading done. Contents 👇🏻\n",data);
    }
 });

console.log("Below function 🧐");

Can you guess the Output?

Let me help you.

Entry 👇🏻
Below function 🧐

File reading done. Contents 👇🏻
Hello, I am the content in sample.txt file!!

Can you spot the difference?
This is what asynchronous programming helps us do.

File reading is a CPU heavy process(if for small files, this takes more time than a simple program execution).

But this is not the reason that the contents are displayed after the console.log after the file reading method.

This happens because NodeJS defines fs.readFile as an asynchronous task. And NodeJS gives priority to Synchronous tasks over Asynchronous tasks.

Step 2️⃣ : Understanding the NodeJS environment

NodeJS is a Library built to run Javascript outside of the browser.

We will not get into the details of why and how this is done.

But let's get into how NodeJS handles the execution of a program.

NodeJS internally has 3 main parts that handle the execution of a Javascript program.

For the above 2 programs, let's see individually how NodeJS handles execution internally using the images below(for Better Understanding) :

First Program :

To understand the working of the second program, read the section below with the simulation

Step 3️⃣ : Understanding the Thread Pool and Callback Queue

For all the non-blocking code, it passed to the Thread Pool implemented using LibUV library.

The threads are tasked with executing the Asynchronous tasks outside of the main thread. This helps NodeJS execute so many network calls at once, even though Javascript is a Single-Threaded Language.

The Threads process the tasks and pass the callbacks into the callback queue.
The Callbacks are queued according to a certain priority, which we will discuss in the below sections.

💡 By default there are 4 working threads in Libuv. But you can increase them upto : MAXIMUM NO. OF CPU CORE AVAILABLE which you can get using the code below :

const max = os.cpus().length;

Callbacks are picked up by the Event Loop and pushed onto to the Call Stack of Javascript, ONLY WHEN THE CALLSTACK IS EMPTY.

Step 4️⃣ : The Event Loop

The Event Loop is nothing but a scheduling algorithm.

Yes, it is that simple.

A scheduling algorithm that defines which callbacks are to be prioritized over the others.

But before understanding the order, understand that there are 6 types of callbacks, based on the calling instance.

6 Types of callbacks :

Timer Callbacks : You might have used the setTimeout and the setInterval methods.
I/O Callbacks : Input/Output operations are the File reading and Network based operations.
Check Callbacks : There is a NodeJS specific function : setImmediate used to execute a Callback as soon as the current event loop finishes.
This is basically like the Hooks in ReactJS, which helps us hook into the lifecycle of NodeJS execution.
Close Callbacks : For the I/O operations, we have event listeners to listen to the closing event. Once the event is fired, these callbacks are defined to be executed.
Promise Callbacks : When promises are invoked, we supply callbacks to be called based on the result of the promise.
Next Tick Callbacks : Next Tick is a function native to NodeJS modules (process.nextTick()) used by developers in real-time applications every day to defer the execution of a function until the next Event Loop Iteration.

The Event Loop schedules the callbacks, which is visualized in the following diagram :

I know it might be overwhelming, but is simple.

The steps are as follows :

Check if callstack is Empty, then Proceed as follows.
Callbacks in the Microtask Queue which is divided in 2 parts :
i) Execute the nextTick callbacks.
ii) Execute the Promise callbacks.
Callbacks in the Timer Queue, but there is a catch here.

🚨 After every callback in the Timer Queue is executed, REPEAT STEP 2(Microtask Queue) before moving to next callback in Timer Queue.
Execute callbacks in the I/O Queue.
REPEAT STEP 2 (Microtask Queue)
Execute Callbacks in the Check Queue i.e. the setImmediate callbacks, but there is a catch again.

🚨 After every callback in the Timer Queue is executed, REPEAT STEP 2(Microtask Queue) before moving to next callback in Timer Queue.
Execute all the callbacks in the Close Queue
REPEAT STEP 2 (Microtask Queue)
Check if there process needs to repeated. If NOT 👉🏻 then EXIT.

This is the Event Loop steps simplified.

But we are Developers. Of-course we need examples.

So here are a few links which you can use for examples :

Next Tick and Promise Queues
Event Loop
The Original Video on Event Loop

youtube.com

Google Gemini Based AI Chatbot using NextJS

Vinit Gupta — Sun, 25 Feb 2024 05:38:06 +0000

Google recently released Gemini Pro - their Ultimate answer to ChatGPT 4.

And I, as an eager bird, tried it.

And guess what, added it to my Portfolio to answer any questions by recruiters!

But wait, I didn't add it directly to my Portfolio.

Step 1️⃣ : Terminal Chatbot

First, I had to test it out to see how it works. For that I used a terminal based app.

For this, I created a skeleton Node app using the good old :

npm init -y

Then I had to install 3 libraries from `npm` :

@google/generative-ai : This is the official library from Google that exposes the methods required to connect with the Gemini Pro API with the API key.
prompt-sync : Since, it was a chatbot, I needed to read the user input from the terminal. After trying out some ways, I found this library. It allows you to read the input by the user and use it as a string.
chalk(optional) : This is another cool library that let's you do some colorful console logs while on the terminal. This is optional, but I used it to make the UI interesting.

Just copy and paste the following to install the above :

npm i @google/generative-ai prompt-sync chalk

Now, create a chat.mjs file that will do the whole talking.

I know all of you are reading for the NextJS path, so I will not take much of your time. I will add the code below, you can check out the explanation here : Terminal Chatbot

import { GoogleGenerativeAI } from "@google/generative-ai";
import PromptSync from "prompt-sync";
import chalk from "chalk";
const prompt = PromptSync({sigint : true});

chalk.level = 1;


const genAI = new GoogleGenerativeAI('API_KEY');
const initialized = false;

function initializeModel(){
  const model = genAI.getGenerativeModel({ model: "gemini-pro"});
  // console.log(model)
  const chat = model.startChat({
    history: [
      {
        role: "user",
        parts: `You are Sam, a person I hired to chat in place of me to provide information about Vinit based on the following. I want you to go through my resume I will insert below and answer the questions of based on my resume and project details any recruiter that is interacting with you. I also want you to go through the Links I will provide and answer based on the information you get through those links as well. Be a little mix of casual and formal while interacting with the recruiter, also ask for the Email of the recruiter for me to contact them if they are willing to consider me for hiring into their organization. Here is my resume : Vinit Gupta
        Portfolio | Leetcode | Linkedin | Github EXPERIENCE
        Tata Consultancy Services, Kolkata — Java Developer October 2023 - PRESENT
        +91 83890732221
        thevinitgupta@gmail.com
        .
.
.
% increase in user retention.
        ● Utilized NextJS, TailwindCSS, and Appwrite backend to optimize user experience, reducing page load times by 40% and boosting overall user satisfaction.

        Here are links to the websites that I want you to go through :
        https://github.com/thevinitgupta/
        https://dev.to/thevinitgupta/
        https://leetcode.com/thevinitgupta/

        Keep the limit of your answers to less than 100 tokens
        While asking for the recruiter for their email, ask for their consent to sharing their email in a formal similar to the following : Would you like to hire me? If yes, I would like to have your email so I can contact you with further details about me.`,
      },
      {
        role: "model",
        parts: "Great to meet you. What would you like to know about Vinit?",
      },
    ],
    generationConfig: {
      maxOutputTokens: 350,
    },
  });
  return chat;
}

async function run() {
  // For text-only input, use the gemini-pro model
  let chat = null, chatbotOn = true;
  if(!initialized){
    chat = initializeModel()
  }
  console.log(chalk.cyanBright("Hi, I am Sam - Vinit's Virtual Assistant."))

  while(chatbotOn){

    const msg = prompt(chalk.greenBright("What do you want to ask about Vinit?  --->  "));

    const result = await chat.sendMessage(msg);
    const response = await result.response;
    const text = response.text();
    console.log(chalk.yellowBright("Sam : "),chalk.blueBright(text));
    const promptResponse = prompt(chalk.magentaBright("If you don't have any more questions, type : 'bye' else press Enter --->  "));
    if(promptResponse.toLocaleLowerCase()==="bye") {
      chatbotOn = false;
      console.log(chalk.redBright(`
      BBBBB   Y     Y   EEEEE
      B    B   Y   Y    E
      BBBBB      Y      EEEE
      B    B     Y      E
      BBBBB      Y      EEEEE
      `))
    }
  }
  return;
}

run();

Step 2️⃣ : Building the UI

I will not lie here, I did not build the whole Chatbot UI myself. I asked Gemini itself to help me write the code for the Chat window.

I had to make some tweaks to match it to my UI design and also logically there were some issues.

That's what AI is for, right? 😉 It now looks like this 👇🏻

Step 3️⃣ : Adding the API Integration

The next step was to add the actual API interaction with Gemini API.
At first, I used directly linked the front-end with the Gemini API. But this is not a good practice.

Supposedly, someone tries to crash your system. You won't be able to rate Limit the app directly from the front-end.

But that is possible with middlewares in the backend.

For building your own API to connect with the Gemini API, create a file that handles the request.

For NextJS, we will be using the below code :

import { initializeChat, sendMessage } from "@/helpers/gemini";
const firstMessage = `You are Sam, a person I hired to chat in place of me to provide information about Vinit based on the following. 
.
.
.
If yes, I would like to have your email so I can contact you with further details about me. Respond to this message only with : Hi, I am Sam. How can I help you today about Vinit?`
export default async function handler(req, res) {
    // console.log(req)
    if(req.method==='POST'){

        const {message, conversation} = req.body;
        if(!conversation) {
            console.log("New Conversation!")
            const newConversation = initializeChat(firstMessage);

            return res.status(200).json({
                message : 'Hi, I am Sam. How can I help you.',
                conversation : newConversation
            });
        }
        else {
            const response = await sendMessage(message, conversation);
            return res.status(200).json(response);
        }
    }
    else {
        res.send("Cannot GET!"); // keep the endpoint as POST only
    }
}

The Logic is simple for the above code :

Separate the actual functions in a separate file inside helpers/gemini.js to keep the code modular.
Check if Request has a conversation object. If not, it is a new conversation. Call the initialization function.
If not a new conversation, continue the chat by sending the message.

The `helper/gemini` file exports 2 functions as below :

import { GoogleGenerativeAI } from "@google/generative-ai";
let conversation = null;
export function initializeChat(message){
    const geminiApiKey = process.env.GEMINI_API_KEY;
    const model = new GoogleGenerativeAI(geminiApiKey).getGenerativeModel({ model: 'gemini-pro' });

    const initHistory = [
        {
          role : 'user',
          parts : [message]
        },
        {
          role : 'model',
          parts : 'Hi, I am Sam. How can I help you.'
        }
      ];
    conversation =  model.startChat({
      history : initHistory,
      generationConfig: {
        maxOutputTokens: 350,
      },
    });
    conversation._apiKey = null;
    return conversation;
}

export async function sendMessage(message){
    const geminiApiKey = process.env.GEMINI_API_KEY;
    console.log(geminiApiKey)
    const response = {
        text : 'Something went wrong',
        conversation : null
    }
    if(!conversation) {
        console.log('Conversation Eror');
        return response; 
    }

    try {
        conversation._apiKey = geminiApiKey;
        const result = await conversation.sendMessage(message);
        response.text = await result.response.text();;
        response.conversation = conversation;
        return response;
    } catch (error) {
        response.conversation = conversation;
        return response;
    }

}

🚨 NOTE : For the API, create a folder as pages/api for the client to find the API routes.

Step 4️⃣ : Handling Chat Interactions

Now that you have build your API, it's time to call it from the client side.

To display the chat, I am maintaining a state called :

chatHistory that is updated every time a new response is received from the API.

const handleChatInput = async () => {
const message = messageInput;
if(messageInput==='') return;

else {
  setLoading(true);
  const apiResponse = await axios.post('/api/message', {
    message,
    conversation : conversationObject
  });

  const apiData = apiResponse?.data;
  if(apiResponse.status===403) {
    updateChatHistory(apiData?.text);
    return;
  }
  updateChatHistory(apiData?.text);
  setMessageInput('');
}
}

// Send message to chatbot
const updateChatHistory = async (message) => {

const newHistory = [
  ...chatHistory,
];

newHistory.push({role : 'user', parts : [messageInput]})
newHistory.push({role : 'model', parts : [message]});
setChatHistory(newHistory);
setLoading(false);

};


- Then mapping it to display the messages with different colours based on the roles :
```js
<div className='flex flex-col gap-2 w-[23rem] h-96 overflow-y-auto snap-y'>
            {/* Render chat history */}
            {chatHistory.map((message,index) => (
              <div key={message.role+index} className={`text-xl ${message.role === 'user' ? 'text-fuchsia-500' : 'text-cyan-300'} snap-end`}>
                {`${message.role === 'user' ? 'You' : 'Sam'} : ${message.parts}`}
              </div>
            ))}
            {loading && <div className='text-center'>Loading...</div>}

          </div>

And voila, you Gemini based Chatbot is ready to help recruiters get you your Job!!

I would love to know how you are using Gemini in different sections of your website.

Check out my Portfolio to see the live example and code on my Github;

Preventing Multiple Failed Input Attack using Redis and NodeJS

Vinit Gupta — Thu, 25 Jan 2024 06:00:00 +0000

There might have been times when you have failed to login into a website due to wrong username/email and password combinations.

Well, you might not know that this is a very common way of attacking your web application or server.

This is known as Brute Force attack.

Brute Force Attack 🚨

A brute-force attack is an attempt to discover a password by systematically trying every possible combination of letters, numbers, and symbols until you discover the one correct combination that works.

If your web site requires user authentication, you are a good target for a brute-force attack. So how do we prevent this?

Preventing Brute Force Attacks 🤯

For every attack, there is some way of preventing it. Similarly for brute force attacks there different ways to ensure that your application is not vulnerable to simple attacks.

Asking the user to not use words or phrases directly related to them in the password.
Asking the user to not use their Data of births since these are publically available.
Warning the user to not use Dictionary words or even checking if they using(based on the level of security needed).
Making the passwords more complicated by requiring usage of special characters and both upper and lower case combinations.

But if the user does not follow the above rules, we as developers are 👉🏻 BURDENED WITH THE GLORIOUS PURPOSE 👈🏻 of safeguarding the user's data and our own services.

So let's explore how the implement one such counter measure.

The Idea 💡

While some websites prefer blocking the IP or the user completely, unless a manual action is taken, I would not since the sensitivity is not the much.

A better thing would be to slow down the IP to prevent brute force attack.

For this, blocking the IP for 60 seconds in case of 5 wrong attempts within 60 seconds is enough. So I decided to use Redis as a fast in-memory solution to implement this without causing too much trouble for the user.

Working of this architecture 👇🏻

Let's implement this now.

Step 1 : Setup Redis server

Redis is an in-memory caching service that can be used in 2 ways :

Same server as the actual backend
Using the Redis cloud service

For me, I decided to go with the cloud service as it is free to use upto a certain limit.

To setup your service, head on to : Redis Cloud Console and you will see multiple options to create your account.

Once you sign up, you will get to a page like this. Fill your details and click on create free database :

Now, select the location of database closest to your location and hit let's start free.

And after some Redis magic, your free database is created!!

Click on the Connect button to open a section that looks like this :

Clicking on copy will get the code to connect with this database from your NodeJS server.

Step 2 : Setup NodeJS with Redis

To start using this Redis database, you first need to install Redis in your NodeJS server.

I am using Redis version 4.6.12 while writing this. Run the following command to install redis :



npm i redis

Now create a new file with the following code in the utilities folder :



import { createClient } from 'redis';

const getRedisClient = () => {

let password = "", host = "", port = -1, client = null;
try {
    // console.log(process.env.REDIS_PASSWORD,process.env.REDIS_PORT,process.env.REDIS_URL)
    password = process.env.REDIS_PASSWORD;
    host = process.env.REDIS_URL;
    port = parseInt(process.env.REDIS_PORT);
    if(Number.isNaN(port)) throw new Error("Invalid PORT")
    client = createClient({
        password: password,
        socket: {
            host: host,
            port: port
        }
    }).on('error', err => console.log('Redis Client Error', err))
    .connect();
} catch (error) {
    console.log(error)
}
    return client;
}

export default getRedisClient;

🚨 Remember to always store credentials in .env file and import from the file to use.

In the above code, you can see the most of the code is copied from the Cloud Setup page. I only put the code in a try-catch block and use secure strings from Environment file.

Also, I have made the connection function to call only when needed and not keep it on every time the server is running. This prevents data leaks.

Step 3 : The Working Code

Now that the setup is done, head on to the Login controller.

Here we will write the code for the following steps ;

Get the IP address of the user from the Request object
Check if the IP is already blocked for the time. If so, throw and error.
If not, check if the credentials are correct. If validated proceed with the refresh token creation.
If not, use Redis to create and store the number of failed login attempts.

The code the same is :



    const ipObject = req.socket.address() as { address: string, port: number, family: string };
    const ipAddress = ipObject.address
    console.log("ip :", ipAddress);
    const client = await getRedisClient();
.
.
.
.
const salt = user.authentication.salt;
        const hashedPassword = await maskPassword(salt, password);
        if (hashedPassword != user.authentication.password) {
          const requestsMade = await client.incr(ipAddress)
          let ttl = -1;
          if (requestsMade === 1) {
            await client.expire(ipAddress, 60);
            ttl = 60;
          }
          else {
            ttl = await client.ttl(ipAddress);
          }
          if (requestsMade > 5) {
            throw new CustomError(
              "Too many attemps",
              503,
              "Validation Error",
              {
                ttl
              });
          }

The getRedisClient() function is the one we created earlier. It contains functions provided by Redis, which includes :

incr() that takes in a key-value pair and checks if the key exists. If key exists, it increases the previous value by 1 and if not, first creates key with value 0 and increases by 1.
expire() which is used to set the duration of expiry for the key provided.

There you have it, a method of preventing the user from using a Brute Force Attack.

If you like to know more about securing your websites from different attacks, I working on a whole series to securing a Web Application. Follow me for upcoming posts on Refresh Tokens and Access Tokens followed by other ways of securing web applications!!.

Application Security 101

Vinit Gupta — Thu, 14 Dec 2023 13:59:42 +0000

Most developers and companies believe their applications to be secure and understand the importance of security.

However year after year they continue to push vulnerable code into production.

In order to avoid these pitfalls and improve the overall security of our applications we need to understand what application security is all about.

What is Application Security?

The first thing to understand here is that by application we mean Web, Mobile and Enterprise Applications.

Application security means means the Software Building and Deploying are protected from dangers.

It involves taking necessary steps through out the project lifecycle to ensure and prevent malicious actors from accessing any part of your data, confidential or non-confidential.

Why is it important?

In simple terms, it is like placing smoke detectors throughout our code and different software to alert us about vulnerabilities found or issues in the code.

We need digital locks so that people who are pretending to be legitimate users do not gain access to our data, or worse destroy it!

Suppose your data servers are hacked and the hackers are demanding Bitcoins to giving the access back.

You wouldn't want that right??

Well, that is why creating a secure application is important.

6 Pillars of Application security

Although every app is different, and require different levels and types of security, these can be broadly classified into 6 different types of practices and methods :

Authentication and Authorization

Authentication is about identifying you within a system, that is you are a legitimate person and not someone or a system faking to be someone else.

Authorization is about how much access you have as a User, which basically means that scope of data visible to you.

A simple example would be an app like Whatsapp.

You create your account using your name and mobile number. To prove that you are actually a real user with a valid mobile number, you receive an OTP. This is Authentication
Now, when you are logged in, you can access your own message but you cannot access other users' messages. This is because You are NOT❌ Authorized to see their messages.

Since, authentication and authorization work together, they are referenced together.

Data Processing

Data processing can also be thought of as Input Handling. This basically means that when users are entering data into your system, they do so in a way that your expectations are met.

An example is when users are entering an email, it needs to be of the form :

You don't expect it to be something else like Code or a script that could potentially expose your data. This is called Cross Site Scripting or XSS attack.

You need to make sure that users are not able to do this in forms or in any other way.

You also need to make sure that this doesn't happen with data coming from other sources as well.

Encryption

Now, encryption can mean a lot of different things in different aspects.

In simple terms, and maybe I would be oversimplifying things a little bit here :

Encryption means hiding information and locking it in such a way that you cannot access it unless you have the right key.

Suppose your data has been breached somehow. If you would have stored the password after encryption, the hacker would not be able to fake someone's identity.

You would use an algorithm with a specific key to transform the data into a form which is not Human Readable 🕵🏻‍♂️.

Logging

Yes, I know. Most of you reading this would be saying :

"How logging errors and issues would make an application secure??"

You're right. It wouldn't.

Not directly.

Once an issue has been logged, it can be monitored and analyzed. And with the help of this, future breaches due to issues could be reduced.

Testing

Testing consists not just of ensuring that the functions and operations within your code are behaving as expected, but also to handle the unexpected scenarios too.

But that's just one area of testing.

Testing also includes : Security Testing

An example of security testing is Penetration Testing. It involves having security researchers and experts attempt to break into your applications periodically, to ensure that it is still safeguarded against these attacks.

This can be cumbersome sometimes if done manually, but necessary.

Full Stack Application with Bun, Appwrite And NextJS

Vinit Gupta — Sat, 14 Oct 2023 14:42:51 +0000

You might have heard of Bun and Appwrite recently.

Bun is a new, faster alternative to NodeJS and NPM.
And Appwrite just launched their Cloud Version, which is a cool and easy-to-configure alternative to Firebase.

So, let's look at how to build a really fast, modern full stack application with :

NextJS, Bun, Appwrite And TailwindCSS

I had built this typing practice website earlier : Typr

It's been 2 years, and it's time to give it an upgrade!!

Typr - Modern Typing Practice built with the power of Appwrite

The first version above, did not have any way to track your progress based on an account. And of course, at that time Neomorphic designs were the trend. And I built it using HTML, CSS and Vanilla Javascript.

But the Typr 2.0 has all the features that were missing earlier.

And how did I build it?

Continue below to find out!! 🤯

Using Bun to create NextJS App

Yes, you read that right! The create-next-app works with Bun. Just use the --use-bun flag :



npx create-next-app@latest typr-next --use-bun

And you use the blazing fast speeds of bun ⚡️.

Choose the options according to you :

You will see a bun.lockb file which is used to store the packages details and their metadata so that when the repository is cloned, the dependencies are installed faster.

The Main Pages

Since I am creating a typing practice website, the most important page is the practice page itself. Naturally, I created it first.

I used API Ninjas to get a few endpoints :

Quotes
Facts
Jokes To create random texts from the real world so users can get used to typing real words and sentences.

A really important feature in the typing page is updating UI as the user types to display what he has typed till now.

For this I created a separate component and passed in 2 parameters :

Typed Length : This sets the length of the text that needs to be highlighted.
Original : This takes in the original string that is being typed.

I divide the original into 2 parts : TypedString and UntypedString and display them in different colors :




export default function TyprDisplay({
    text,
    typedLength
}) {
    if (typeof text !== "string") return null;
    const activeText = text.substring(0, typedLength);
    const untyped = text.substring(typedLength);
    return (
        <div className='w-full'>
            <span className='text-white'>{activeText}</span>
            <span className='text-zinc-500'>{untyped}</span>
        </div>
    )
}

And the practice page has some more components like : errors, typed(which is the typed string), score calculator, etc.

Check out the code here(fairly simple to understand).

Appwrite Setup

I know most of you have been waiting for this. So let's dive into Setting up Appwrite Cloud for the App.

1. Head on to : Appwrite Cloud ☁️ and create your account.

Once you have created your account and logged in, you will see a page like this :

Note : You won't see projects, you will see the create project button in the top right corner.

2. Click on the `Create Project` button

Select the Empty Project option and give a name.

In the next screen, you will see platforms that you would like to create for :

Once you select the platform, follow the guide Appwrite provides for that platform.

3. Hostname and Installation 🛠️

The Setup Guide has the first page as below :

The important thing to note here is : The Hostname during development should be localhost and for different domains, only add the path.domain without the https or subdmains

To install in your Web Projects (ReactJS, NodeJS, NextJS) :



bun install appwrite

The Setup is now complete and you can use Appwrite cloud in your Project.

Using Appwrite for Authentication 🔐

For using Appwrite Cloud in your project, you will need 2 things :

Project ID, which is displayed in your project dashboard page :

Appwrite Cloud Endpoint, which is currently the following : ```js

https://cloud.appwrite.io/v1


You can also find both of them in the project settings tab :

![Appwrite Cloud API Endpoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mahqb2i401mm1hrygr4g.png)

Once you have these, create a `.env` file and store them there.

For doing any task with Appwrite Cloud, you need to connect to the client. For this use the following code <strong>(Note here that I have abstracted this get client method as this is required in multiple places) </strong> : 
```js


import { Client } from "appwrite";

export const getAppwriteClient = () => {
    const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID;
    const client = new Client()
    .setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
    .setProject(PROJECT_ID);               // Your project ID
    return client;
}

Now, you can call this function whenever you want to use Appwrite.

For my app, I mainly used 4 Authentication features :

Creating a User
Creating a User Session
Getting the current logged in User
Deleting current Session

For this the default selections as shown below are enough(the settings tab of the Auth section in the Cloud Dashboard), but Appwrite supports many other OAuth providers that you can explore.

Creating a User or Signing Up

Creating a User is the first step for Authentication, also called Sign Up.
Appwrite Cloud supports Email and Password based Users.

For creating a user, we use the account.create() method.

Note here, that we need the Appwrite client(which we will get from the method we created earlier) and then pass in the client created to Account constructor provided by Appwrite.

We can then use this object to create a new user with the following parameters :

Unique ID which can be created using the ID.unqiue() method provided by Appwrite.
Email
Password
Name

The following function takes care of this :



export const createUser = async (data) => {
    const {email,
        password,
        name} = data;
    try {
        const client = getAppwriteClient();
        const account = new Account(client);
        if(!email || !password || !name){
            return {
                status : 400,
                message : "Email/Password/Name missing",
                data : null,
                error : new Error("Credentials Missing")
            }
        }
        const result = await account.create(
            ID.unique(),
            email,
            password,
            name
        );
        return {
            status : 201,
            message : "Account Created",
            data : result,
            error : null
        };
    } catch (error) {
        console.log(error);
        if(error.name && error.name==='AppwriteException'){
            return {
                status : error.code,
                message : error.response.message,
                data : null,
                error
            }
        }
        return {
            status : 500,
            message : "Account not created",
            data : null,
            error
        };
    }
}

Creating user Session or Logging In

Once a user is created, you need to create a new session for the user to login. Similar to the above, we use the createEmailSession method for this :



const client = getAppwriteClient();
        const account = new Account(client);
        if(!email || !password){
            return {
                status : 400,
                message : "Email/Password missing",
                data : null,
                error : new Error("Credentials Missing")
            }
        }
        const result = await account.createEmailSession(
            email,
            password,
        );

Getting Current Logged In User

An important thing is that we want to check if there is a user currently logged in.

For this we can use the account.get() method instead of asking the user to login every time they open the website.



const client = getAppwriteClient();
        const account = new Account(client);
        const {name, email, $id} = await account.get();

NOTE : If there is no user currently logged in, this method returns an `Appwrite Exception` which can be handled in the catch block.

Deleting User Session or Logging Out

An important step is logging out a user once they are done to protect their data. This is also relatively simple and takes place in 2 steps :

Getting the current SessionID
And, Deleting the session



const client = getAppwriteClient();
        const account = new Account(client);
        const session = await account.getSession('current') 
        const sessionId = session?.$id;
        const response = await account.deleteSession(sessionId);

And their you have it : the complete authentication flow for your website that can be setup in minutes with the user of Appwrite Cloud.

The Authentication flow looks like :

Using Appwrite for Data Management

Appwrite Cloud also provides the functionality to create databases and store data based on our needs.

You can watch the video below or follow the steps below that(Both are same)

Database Setup

Just like the project setup, database setup is also super easy.

1. Create a Database

Before adding data, you need to create a Database for your project.

Head to the Database section and click on Create Database button. Add a name and (optionally) add a custom ID.

2. Create a Collection

Similar to the above, click on the Create Collection button once your database is created. You also have the option to create a custom ID.

3. Creating Attributes 📌

This is a really important step. Without creating the attributes, you will NOT ❌ be able to add new Documents.

You have a few options to select from for your new attributes like :

Email
URL
String
Enum
Even Relationships(how cool is that!!) 🤯

Working with Data

You have setup your database and created you collection.

Now let's get to the actual fun part. You will see how easy it is to add and retrieve data from Appwrite Cloud Database.

Step 1 : Adding the `Database and Collection IDs` to `env` Before accessing the Database, you need to get the Database ID and Collection ID from the Dashboard. It is displayed right beside the Database Name and Collection Name : ![Appwrite Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ya5s0c799nyfuoncy810.png)

Step 2 : Connecting to the Database

Appwrite provides a class called Databases that helps us connect with the Database. But, we need to pass in the client here are well.



const client = getAppwriteClient();
        const databases = new Databases(client);

Step 3 : Creating Documents

After connecting to the Database client and before reading data, we need to create Data.

For this, Appwrite provides us the databases.createDocument method that takes in 4 arguments by default :

DatabaseID 👉🏻 That we saved in the env file.
CollectionID 👉🏻 That we saved in the env file.
UniqueID 👉🏻 That helps identify each document, again ID.unique() can be used here.
Document 👉🏻 Javascript object that contains the actual data.

The complete code for the above looks like this :



const client = getAppwriteClient();
        const databases = new Databases(client);
        const databaseID = process.env.NEXT_PUBLIC_DATABASE_ID;
        const collectionID = process.env.NEXT_PUBLIC_COLLECTION_ID;
        const userId = (await getCurrentUser()).data.userId;
        const doc = await databases.createDocument(databaseID, collectionID, ID.unique(), {
            ...submission,
            owner : userId
        }, 
            [
                Permission.read(Role.user(userId)),
                Permission.update(Role.user(userId)),
            ]
        );
// way to check if submission was successfull
        if(!doc["$id"]){
            throw new Error("Submission Failed");
        }

📌 NOTE : We are adding Permissions here. along with the document. It is optional and when you don't provide any, the `default permissions allow anybody to read the document, but only the user who created it to modify or delete it`.

You can read more about Appwrite Permissions here e🔗

Step 4 : Fetching Data

Once you have created data, you can start fetching them.

By default, you do not have any method to fetch only the current user's data. But you can use Queries to modify your results.

For my app, I only need to fetch the current user's data so I used the following query :



[Query.equal("owner", [userId])]

You can read more about Appwrite Queries here 🔗

Also, the complete function to fetch the user's data is :



const client = getAppwriteClient();
        const userId = (await getCurrentUser()).data.userId;
        const databases = new Databases(client);
        const databaseID = process.env.NEXT_PUBLIC_DATABASE_ID;
        const collectionID = process.env.NEXT_PUBLIC_COLLECTION_ID;
        const submissions = await databases.listDocuments(databaseID, collectionID,[Query.equal("owner", [userId])],);
        return {
            status : 200,
            message : "Fetched Submissions",
            submissions,
            error : null
        }

And there you have a full stack web app created easily with the power of Appwrite cloud.

Pricing Options 💰

Currently Appwrite is in beta, but they are soon launching their Pro and Enterprise plans 👇🏻

A huge shoutout to the Appwrite team for building such an awesome Open-Source project.

You can also give me FOLLOW for more blogs like this!!

Send Emails with Next.js and Tailwind CSS

Vinit Gupta — Sat, 23 Sep 2023 15:20:22 +0000

Elevate Your Brand with Fully Customized Designs! 🤯😍

Have you ever seen beautiful emails like the one below, and have wanted to send one too?

Well, I am here to tell you that it's really easy.

Pre-Requisites ⚙️

To being able to create such stunning emails, you will need to know the following :

TailwindCSS
NodeJS + ReactJS OR NextJS
React-Email Library(Optional)
Resend or Nodemailer (I will discuss both)

Getting Started

Okay, so the first step is to create a NextJS + TailwindCSS project. For this we use the following steps (also present here 👈🏻 :

Create NextJS project



npx create-next-app@latest mail-synk

Install TailwindCSS and configure it



npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.



/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your globals.css file.



@tailwind base;
@tailwind components;
@tailwind utilities;

Install `Resend` and `React-Email`

Now install Resend and React-Email as there are what will help us in creating the amazing Email templates that you see.



npm install resend react-email @react-email/components

Resend and React-Email

Resend and React-Email, both created by @zenorocha as great tools for the creation and sending of beautiful emails using ReactJS/ NextJS.

As it says on their homepage :

The best API to reach humans instead of spam folders. Build, test, and deliver transactional emails at scale.

And with React-Email that provides us 👇🏻:

A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.

They basically form an :

Easy to configure
Component Based
Email Sending Service
With Ability to bundle with Tailwind for CSS Styling architecture, with support for various mailing clients.

Enough With Talk, Time for Code 🧑🏼‍💻

Now that the setup and introduction of the libraries are done,

React-email recommends and works the best when you use the components provided by the library ( we installed them earlier)

But to be able to view the React-Email component changes, we have to :

Add the following script to the package.json file : ```json

"email" : "email dev"

- Create a new folder called `emails` and add our own templates inside it
- Run the following command :
```js


npm run email

But the above server is really slow to build, I mean really slow.

So instead of using the email server, we use the normal dev server of NextJS to create the template and view it and then convert it into a React-Email components based format(which is super easy).

Building the Email 🛠️

The most important part of this application is the actual mail.
There are some limitations while using TailwindCSS to create this email :

You will note🚨 be able to use Grid or FlexBox.
Responsive design is possible but doesn't render properly ⚠️.
Shadows and Background Gradients do not work.

So sticking to a simple UI, you can create one like I built 👇🏻 :

Or you can edit this UI by @zenorocha :

Copy my Email Template 👈🏻 Here.

Points to Convert The NextJS code to Email Template

The original NextJS code is as below, and you have to make changes as following to create an email template that can be rendered properly :

Wrap the whole component in <HTML></HTML> tags.
Add <Tailwind></Tailwind> tags if you are using Tailwind CSS otherwise don't.
Create a <Body></Body> component inside the Tailwind component and write all you Template Code inside this.
Replace <div> with Section or Container components and <p> tags with Text.
Use Link components for Links.
And Img for images.

📌 Remember, to import all of the above from @react-email/components.

Registering on Resend

Now Resend requires us to create an account and use a verified domain to send the Emails.
If you have a domain you can use it for the same, or if you are a student, you can use the following guide by FreeCodeCamp⛺️ to get a free domain.

One you are done, you can go to Vercel ✌🏻 .
Head on to Domains dashboard 👇🏻 and add your domain :
Add the Domain to Resend dashboard, using the Add Domain button as shown :

You will see some configurations, that you need to add to your Nameservers settings.
Follow the guide as shown in the official guides here 👉🏻
Create a New API key from Resend, once your Domain has been verified.

Setting Up the API Routes

Inside the src route you will see an api folder.
Create a new file inside the folder called : mailer.js(or any other name that you like) and add the following code to use resend 🛠️ :



mport { Email } from '../../../Emails/mail.js';
import { NextResponse } from 'next/server';
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function GET() {
  try {
    const data = await resend.emails.send({
      from: 'Your Name <youremail@domain.dev>',
      to: ['receiver@domain.dev'],
      subject: 'Add a Subject',
      react: Email({ firstName: 'Vinit' }),
    });

    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error });
  }
}

For using Nodemailer 📧, use the below code :



const apiKey = process.env.RESEND_API_KEY;
    try {
        const transporter = nodemailer.createTransport({
          host: 'smtp.resend.com',
          secure: true,
          port: 465,
          auth: {
            user: 'resend',
            pass: apiKey,
          },
        });
      const htmlString = render(Email({
        name
      }), {
        pretty: true,
      });

      const info = await transporter.sendMail({
        from: '"Vinit Gupta" <vinit@thevinitgupta.tech>', // sender address
        to: email, // list of receivers
        subject: `Software Engineer Opportunities in ${location}`, // Subject line
        html : htmlString // html body
      });
       res.status(200).send(htmlString)
      } catch (error) {
        console.log(error)
         res.status(200).json({ message : error.message });
      }

Sending the Email

Now run the following command on your shell to start your NextJS server :



npm run dev

And open the following link on your browser :



http://localhost:3000/api/mailer

You will see a response like this :



{
messageId : "fsg5yerhtrys"
}

And there you have it : Your Personal Email Marketing or Referral Asking Application!!

Share this app with your friends and post their reactions on Twitter and tag me : thevinitguptaa🚀

React Query - The Definitive Guide to Making Requests in React

Vinit Gupta — Sun, 17 Sep 2023 10:37:29 +0000

You might have been fetching data in your React Apps WRONG ❌

React itself does not have any opinions about how we fetch data from the Server.

The most commonly used are FetchAPI and the Axios library.

Wrong Approach 1 : Fetch API 🎣

This is the most basic approach to use the Browser's Fetch API.

It is called when a component first mounts, using the useEffect hook and manage the response with useState. But, this is not the recommended way for good developers(not even the best ones).

Fetch is not a good option because of :

A lot more code is required for simple tasks.
Lack of any useful functionality that makes the developer experience very bad.

Wrong Approach 2 : Axios 🪓

The Axios library simplifies the above code a bit, but still lacks some features for a great developer experience.

It abstracts the code for fetching, but does not help in :

Caching.
Data states like Error or loading.
Still has try-catch hell.

Now that the above 2 magical ways are wrong, what is the correct way?

React Query - A Library that simplifies the way we fetch, cache and synchronize data from a server

Yes, both of the above are the same thing.

Let's see what React Query or Tanstack Query does and is in detail.

It is not Just A Data Fetching Library

What React Query gives you is not just the ability to describe which data you want and to fetch that data, it also comes with a cache 🧠 for that server data.

This means that you can just use the same useQuery hook in multiple components, and it will only fetch data once and then subsequently return it from the cache.

Enough with the theory, show me the Code ⌨

Now, let's see how to set it up and some use cases where React Query just feels awesome.

Setup (The Boring Part)

First of all you need to have a project setup, either in ReactJS or in NextJS.
I will just use React Query in my Lynkit🔗 project.

To add React Query to the project, we use the following command :

npm i @tanstack/react-query

Now if you have used something like Redux or ContextAPI before, you have to make the client available to all the parts that you will be using.

The simplest way to do this is by wrapping the parts of your application inside a client-provider, which in this case is called the QueryClientProvider.

We also need to create a client which handles all the functionality of the Library.

[!Important]
Client is nothing but an instance of the base class of React Query in this case. It handles all the functionalities that we want to use.

For my project(an in most cases), I want to access the QueryClient from all scopes of the App, so we wrap the whole App component inside it.

import {
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'

const queryClient = new QueryClient()

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </QueryClientProvider>
  </React.StrictMode>
);

Now that React Query is Setup, it is time to look at it's various use cases.

Fetching Data

When making a Get Request, we use the useQuery hook provided by the React Query library.

Note : If hooks are something you don't understand, I want you to stop here and look at this : Hooks : JS in plain english by Ayush Verma.

Okay, so useQuery hook.
Queries are basically asynchronous requests tied to a data source. And async requests are handle by promises in Javascript.

So, the useQuery hook are used to subscribe to a query that listens to the pending, fulfilled and rejected states and returns a state based on that.

A lot of jargon? Yeah, agreed. So here's a diagram :

Now the hooks take in 2 parameters mainly :

A unique key 🔑 for the query

A function that returns a promise that:

Resolves the data ✅ , or

Throws an error ❌

📢 The `unique key` you provide is used internally for `refetching, caching, and sharing` your queries throughout your application.

Let's see an example from Lynkit where I fetch the logged in user data :

The Actual Data Fetching using Axios.get()

Yes, for fetching data we have to use Axios but not directly.
We define a function to get the data and add it as a Query Function to the User key.

So, whenever I want to use the User data, I can just use the UseQuery hook to get the user data :

If found in the Query cache, it returns the data from there.
Other it calls the following function :

export const getUserData = async() : Promise<ProfileData> => {
    try {
      const response : AxiosResponse = await axios.get("http://localhost:3003/user", {
        headers : {
          "Content-Type" : "application/json",
        },
        withCredentials: true,
      });
      const {status, data } = response;
      console.log(data)
      if(status!==200 || !data.user){
        ...
        return nullUser;
      }
      return data.user as ProfileData;

    } catch (error) {
      console.log(error);
      throw new Error("Data Fetching Failed")
    }
}

The UseQuery hook is used as follows :

const {data, isError, isLoading} = useQuery<ProfileData>(
    {
      queryKey : ["user"],
      queryFn : getUserData,
      notifyOnChangeProps : ['data','error'],
      refetchOnWindowFocus: false
    }
  )

The above works as follows :
Step 1 : Read the Query Key passed, in this case : ["user"]
Step 2 : Check if query key is present in the Query Cache and return if present.
Step 3 : If the data is not present in the cache, called the function passed in the queryFn property.

📌 Note that `useQuery` hook is used only for `get ↩` requests. For other requests like, we use the `useMutation` hook with the mutate method.

Invalidating Queries ❗📛

There will be cases, where you want to re-fetch data when an action occurs.
React Query also provides a way for us to do that : client.invalidateQueries() method.

You need to pass in the same queryKey that you want to be re-fetched and the QueryClient auto fetches the data when that data is invalidated.

const queryClient = useQueryClient();
queryClient.invalidateQueries(["user"]);

The cached user data is removed and the new data from API or server is fetched again at this point.

The above can be used in 2 conditions :

The data is updated by adding, editing or deleting some part(like updating user name or password or image).
Logging out ❌ the user.

At this point you are ready to develop a sophisticated query based application.

For more detailed and complete explanations, you can check out @tkdodo 👈 profile and the Complete Tanstack Docs 💡.

You can also checkout my previous blog on Bun - Fastest Javascript Runtime ⚡

Discover Bun - A Faster, Modern JavaScript Runtime

Vinit Gupta — Sun, 10 Sep 2023 12:36:08 +0000

Bun is the new Javascript Runtime built from scratch to serve the modern Javascript ecosystem.

But do we really need more Javascript tools?

Well, the Javascript Space is completely different from 15 years ago when NodeJS was first released.

Yearly new releases of ECMAScript.
Typescript becoming the norm because of the enhanced Developer experience.
Use of JSX in almost every development framework.

These have forced the Javascript runtimes to become lighter and faster.

Deno - Modern runtime that becamse Jurasic

A little bit ago, we got Deno. While it is just No-De reversed as De-No, it does more than that.

It's features are listed on their website :

But, Deno essentially failed, because :

Deno only really sported "minor features" from a users perspective. It had a cleaner codebase, used up-to-date best-practices, and had better security, but those things are really only "features" to a user, not a product in themselves.

The Technology Behind Bun

Bun is a Javascript Runtime. But what does it mean actually?
It starts with an Engine - The Component of a runtime that runs the Javascript code.

We all know V8, the JS Engine behind Chrome and NodeJS.
But Bun uses something different - JavascriptCore.

Javascript Core is a `Performance🚀 focused` solution built by Apple 🍎 for the Safari Browser

The JS engine cannot work on it's own. So it combines with external APIs and message Queues and the infamous Event loop to create a Javascript Runtime.

In Bun, this is implemented from scratch using Zig which is a low-level general purpose language like C or Rust for building fast applications.

The above implementation provides better performance and memory management during Start and Runtimes, combined with the promise of mind-blowing speed, you have a real competitor of NodeJS.

Features of Bun

Bun has a lot of great features that makes it worthy.

1. Support for NodeJS packages 🎯

Bun is like a Drop-In replacement for NodeJS thanks to the native implementation of 100s of Node modules

Bun also uses the package.json file for dependencies, so less learning curve from NodeJS and bun install is really fast 👇

2. Built in Typescript Support and it's fast ⚡

Before the dawn of Bun, running typescript was tedious and slow. Bun comes with built in support for running Typescript in your projects and makes it faster.

3. Support for both CommonJS and ESModules(MyFavorite) 🎉

Remember those days where you had to convert your project from the old require syntax to import syntax? Some libraries still not support the import syntax perfectly with Typescript.

This all goes away with Bun. You can write either or both.

4. Built-In Testing Support 💡

You love the Test driven development? Or are you just starting with it? It doesn't matter. Because you do not have to go and learn a new testing framework to do the job.

Bun comes with built-in testing support, and so it is much faster from the other ones out there.

Enough talk, let's see some examples of using Bun 📌

Installing Bun

Installing Bun is as simple as below :

curl -fsSL https://bun.sh/install | bash

Setting up a Server

Ready to develop your own service? Create a new file : server.ts and add the following code :

Start the server

Now to start listening to requests, run the following command(no intermediate step of converting to .js separately) :

bun index.tsx

React Components with Bun

Bun supports .jsx and .tsx files out of the box. Bun's internal transpiler converts JSX syntax into vanilla JavaScript before execution.

It also works with the above React component.

With the above features and many more, Bun is ready to become the new norm in the Javascript runtime market.

Do you want to use Bun in your projects? Checkout their official website for Getting Started and installation guides here : Bun.js

Connecting to Github with SSH (Windows)

Vinit Gupta — Sat, 19 Aug 2023 05:10:00 +0000

Earlier, GitHub used to allow browser login. Those were the simpler times.

But now, to push your code to GitHub, you need to generate SSH Keys. These SSH Keys are your login credentials - for personal projects and open source contributions.

While building a project recently, I tried pushing my code to GitHub but I could not. And I got frustrated😭 like everyone of you might have gotten one day.

And then I discovered this article which was a tough to navigate, but solved my problems : SSH Keys and Github

I immediately thought of sharing this with all of you to make it simpler. 📢📢

Step 0 : Prerequisites

For using Git on your windows, it is very important to have GitBash installed in your system.

🚨 If you haven't already installed GitBash, follow this GitBash Guide to install it.

Now that you have GitBash installed on your Windows, we can begin.

Step 1 : Generate a new `SSH` Key

Generating an SSH key is simple, followed by storing and using it.

Run Git Bash
Generate a new SSH key by pasting the following snippet

// Replace "your_email@example.com" with your GitHub email ID
$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

When you’re prompted with the following message :

Enter a file in which to save the key

press Enter to save the key in the default location (/c/Users/username/.ssh/id_rsa). Your public key will also get saved here.

Now copy the SSH key to your clipboard using the following command :

$ clip < ~/.ssh/id_rsa.pub

Step 2 : Adding the copied SSH Key to your GitHub account

Now that the key is generated, you need to add it to your GitHub account.

Go to Settings in your Github account to add the SSH public key.
Under SSH keys tab, select New SSH key.
Give a title and paste the key in the text area.

Step 3 : Add private SSH key to the `ssh-agent`

Git bash tool comes with a ssh-agent which needs to be configured to use the SSH key that you create.

Follow the steps below for an easy configuration.

Open Git Bash
Create a new ~/.profile (or) ~/.bashrc file using the following command :

$ vi ~/.profile

Paste below script into your bash file that opens on running the above command:

env=~/.ssh/agent.env

agent_load_env () { test -f "$env" && . "$env" >| /dev/null ; }

agent_start () {
    (umask 077; ssh-agent >| "$env")
    . "$env" >| /dev/null ; }

agent_load_env

# agent_run_state: 0=agent running w/ key; 1=agent w/o key; 2= agent not running
agent_run_state=$(ssh-add -l >| /dev/null 2>&1; echo $?)

if [ ! "$SSH_AUTH_SOCK" ] || [ $agent_run_state = 2 ]; then
    agent_start
    ssh-add
elif [ "$SSH_AUTH_SOCK" ] && [ $agent_run_state = 1 ]; then
    ssh-add
fi

unset env

This will auto launch the ssh-agent whenever you run your git bash shell.

Exit the editor by typing clicking on esc button on keyboard and write : :wq and press Enter.

The above file will be saved.

And there you have it - ready to contribute to open source projects from your `Command Line`.

📌But wait, we are the Good Developers, so we will test if it works properly.

Step 4 : Verification

Open a new Git Bash window.
Check if the identity has been added to the ssh agent.

$ ssh-add -l

Check that the key is being used by trying to connect to git@github.com.

$ ssh -vT git@github.com

OpenSSH_8.0p1, OpenSSL 1.1.1c  18 August 2023
debug1: Reading configuration data
debug1: Offering public key
debug1: Server accepts key
debug1: Authentication succeeded (publickey).
Authenticated to ssh.github.com