Forem: Shagun Bidawatka

GPT-4.1 is Here. Plus, Mini and Nano!

Shagun Bidawatka — Tue, 15 Apr 2025 13:34:53 +0000

OpenAI just announced new AI models: GPT-4.1, GPT-4.1 mini, and even a GPT-4.1 nano. They're available now in the API.

It seems OpenAI is focusing on making their models better at coding, following instructions, and handling way more text. Let's see what this means.

// Detect dark theme var iframe = document.getElementById('tweet-1911830886896799931-881'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1911830886896799931&theme=dark" }

What Has Changed?

Better at Coding: This seems to be a major focus. GPT-4.1 scored 54.6% on SWE-bench Verified (a software engineering test), which is a massive jump from GPT-4o's 33.2%. They say it's better at real-world coding tasks, understanding codebases, and following specific formats like code diffs.
Follows Instructions Better: Sick of the AI not quite doing what you asked? GPT-4.1 is supposed to be more reliable. It scored 38.3% on Scale’s MultiChallenge benchmark (up 10.5% from GPT-4o), which tests how well it follows instructions, especially over multiple turns in a conversation. They specifically mention improvements in handling negative instructions (like "don't do XYZ") and complex formatting requests.
HUGE Context Windows: All three new models (4.1, mini, nano) support up to 1 million tokens of context! That's up from 128k in GPT-4o. Think of processing massive codebases or multiple long documents at once.
Faster and Cheaper Options:
- GPT-4.1: Is 26% cheaper than GPT-4o for typical queries.
- GPT-4.1 mini: A big improvement over GPT-4o mini. OpenAI claims it matches or beats GPT-4o on some intelligence tests while being nearly half the latency and 83% cheaper. Wow!
- GPT-4.1 nano: Their fastest and cheapest model now. Designed for low-latency tasks like autocompletion or classification, but still has that 1 million token context window.
Better Image Understanding (Vision): The new models, especially GPT-4.1 mini, show improvements in understanding images, charts, and even long videos. GPT-4.1 got 72.0% on a long video understanding test, beating GPT-4o.
API Only: Important note: These new models (4.1, mini, nano) are only available via the API.

When Should You Use These?

Based on the improvements:

Coding Tools & Agents: The big coding boost makes GPT-4.1 (and maybe mini) much more attractive for code generation, review, debugging, and building automated coding agents.
Complex Instruction Tasks: If you need an AI to follow specific formats, multi-step instructions, or remember details from long conversations, GPT-4.1 looks more reliable.
Processing Large Amounts of Text/Code: Analyzing long documents, summarizing books, querying across entire code repositories – the 1M token window opens up possibilities here for all three models.
Speed-Sensitive Apps: GPT-4.1 mini and nano are explicitly designed for lower latency. Think faster chatbots, real-time analysis, or quick classifications.
Cost-Sensitive Apps: Nano is the cheapest option, and Mini offers a great performance/cost balance compared to previous models.

My Quick Opinion

The introduction of mini and nano versions alongside the main 4.1 is a smart move. It gives developers clear choices based on their needs for performance, speed, and cost.

It's also good they're focusing on instruction following which I think was much needed even you must have noticed bashing on social platforms for models giving irrelevant responses. Also making these API-only clarifies where developers should look for the latest capabilities.

All in all, this looks like a solid update focused on practical developer needs. Do check it out - https://openai.com/index/gpt-4-1/.

Break over

Shagun Bidawatka — Mon, 14 Apr 2025 17:40:30 +0000

After a break of few months starting the preparation series again. Will be sharing daily content here. I'll cover my whole learning journey as a frontend dev. Stay updated!

Let's learn together.

Announcing: The Ultimate Frontend Interview Preparation Kit

Shagun Bidawatka — Sat, 26 Oct 2024 11:18:27 +0000

As a developer, facing technical interviews can feel like a marathon. Preparing for interviews requires not only mastering the fundamentals but also keeping up with new techniques and best practices.

To help you navigate this journey, I'm thrilled to introduce a frontend Interview Preparation Kit—a series of comprehensive blogs aimed at guiding you through all essential concepts, best practices, and frequently asked interview questions.

I'll be publishing blogs in series.

What's Inside the Interview Preparation Kit?

Each blog in this series will dive deep into specific frontend topics, targeting main tech stacks in technical interviews. Here’s a sneak peek at what you can expect:

Javascript
Javascript coding/tricky questions
ReactJS
State management libraries (Eg: Redux)
System Design (Storage, networking, caching, performance)
DSA
My interview experiences
Extra discussions and suggestions for job apply and interview

If you’re gearing up for Frontend interviews, this series is designed to make your preparation journey both organized and efficient.
Follow and Stay Tuned!

Do comment the suggestions and addons you want in the series.

Networking Interview Preparation

Shagun Bidawatka — Mon, 07 Oct 2024 07:59:34 +0000

I'll sharing important and mostly asked networking topics in interview. In order to keep this blog short and crisp, I'll just add the topic and the intro to the topic. Let's start...

Learn basic of how the internet works

The internet is a system of connected networks that enables global communication, using protocols, IP addresses, and domain names to direct traffic and exchange information efficiently.

Protocols in Internet communication

Protocols provide a set of rules and standards that ensure data is transmitted efficiently, securely, and consistently across the global network.

Common protocols- HTTP/HTTPS, TCP/IP, DNS, FTP, SMTP, UDP. Give a brief read to each one of them.

Difference between HTTP and HTTPS

HTTP is a protocol for transferring data between a browser and a server without encryption, making it vulnerable to interception. HTTPS, on the other hand, encrypts the data using SSL/TLS, ensuring secure and private communication over the internet.

Understanding of IP address, Domain name and DNS

IP Addresses - Every device connected to the internet has a unique identifier.

Domain names- Are easy-to-remember addresses that correspond to IP addresses.

DNS- When you type a domain name into your browser, DNS takes over to find the corresponding IP address of the website’s server.

REST (Representational State Transfer)

Architectural style for designing web services that allows systems to communicate over the internet using standard HTTP methods.

Key concepts- stateless communication, HTTP Methods, Uniform Interface, Representation of Resources.

Give a read to - HTTP methods like GET, POST, PUT, and DELETE.

Status code

They provide information about whether a request was successful, if there was an error, or if further action is needed.
1xx (Informational) - 100
2xx (Success) - 200, 201
3xx (Redirection) - 301,302
4xx (Client Errors) - 400, 401, 403, 404
5xx (Server Errors) - 500, 503

OPTIONS method

It doesn’t request the resource itself, but rather asks what HTTP methods (e.g., GET, POST, DELETE) are supported and what other capabilities are allowed, such as authentication, headers, or CORS (Cross-Origin Resource Sharing) rules.

When a client (e.g., a web browser) makes a cross-origin request (i.e., a request to a different domain), the browser first sends an OPTIONS request to the server to check if the actual request is allowed. It is crucial for security.

Headers

https://dev.to/shagun/understanding-request-and-response-headers-in-rest-apis-43nf

I just tried to collate the topics, you should give a brief read about them. I'll be adding further more blogs on interview questions.
Feel free to comment, if you find any missed out topics or want to add anything on it.

For 1:1 discussion, connect here: https://topmate.io/shagun

A practical Guide - Migrating to Next.js App Router

Shagun Bidawatka — Tue, 01 Oct 2024 07:19:06 +0000

With the release of the Next.js App Router, many developers are eager to migrate their existing projects. In this post, I’ll share my experience migrating a project to the Next.js App Router, including key challenges, changes, and how you can make the process smoother.

It's an incremental approach, you can use the page router and app router simultaneously.

Why Migrate to the Next.js App Router?

The App Router introduces several advantages:

Improved Routing: Cleaner file-system-based routing.
Server-Side Rendering (SSR) Enhancements: More efficient handling of server-side data.
Meta Handling: Simplified SEO management.
Improved Performance: Built-in optimizations for various components.

By migrating, you can future-proof your application to take advantage of the latest Next.js features.

Steps to Migrate to the App Router

Update Dependencies

The first step is to ensure your Next.js and related dependencies are up to date. Run the following commands to install the latest versions of Next.js and React:

npm install next@latest react@latest react-dom@latest
npm install -D eslint-config-next@latest

Structure the App Folder

The App Router relies on the new app directory for managing routes, metadata, and layouts. Here's how to structure it:

App Folder: Move your pages into the app folder. Each route now has its own dedicated folder containing a page.tsx file.

Layouts: Add a layout.tsx file to define layouts for specific sections of your app. This is particularly useful for handling shared components like navigation bars or footers.

Router Changes

One of the most significant changes is the replacement of next/router with next/navigation for routing and navigation functionality.

Replace all next/router imports with next/navigation.
Update functions like useRouter with new equivalents, such as usePathname, useSearchParams, and useRouter() where appropriate.

Refactor Server-Side Code

getServerSideProps and getStaticProps are deprecated in the App Router.
Use async server components or server actions for data fetching in server-side pages.

export async function getData() {
  const res = await fetch('https://getData.com/data');
  return res.json();
}

Handling Client-Side Components

Client components:
Any component that uses React hooks, browser APIs, or user interactions must be marked with 'use client'. This tells Next.js to render them on the client side.

Server Components:
Any component that does not require interaction with the browser can remain as a server component. These are more efficient since they avoid shipping unnecessary JavaScript to the client.

Handling External Libraries

If you are using external libraries like React Query, AntDesign or framer etc. You need to update them and make changes as needed. Can't include all the changes in this blog. Although changes are mentioned in their documentation.

Common Challenges During Migration

Router Event Handling:

With the change from next/router to next/navigation, handling router events might require a different approach.
Ensure that you update any router event listeners or hooks accordingly.

Layout Shift Issues:

When migrating pages with complex layouts (especially those with animations), you may notice layout shifts. Add placeholder or keep proper alignment on server-side itself to prevent layout shifts.

Image and Link Component Updates:

The App Router introduces changes to the Image and Link components.
Use codemods to automatically update components.
For the Image component, remove deprecated attributes like responsive.

Animations

Animation related components like framer, swiper, and lootie files need to be kept at the client side.

Conclusion

Migrating to the Next.js App Router comes with its challenges but also with significant improvements in performance, scalability, and flexibility. By breaking down the migration into manageable sections (app-level, page-level, and feature updates), I was able to tackle each change systematically.

Let me know if you have any questions or tips from your own migrations!

Communication: Data Fetching Patterns

Shagun Bidawatka — Tue, 10 Sep 2024 06:15:50 +0000

Big announcement!
I have started my daily learning journey of Frontend system design. And I'll be sharing insights from each module in the blogs. So, here's the start and there is much more to come!

In this blog, we’ll explore different data fetching mechanisms essential to front-end system design, including short polling, long polling, WebSockets, server-sent events (SSE), and webhooks. Each technique addresses specific needs for delivering data to and from the client and server, and understanding them is crucial for designing scalable, real-time web applications.

1. Short Polling

Short polling is a method where the client repeatedly sends requests to the server at regular intervals to check for updates.

setInterval(async () => {
  const response = await fetch('/api/get-posts');
  const data = await response.json();
  // Update UI with new data
}, 5000); // Poll every 5 seconds

Short live communication
No persistence of the data
Less resource utility
Server load due to the repeated requests
Increased bandwidth usage

Eg - Stock market ticker, Social media feeds

2. Long Polling

Long polling is an enhancement over short polling, where the client sends a request, and the server holds the connection open until it has new data to return.

From Back-end, the response will be sent only when data is updated, till then it will hold the request. If there is no update for a long time then the timeout is processed.

Client side

async function subscribe() {
  let response = await fetch("/subscribe");

  if (response.status == 502) {
    // Status 502 is a connection timeout error, let's reconnect
    await subscribe();
  } else if (response.status != 200) {
    // An error - let's show it
    showMessage(response.statusText);
    // Reconnect in one second
    await new Promise(resolve => setTimeout(resolve, 1000));
    await subscribe();
  } else {
    // Get and show the message
    let message = await response.text();
    showMessage(message);
    // Call subscribe() again to get the next message
    await subscribe();
  }
}

subscribe();

Single long-lived connection
Provides real-time updates with fewer requests than short polling.
Reduces unnecessary data transfer when there are no updates.
The connection can be kept open for long durations, increasing server load.

Eg- Live customer support chats

3. Web Sockets

WebSockets allow for full-duplex communication between the client and server, making it the most efficient method for real-time data transfer.

The client opens a WebSocket connection with the server and both the client and server can send messages to each other over this single connection.

webSocket = new WebSocket(url, protocols);

// Send message
webSocket.send("Here's some text that the server is urgently awaiting!");

// Receive message
webSocket.onmessage = (event) => {
  console.log(event.data);
};

Continuous bi-directional communication
Multiple libraries to implement it - ws, socket.io etc.
Efficient for high-frequency updates with low overhead
Challenges - maintain communication with 1 server, handle failure and scaling, occupies the resources.

Eg- Live chat applications, Online multiplayer games

4. Server-Sent Events (SSE)

SSE provides a unidirectional stream of updates from the server to the client over an HTTP connection.

const evtSource = new EventSource("ssedemo.php");

evtSource.onmessage = (event) => {
  const newElement = document.createElement("li");
  const eventList = document.getElementById("list");

  newElement.textContent = `message: ${event.data}`;
  eventList.appendChild(newElement);
};

Long live uni-directional communication
Single HTTP connection
Challenges - resource utilization, Browser compatibility and behaviour on inactive tabs

Eg - Feeds, Notifications

5. Webhooks

Webhooks are a server-to-server communication mechanism where the server sends data to a predefined URL when an event occurs. The client doesn’t need to keep checking the server for updates.

Popular for triggering actions between systems, such as payment notifications, GitHub events, or third-party service integrations.

Conclusion

Choosing the right communication method depends on your application's requirements. WebSockets and SSE are perfect for real-time and streaming data, while long polling offers a balance between performance and ease of use. Short polling is a simple solution for infrequent updates but can be resource-intensive, and webhooks are ideal for server-to-server notifications.

Each technique has its own advantages and limitations. Understanding these can help you make informed decisions to build efficient, responsive web applications.

This blog is open for suggestions and discussions!

Understanding Request and Response Headers in REST APIs

Shagun Bidawatka — Tue, 27 Aug 2024 07:18:57 +0000

Headers play a vital role in the communication between a client and a server by providing essential information about the request or response. In this blog, we’ll dive deep into what headers are, why they matter, and some of the most commonly used headers in REST APIs.

What are HTTP Headers?

HTTP headers are key-value pairs sent in the request or response of an HTTP transaction. These headers convey information about the request or response, such as the type of data being sent, the encoding method used, authentication credentials etc.

Headers are used at both request and response time. They facilitate smooth, secure, and efficient communication between the client and server in REST APIs.

Request Headers

Contain more information about the resource to be fetched, or about the client requesting the resource.

Header	Example	Use Case
Authorization	Authorization: Bearer	Sends credentials to authenticate the client with the server.
Content-Type	Content-Type: application/json	Specifies the media type of the data being sent by the client.
Accept	Accept: application/json	Indicates the content types the client can process.
User-Agent	User-Agent: Mozilla/5.0	Identifies the client software making the request.
Cache-Control	Cache-Control: no-cache	Directs how the request should be cached by the server or caches.
Host	Host: example.com	Specifies the domain name of the server the client is requesting.
Accept-Encoding	Accept-Encoding: gzip, deflate	Lists the encoding methods the client can handle.
Accept-Language	Accept-Language: en-US	Indicates the preferred languages for the response.
Referer	Referer: https://example.com	Provides the URL of the resource from which the request was initiated.
Origin	Origin: https://example.com	Identifies the origin of the request, especially for CORS.

Response Headers

Hold additional information about the response, like its location or about the server providing it.

Header	Example	Use Case
Content-Type	application/json	Indicates the media type of the resource in the response body.
Cache-Control	max-age=3600	Defines caching directives for the client and intermediate caches.
Location	/new-resource	Indicates the URL to redirect a client to another resource.
Set-Cookie	sessionId=abc123	Sends cookies from the server to the client for session management.
WWW-Authenticate	Basic realm="Resource"	Defines the authentication method for accessing a resource.
Content-Encoding	gzip	Specifies the encoding method used on the response data.
Content-Length	348	Indicates the size of the response body in bytes.
Expires	Wed, 21 Oct 2024	Gives the date/time after which the response is considered stale.
ETag	"34a64d..."	Provides a unique identifier for a specific version of a resource.
Last-Modified	Tue, 15 Nov 2023	Indicates the date and time the resource was last modified.

Conclusion

Understanding and properly using request and response headers is fundamental to building REST APIs. These headers give information about security, authentication, caching, content negotiation, and API usability.

Understanding YAGNI (You Aren’t Gonna Need It)

Shagun Bidawatka — Tue, 13 Aug 2024 08:07:40 +0000

Let's discuss feature planning, picking and complexity.
To catch the pace, we keep adding features and building complex systems. Thinking, "This will be useful" or "What if we need this in the future?" But often, those extra features end up unused, complicating the code, and slowing down the project. This is where YAGNI, which stands for "You Aren’t Gonna Need It," comes in.

What Is YAGNI?

YAGNI is a concept from Agile and Extreme Programming (XP) methodologies. It states that don’t add functionality until you actually need it. While it might seem smart to build for future possibilities, it often leads to over-engineering—making things more complicated than they need to be.

“Always implement things when you actually need them, never when you just foresee that you need them.” – Ron Jeffries, one of the founders of XP

Examples of YAGNI in Action

Over-Architecting a User Authentication System Imagine you’re building a web application with a user authentication system. You might be tempted to implement a complex, multi-tiered authentication system with social logins, two-factor authentication, and a password recovery mechanism. However, if your application is still in its early stages, with a small user base, such complexity might not be necessary.

By adhering to YAGNI, you could start with a simple email/password authentication system. As your user base grows and the need for more robust security features becomes apparent, you can then iteratively add the necessary components. This approach allows you to ship your product faster and avoid spending time and resources on features that might not be needed in the immediate future.

Premature Optimization in Code

Developers often feel the urge to optimize code early, ensuring it’s as efficient as possible from the get-go. However, optimizing code before it’s clear where the performance bottlenecks lie can be a waste of time.

Building Features for Hypothetical Future Use Cases

YAGNI advises you to hold off on building feature until you have a clear demand for it from your users. This approach helps you avoid unnecessary complexity and keeps your codebase lean and focused on delivering the core functionality that your users need right now.

Pros and Cons of YAGNI

Pros:

Simplifies Codebase:
- YAGNI helps keep your codebase lean by avoiding unnecessary features. This makes the code easier to understand, maintain, and extend.
Faster Development:
- By focusing only on what’s needed, you can deliver features and products more quickly.
Cost Efficiency:
- Time and resources are spent on features that provide immediate value, reducing the overall cost of development and maintenance.
Improves Flexibility:
- With a lean codebase, it’s easier to pivot or adapt to changes in user needs or business requirements.

Cons:

Potential for Short-Term Thinking:
- Focusing too much on the present can lead to missed opportunities for future-proofing. Some features might be more difficult or costly to add later.
Risk of Technical Debt:
- If you delay too many features, you might end up with a backlog of work that becomes technical debt, which can be difficult to address later on.
Possible Rework:
- Avoiding features until they are needed might result in rework or refactoring if the system wasn’t originally designed with future needs in mind.
Balancing Act:
- It can be challenging to strike the right balance between avoiding unnecessary work and planning for future needs. Overemphasis on YAGNI might leave a project unprepared for growth or change.

So, it's not about implementing the YAGNI principle completely in your project, it's about finding the balance.

Why to Choose Types Instead of Interfaces

Shagun Bidawatka — Mon, 05 Aug 2024 07:36:53 +0000

In TypeScript, both Types and Interfaces are used to define the types of objects. However, they have different uses and features. Both can help developers constrain the types of variables and objects when writing code, thereby reducing errors and improving code readability.

So why Types? Let's discuss this.

Types

In TypeScript, a type lets you define the shape of data. It’s flexible and can be used to create unions, intersections, and more.

type User = {
  name: string;
  age: number;
};

type Admin = User & {
  isAdmin: boolean;
};

Interfaces

An interface is another way to define the shape of an object. It’s more rigid than types and is mainly used for defining object shapes and class contracts.

interface User {
  name: string;
  age: number;
}

interface Admin extends User {
  isAdmin: boolean;
}

Why I Prefer Types

Union

Union types let you define a type that can be one of several types. This is handy for function parameters and return types. Here, ID can be either a string or a number, demonstrating the power of union types.

type ID = string | number;

function getUserId(id: ID): string {
  return `User ID: ${id}`;
}

String Literals

Literal types let you specify exact values a variable can have. This can be really useful for defining constants or configuration options.

type Direction = 'north' | 'south' | 'east' | 'west';

function move(direction: Direction) {
  console.log(`Moving ${direction}`);
}

move('north');

Conditional types

Types allow the creation of conditional types, enabling the selection of types based on conditions

type Check<T> = T extends string ? string : number;

let result1: Check<string>; // result1 is of type string
let result2: Check<number>; // result2 is of type number

Intersection

Intersection types allow you to combine multiple types into one. This is especially useful for creating complex type compositions.

type Person = {
  name: string;
  age: number;
};

type Employee = {
  employeeId: number;
};

type EmployeeDetails = Person & Employee;

const employee: EmployeeDetails = {
  name: 'Dev',
  age: 30,
  employeeId: 12345,
};

Choosing between types and interfaces ultimately depends on your specific use case and personal preference. However, understanding the strengths of each can help you make more informed decisions and write better TypeScript code.

Principle of least astonishment - tech product POV

Shagun Bidawatka — Thu, 01 Aug 2024 07:14:43 +0000

As a developer, you strive to create interfaces that are not only functional but also intuitive and user-friendly. One of the guiding principles to achieve this is the Principle of Least Astonishment (PoLA). This principle states that a system should behave in a way that least surprises its users, ensuring that their expectations are met and interactions are smooth. In this blog, we'll explore PoLA from a developer's perspective, its importance, and practical ways to implement it in your projects.

Why PoLA Matters

User Experience (UX): Good UX is about meeting user expectations. When an application behaves as users anticipate, it reduces frustration and increases satisfaction.
Usability: Consistency and predictability make an application easier to learn and use. Users spend less time figuring out how things work and more time achieving their goals.
Error Reduction: When users understand the consequences of their actions, they are less likely to make mistakes.
Trust: Predictable behaviour fosters trust. Users are more likely to return to an application that consistently meets their expectations.

How to implement it in the project

Consistent Design Patterns

Consistency in design helps users build a mental model of how the application works. Here are some key aspects to focus on:

Navigation: Use familiar navigation patterns. A product should follow common navigation structures like top menus, sidebars, and breadcrumb trails.
Forms: Place labels and input fields in predictable locations. For instance, labels are typically placed above or to the left of input fields and common way of showcasing field and form validations.
Buttons: Use standard button styles for usual actions like "Submit," "Cancel,", "Edit" and "Delete".

Clear and Immediate Feedback on user actions

Feedback informs users about the outcome of their actions. To implement this:

Visual Feedback: Highlight interactive elements and use loading indicators for actions that take time to process.
Notifications or toasts: Display messages for successful actions, errors, and warnings. Prefer these messages to be clear and concise.
Animations: Use animations to indicate changes, but it shouldn't be distracting and disturbing.

Meaningful Defaults

Giving default values an idea to the users.

Form Fields: Pre-fill fields with common values where appropriate.
Settings: Choose default settings that cater to the majority of users while providing options for customization.

Avoiding Surprises

Use text and labels that are understandable to the users. Surprising users can lead to confusion and frustration. Avoid this by adding clear terminology and not hiding things or information behind interactions.

Challenges in Applying POLA

While POLA is a valuable principle, there are challenges in its application. Balancing innovation with familiarity can be difficult, as introducing new features or designs might initially surprise users. However, clear communication and gradual introduction of changes can mitigate this.

Case Study

In one of our projects, we implemented a file upload feature where users needed to upload a file, enter a name, and then click an "Add" button to complete the upload process. Initially, we displayed the uploaded file in the interface as soon as the user selected it, which led users to believe the file had been successfully uploaded without needing to click "Add". This led to confusion and as a result, many users reported the issue of the upload file feature.

This illustrates a practical application of the Principle of Least Astonishment, showing how misalignment between user expectations and system behaviour can cause issues. And they can be avoided and corrected. Embracing PoLA will not only make your applications more user-friendly but also set you apart as a thoughtful and skilled professional in the tech industry.

Advanced State Management - XState

Shagun Bidawatka — Sun, 21 Jul 2024 11:30:06 +0000

Here, we will use and discuss about XState which is a state management and orchestration solution for both JavaScript and TypeScript apps for both frontend and backend applications.

For bigger applications managing the global state properly is essential, there are several ways to do so, like using React context, Redux, MobX and React Query.

XState is a simple library to manage state component level as well as global level by using their hooks. So, let's dive into it's implementation.

1. Import the module

We will be importing both xstate and @xstate/react latest versions into our existing project.

npm install xstate @xstate/react

2. Adding machine

Create a new file eg: MyFirstMachine.ts

const countMachine = createMachine({
  context: {
    count: 0,
  },
  on: {
    INC: {
      actions: assign({
        count: ({ context }) => context.count + 1,
      }),
    },
    DEC: {
      actions: assign({
        count: ({ context }) => context.count - 1,
      }),
    },
    SET: {
      actions: assign({
        count: ({ event }) => event.value,
      }),
    },
  },
});

You can see the visualisation of the machine using Xstate Vscode extension.

3. Using machine and create actor

To use the global logic we have implemented in our machine. We will use two hooks useMachine and createActor.

 const [state, send] = useMachine(countMachine);
 const countActor = createActor(countMachine).start();

4. Performing actions

Now, can perform read and write actions using these constants.
To modify the value use -

send({ type: "INC" })
send({ type: "DEC" })
send({ type: "SET", value: 5 })

And the access the updated real-time value we will value use-

state.context

Adding complete code file for accessing and modifying for your convenience.

import { useMachine } from "@xstate/react";
import { countMachine } from "./XstateMachine";
import { createActor } from "xstate";

const App = () => {
  const [state, send] = useMachine(countMachine);
  const countActor = createActor(countMachine).start();

  countActor.subscribe((state) => {
    console.log(state.context.count);
  });

  return (
      <div className="relative z-0 bg-primary text-center">
        <div>Hello XSTATE</div>
        <div>{JSON.stringify(state.context)}</div>

        <button onClick={() => send({ type: "INC" })}>Increase By 1</button>

        <button onClick={() => send({ type: "DEC" })}>Decrease By 1</button>

        <button onClick={() => send({ type: "SET", value: 5 })}>
          Set Count to 5
        </button>
      </div>
  );
};

export default App;

That's how you can read, write and modify the state just by using XState. I have used multiple state management ways, it is one of the simplest ways I found. If you have anything to add to it feel free to comment.

Import Excel/datasheet data to your Nextjs application

Shagun Bidawatka — Wed, 17 Jul 2024 08:55:15 +0000

Here, we will look into the process of importing Excel data into your nextjs application and show it in the way you want. I'll keep it crisp and to the point. So let's dive into the process-

1. Create the Nextjs project

To create a Nextjs project use the command -
npx create-next-app excel-next

And to run the application
npm run dev

2. Node module for Excel import

The node module we will use to import Excel data is xlsx. To import the module run command -

npm install xlsx

3. Create a file to import and show Excel data

To get the data we will make an Axios fetch call to the sheet url-

const options = { url, responseType: "arraybuffer", };
let axiosResponse = await axios(options);

4. Read Workbook

To get the data in readable form we will use xlsx. read attempts to parse data and return a workbook object.

const workbook = XLSX.read(axiosResponse.data)

5. Simplify and show data

We are getting all the sheets from our excel in this workbook data. So let's sort out sheet and data in simplified object.

 let worksheets = workbook.SheetNames.map((sheetName) => {
       return {
         sheetName,
         data: XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]),
       };
     });

 console.log("json:\n", JSON.stringify(worksheets), "\n\n");

Output:

Here you can notice the sheet name and the corresponding data. Also, the first object of the data is the title of the rows. So, while showing the data we will slice the array.

 {sheetData &&
    sheetData.map((sheet) => (
      <>
       <p>{sheet?.sheetName}</p>
       <Table dataSource={sheet?.data?.slice(1)} columns={columns} />
      </>
 ))}

For convenience adding the combined code.

import { Col, Row, Table } from "antd";
import { useEffect, useState } from "react";

export default function MyNextJsExcelSheet() {
  const axios = require("axios");
  const XLSX = require("xlsx");
  const [sheetData, setSheetData] = useState<any>([]);

  const testAxiosXlsx = async (url) => {
    const options = {
      url,
      responseType: "arraybuffer",
    };
    let axiosResponse = await axios(options);
    const workbook = XLSX.read(axiosResponse.data);

    let worksheets = workbook.SheetNames.map((sheetName) => {
      return {
        sheetName,
        data: XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]),
      };
    });
    setSheetData(worksheets);
    console.log("json:\n", JSON.stringify(worksheets), "\n\n");
  };
  const validate = () => {
    testAxiosXlsx(
      "https://docs.google.com/spreadsheets/d/1arazUp1Aq9WeNMYDAK8d4_kz8YpwcHv1UdxMJKFOUIk/edit?usp=sharing"
    );
  };

  const columns = [
    {
      title: "Segment",
      dataIndex: "A",
      key: "Segment",
    },
    {
      title: "Country",
      dataIndex: "B",
      key: "Country",
    },
    {
      title: "Product",
      dataIndex: "C",
      key: "Product",
    },
    {
      title: "Units Sold",
      dataIndex: "D",
      key: "Units Sold",
    },
    {
      title: "Manufacturing Price",
      dataIndex: "E",
      key: "Manufacturing Price",
    },
    {
      title: "Sale Price",
      dataIndex: "F",
      key: "Sale Price",
    },
  ];

  useEffect(() => validate(), []);
  return (
    <div>
        <Col lg={12}>
          <h3>The Data of The Uploaded Excel Sheet</h3>
        </Col>
        <Col lg={24}>
          {sheetData &&
            sheetData.map((sheet) => (
              <>
                <p>{sheet?.sheetName}</p>
                <Table dataSource={sheet?.data?.slice(1)} columns={columns} />
              </>
            ))}
        </Col>
    </div>
  );
}

With these steps, you're now equipped to seamlessly integrate Excel data into your Next.js application, opening up a world of possibilities for dynamic and data-driven web experiences.