DEV Community: GIRIDHARAN S

What I've Been Building as a Full Stack Developer — 2025 Edition

GIRIDHARAN S — Mon, 16 Mar 2026 19:10:26 +0000

Hey devs 👋

I’m Giridharan, a Full Stack Developer who spends most of his time building web apps with the MERN stack.

Recently I started working as a Frontend Engineer at a startup, building production-scale applications and learning a lot about real-world software engineering along the way.

I’ve been wanting to write publicly for a while, so I thought I’d start by sharing what I’ve been building recently — both at work and in my personal projects.

🧑‍💻 What I Work On Daily

At the startup where I work, my role mainly focuses on building scalable React applications.

Most of my day involves:

⚛️ Building reusable React components
📦 Managing application state with Redux Toolkit & RTK Query
🧩 Designing Micro-Frontend architectures
🔗 Integrating APIs and improving application performance

One of the most interesting things I work with is Micro-Frontend architecture.

Instead of one massive frontend application, the system is split into multiple independent mini-apps that can be developed and deployed separately.

It’s complex… but extremely powerful when done right.

🛠️ Things I've Built Outside Work

Outside of work, I spend a lot of time building small tools and platforms that solve real problems.

Here are a few of my projects 👇

🔗 Linkvio — URL Shortener Platform

A scalable URL shortening platform designed for fast redirects and secure link management.

Key features include:

⚡ Redis caching for very fast redirects
🔐 Role-Based Access Control (RBAC)
🗄️ PostgreSQL for structured link storage
🧩 Modular Node.js backend with a clean React frontend

This project taught me a lot about backend architecture and caching strategies.

🌐 Live Demo:
👉 https://linkvio.vercel.app

📸 Imgsend — Permanent File Sharing

Imgsend is a file sharing platform that supports:

🖼 Images
🎥 Videos
📄 PDFs
🔗 URLs

You upload a file and get a permanent shareable link.

No expiry.
No account required to view.

Think of it as a lightweight permanent file sharing tool.

🌐 Live Demo:
👉 https://imgsend.vercel.app

📝 Blogsphere — Blogging Platform

Blogsphere is a MERN-based blogging platform where users can publish and share articles.

Features include:

🔐 JWT Authentication
👥 Role-Based Access Control
✍️ Rich content publishing
📱 Responsive UI

It was a great project for learning about authentication, authorization, and API design.

🌐 Live Demo:
👉 https://gblogs.vercel.app

🤖 Product Sentiment Analysis

This project analyzes product reviews using machine learning.

Users submit reviews and the system classifies them as:

😀 Positive
😐 Neutral
😡 Negative

The interesting part here was connecting machine learning inference with a web application UI.

🌐 Project Page:
👉 https://gsenti.vercel.app

📦 My First npm Package

I also published my first npm package:

📦 `@giridharans/qr-code`

A lightweight QR code generator for React applications.

It allows developers to generate QR codes with simple props like:

value
size
colors

📦 npm Package:
👉 https://www.npmjs.com/package/@giridharans/qr-code

Publishing my own npm package was a really exciting milestone.

📊 By the Numbers

So far in my developer journey:

🏗 Multiple production apps deployed
📦 1 npm package published
⚔️ 500+ coding problems solved
🌐 Portfolio:
👉 https://giridharans.tech

🔭 Projects showcase:
👉 https://1729apps.vercel.app

🚀 What I'm Learning Next

Right now I'm focusing on:

⚙️ System design concepts
☁️ Cloud technologies
🧠 Writing better scalable code

And also something I’ve been delaying for too long:

✍️ Writing more technical blogs

🤝 Let's Connect

If you're working with:

⚛️ React
🌐 MERN stack
🏗 Micro-Frontend architecture

I'd love to connect and learn from you.

You can find my work here:

🌐 Portfolio: https://giridharans.tech
🔭 Projects: https://1729apps.vercel.app

Thanks for reading 🙌
More posts coming soon about Micro-Frontends, system design, and building real-world projects.

Tech Update: Next.js, Resend, and Cron Atlas Power Latest Hacker News Story Aggregator

GIRIDHARAN S — Sat, 10 Aug 2024 18:23:55 +0000

New Aggregator Tool for Hacker News Launches Using Next.js, Resend, and Cron Atlas

In the ever-evolving world of tech, staying updated with the latest news is crucial. A new tool has emerged that combines Next.js, Resend, and Cron Atlas to provide a streamlined experience for aggregating Hacker News stories. This blog post will guide you through the components of this innovative tool and how they work together.

What is Hacker News?

Hacker News is a popular social news website focusing on computer science and entrepreneurship. It features a wide array of user-submitted stories and discussions, making it a valuable resource for tech enthusiasts.

Introducing the Components

Next.js

Next.js is a powerful React framework that enables server-side rendering and static site generation. It's perfect for building fast, dynamic web applications. In this aggregator, Next.js is used to create the front-end interface, providing a seamless user experience.

Resend

Resend is a service designed to handle email delivery. While it may seem unrelated, it's utilized in this project to send notifications about new stories or updates. By integrating Resend, users can stay informed without constantly checking the aggregator.

Cron Atlas

Cron Atlas is a scheduling service that allows you to run tasks at specified intervals. In this aggregator, Cron Atlas is used to fetch the latest Hacker News stories periodically, ensuring that the content is always up-to-date.

How It All Comes Together

The integration of these three components creates a robust system for aggregating and delivering Hacker News stories. Here’s a brief overview of how they interact:

Fetching Stories: Cron Atlas schedules regular fetches of the latest stories from the Hacker News API.
Storing Data: The fetched stories are stored in a database for efficient querying and retrieval.
Displaying Stories: Next.js is used to build the front-end that displays these stories in an organized manner.
Notifications: Resend handles the delivery of notifications to users about new stories or updates.

Code Snippets

Fetching Stories with Cron Atlas

To set up a scheduled task with Cron Atlas, you might use a script like this:

const fetch = require('node-fetch');
const db = require('./database');

const fetchHackerNewsStories = async () => {
    const response = await fetch('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty');
    const storyIds = await response.json();
    const stories = await Promise.all(storyIds.slice(0, 10).map(id => 
        fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`)
            .then(res => res.json())
    ));
    await db.saveStories(stories);
};

fetchHackerNewsStories();

Displaying Stories with Next.js

Here's a basic example of how you might display these stories using Next.js:

javascript

import { useEffect, useState } from 'react';

const HomePage = () => {
    const [stories, setStories] = useState([]);

    useEffect(() => {
        const fetchStories = async () => {
            const response = await fetch('/api/stories');
            const data = await response.json();
            setStories(data);
        };
        fetchStories();
    }, []);

    return (
        <div>
            <h1>Top Hacker News Stories</h1>
            <ul>
                {stories.map(story => (
                    <li key={story.id}>
                        <a href={story.url} target="_blank" rel="noopener noreferrer">{story.title}</a>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default HomePage;

Conclusion

This new aggregator tool demonstrates the power of combining Next.js, Resend, and Cron Atlas to create a comprehensive and user-friendly experience for following Hacker News stories. Whether you're a developer looking to build a similar tool or just curious about the tech stack, understanding these components can provide valuable insights into modern web development.

Stay tuned for more updates and innovations in the tech world! 🚀🔧📱

How does ChatGPT generate human-like text?

GIRIDHARAN S — Sat, 10 Aug 2024 18:09:48 +0000

ChatGPT, developed by OpenAI, is a cutting-edge language model that has made a significant impact in the field of natural language processing. It uses deep learning algorithms to generate human-like text based on the input it receives, making it an excellent tool for chatbots, content creation, and other applications that require natural language processing. In this post, we will explore the workings of ChatGPT to understand how it generates human-like text.

The Core of ChatGPT :

The backbone of ChatGPT is a transformer-based neural network that has been trained on a massive amount of text data. This training allows the model to understand the patterns and relationships between words in a sentence and how they can be used to generate new text that is coherent and meaningful. The transformer-based architecture is a novel approach to machine learning that enables the model to learn and make predictions based on the context of the input. This makes it ideal for language models that need to generate text that is relevant to the context of a conversation.

How ChatGPT Generates Text :

ChatGPT uses an autoregressive language modeling approach to generate text. When you provide input to ChatGPT, the model first encodes the input into a vector representation. This representation is then used to generate a probability distribution over the next word in the sequence. The model selects the most likely next word and generates a new vector representation based on the new input. This process is repeated until the desired length of text has been developed.

One of the key strengths of ChatGPT is its ability to handle context. The model has been trained to understand the context of a conversation and can generate text that is relevant to the current topic. This allows it to respond to questions and generate text that is relevant to the context of the conversation. This makes it an excellent tool for chatbots, as it can understand the user's intention and respond accordingly.

Scalability and Fine-tuning :

Another critical aspect of ChatGPT is its scalability. The model can be fine-tuned for specific use cases by training it on specific data sets. This allows it to generate text that is more tailored to the needs of the application. For example, if ChatGPT is being used in a customer service chatbot, it can be fine-tuned on data that is relevant to customer service queries to generate more accurate and relevant responses. This fine-tuning process can be done by using transfer learning, where the model is trained on a smaller data set, leveraging the knowledge it gained from its training on the larger data set.

Real-world Applications :

ChatGPT has a wide range of real-world applications, from content creation to customer service. It can be used to generate news articles, creative writing, and even poetry. In customer service, ChatGPT can be used as a chatbot to respond to customer queries, freeing up human agents to handle more complex issues. Additionally, ChatGPT can be used in language translation, as it has the ability to understand the context of a conversation and translate text accordingly.

In summary, ChatGPT's ability to generate human-like text and understand context makes it a versatile tool with endless potential applications. Its deep learning algorithms and transformer-based architecture allow it to generate coherent and meaningful text, making it an exciting development in the field of natural language processing. Whether it's being used in customer service, content creation, or language translation, ChatGPT has the potential to revolutionize the way we interact with machines.

Conclusion :

In conclusion, this blog has explored the workings of ChatGPT, a cutting-edge language model developed by OpenAI. We have seen that the model is based on a transformer-based neural network that has been trained on massive amounts of text data, allowing it to generate human-like text based on the context of a conversation. Its scalability and fine-tuning capabilities make it a valuable tool for a wide range of applications, from customer service to content creation. With its ability to understand the context and generate coherent and meaningful text, ChatGPT has the potential to revolutionize the way we interact with machines and will play a crucial role in the development of AI-powered applications.

**disclaimer: **This post is also written using ChatGPT.

Asynchronous programming in Javascript

GIRIDHARAN S — Sat, 10 Aug 2024 17:29:56 +0000

JavaScript, being a single-threaded language, can only process one task at a time. This can result in long wait times for complex tasks, as the script will be blocked from executing any other tasks until it has been completed. To tackle this, JavaScript offers asynchronous programming, which allows the script to continue executing other tasks while it waits for an asynchronous task to complete. In this blog, we’ll explore the basics of asynchronous programming in JavaScript and how it can be achieved through the use of callback functions, promises, and async/await.

Callback Functions

A callback function is a function that is passed as an argument to another function and is executed after the main function has been completed. Callbacks are used in asynchronous programming to wait for a task to complete before executing the next step.

For example, consider the following code:

function slowTask(callback) {
  setTimeout(() => {
    console.log("Slow task completed.");
    callback();
  }, 1000);
}

function runProgram() {
  console.log("Program started.");
  slowTask(() => {
    console.log("Callback function executed.");
  });
  console.log("Program ended.");
}

runProgram();

In this example, the slowTask function takes a callback as an argument. The slowTask function uses setTimeout to delay the execution of a task for one second. The runProgram function calls slowTask and passes a callback function as an argument. The runProgram function also logs "Program started" and "Program ended". When the slowTask function has been completed, it logs "Slow task completed" and executes the callback function, which logs "Callback function executed".
The output will be:

Program started.
Program ended.
Slow task completed.
Callback function executed.

Promises

Promises are a more modern approach to asynchronous programming in JavaScript. A promise represents the result of an asynchronous operation and can be in one of three states: pending, fulfilled, or rejected. A promise can be created using the Promise constructor, and its state can be determined using the then and catch methods.

For example:

const slowTask = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Slow task completed.");
  }, 1000);
});

function runProgram() {
  console.log("Program started.");
  slowTask
    .then((result) => {
      console.log(result);
    })
    .catch((error) => {
      console.error(error);
    });
  console.log("Program ended.");
}

runProgram();

In this example, slowTask is a promise that is resolved after one second with the result "Slow task completed.". The runProgram function calls slowTask and uses the then method to log the result when the promise is fulfilled.

The output will be:
Program started.
Program ended.
Slow task completed.

Async/Await

Async/await is the latest and most readable way to handle asynchronous operations in JavaScript. It allows developers to write asynchronous code that looks like synchronous code, making it easier to understand and maintain. The async keyword is used to declare an asynchronous function, and the await keyword is used to wait for a promise to be resolved.

Here is an example to demonstrate the use of async/await in JavaScript:

async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  console.log(data);
}

fetchData();

In this example, the fetchData function is declared as asynchronous using the async keyword. The function uses fetch to retrieve data from an API, and await is used to wait for the fetch operation to complete. The resolved response is then transformed into a JSON object using response.json(). The await keyword is used to wait for the JSON transformation to complete, and the final result is logged to the console.

It's important to note that the code within an asynchronous function will be executed asynchronously, but the code outside of the function will still be executed synchronously. Also, the await keyword can only be used within an asynchronous function.

In conclusion, asynchronous programming in JavaScript allows the script to continue executing other tasks while it waits for an asynchronous task to complete. Callback functions, promises, and async/await are three ways to achieve asynchronous programming in JavaScript. Callback functions are the simplest and most basic way to handle asynchronous operations, while promises offer a more modern and flexible approach. Async/await provides the most readable way to handle asynchronous operations and is the recommended method for modern JavaScript programming. Understanding asynchronous programming in JavaScript is important for creating efficient and responsive applications, and is a must-have skill for any JavaScript developer.