DEV Community: abhilaksh-arora

🚀 TOON (Token-Oriented Object Notation) — The Smarter, Lighter JSON for LLMs

abhilaksh-arora — Sun, 02 Nov 2025 16:04:56 +0000

When building AI and LLM-based applications, one of the biggest hidden costs often comes from something simple — the format of your data.

Every {}, [], and " inside JSON counts as a token when you send it to a Large Language Model (LLM).

With big payloads or complex structured data, this can burn through tokens (and money) fast. ⚡️

That's where TOON (Token-Oriented Object Notation) steps in — a format designed specifically for LLMs to make structured data compact, readable, and token-efficient.

💡 What Is TOON?

TOON stands for Token-Oriented Object Notation — a modern, lightweight data format optimized for LLMs.

Think of it as:

"JSON, reimagined for token efficiency and human readability."

It trims the excess — no curly braces, square brackets, or quotes — and uses indentation plus tabular patterns instead.

The result is a format that models (and humans) can parse easily, while using far fewer tokens.

⚙️ Why TOON Matters

When you send JSON to an LLM:

Every punctuation mark adds to the token count.
Repeated keys in long arrays multiply the cost.
The verbosity doesn't actually help model understanding.

TOON solves this by:

Declaring keys once per table-like block
Replacing commas/braces with indentation
Maintaining data clarity but cutting syntactic noise

💰 The result: 30–60% fewer tokens on average.

🧠 Example: TOON in Action

JSON

{
  "users": [
    { "id": 1, "name": "Alice" },
    { "id": 2, "name": "Bob" }
  ]
}

TOON

users[2]{id,name}:
  1,Alice
  2,Bob

Same structure.

Same meaning.

Roughly half the tokens.

🧰 Encode JSON → TOON in TypeScript

Try it yourself using the official TOON package.

Installation

npm install @toon-format/toon
# or
pnpm add @toon-format/toon

Example Code

import { encode, decode } from "@toon-format/toon";

const data = {
  users: [
    { id: 1, name: "Alice", role: "admin" },
    { id: 2, name: "Bob", role: "user" },
  ],
};

const toon = encode(data);
console.log("TOON Format:\n", toon);

// Decode back to JSON if needed
const parsed = decode(toon);
console.log("Decoded JSON:\n", parsed);

Output

users[2]{id,name,role}:
  1,Alice,admin
  2,Bob,user

⚖️ JSON vs TOON

Feature	JSON	TOON
Purpose	Universal data format (APIs, configs, storage)	Token-efficient format for LLMs
Syntax	Verbose `{}`, `[]`, `"`	Compact indentation, tabular style
Readability	Moderate	High (human + model friendly)
Token Usage	High	🔥 Up to 60% fewer
Best Use Case	APIs, persistence	LLM prompts, structured outputs
Nested Objects	Excellent	⚠️ Inefficient for deep nesting
Ecosystem	Mature, universal	Emerging, growing fast

⚠️ When Not to Use TOON

TOON shines for flat, tabular JSON objects, but it's not ideal for deeply nested structures.

In those cases, the extra indentation and context actually increase tokens.

Example:

{
  "company": {
    "departments": [
      {
        "name": "Engineering",
        "employees": [{ "id": 1, "name": "Alice" }]
      }
    ]
  }
}

➡ Converting this to TOON can be longer, not shorter.

✅ Best suited for

Flat lists (users, products, messages)
Prompt templates
Model training or evaluation datasets

❌ Avoid for

Deeply nested hierarchies
Complex relational data

📊 Token Efficiency Snapshot

Dataset	JSON Tokens	TOON Tokens	Savings
User list	150	82	−45%
Product catalog	320	180	−44%
Nested data	410	435	❌ +6%

🧩 TL;DR

TOON (Token-Oriented Object Notation) is a lightweight, token-efficient alternative to JSON — built for AI and LLM workloads.

✅ Cleaner syntax

✅ Human-readable

✅ Up to 60% fewer tokens

But remember — it works best for flat JSON objects, not deeply nested structures.

If you're building LLM pipelines, prompt templates, or structured AI datasets, TOON can save tokens, reduce cost, and keep your data clean.

🧪 Bonus: Benchmark Token Count (JSON vs TOON)

Here's a quick Node.js script you can use to compare token usage between JSON and TOON using OpenAI's tiktoken tokenizer.

Install Dependencies

npm install @toon-format/toon tiktoken

Script

import { encode } from "@toon-format/toon";
import { encoding_for_model } from "tiktoken";

const data = {
  users: [
    { id: 1, name: "Alice", role: "admin" },
    { id: 2, name: "Bob", role: "user" },
    { id: 3, name: "Charlie", role: "editor" },
  ],
};

const jsonData = JSON.stringify(data, null, 2);
const toonData = encode(data);

// Use GPT-4 tokenizer (you can change to "gpt-3.5-turbo" etc.)
const tokenizer = encoding_for_model("gpt-4o-mini");

const jsonTokens = tokenizer.encode(jsonData).length;
const toonTokens = tokenizer.encode(toonData).length;

console.log("📊 Token Comparison");
console.log("-------------------");
console.log("JSON tokens:", jsonTokens);
console.log("TOON tokens:", toonTokens);
console.log("Savings:", (((jsonTokens - toonTokens) / jsonTokens) * 100).toFixed(2) + "%");

tokenizer.free();

Example Output

📊 Token Comparison
-------------------
JSON tokens: 84
TOON tokens: 32
Savings: 61.90%

You can tweak this for your own datasets — you'll see consistent 30–60% token savings for flat, tabular data.

💬 Final Thoughts

The ecosystem around LLMs is evolving fast, and even small optimizations — like switching from JSON to TOON — can create huge cost and performance improvements at scale.

Try it out, benchmark it, and see how many tokens (and dollars) you save! 🚀

Tags: #AI #LLM #PromptEngineering #JSON #TOON #AIOptimization #OpenAI #DataCompression #DeveloperTools

Building a Real-Time Peer-to-Peer File Sharing Web App with WebSockets and Pako Compression

abhilaksh-arora — Fri, 07 Feb 2025 12:09:37 +0000

Introduction

In today’s digital world, real-time file sharing has become essential. Services like AirDrop allow seamless peer-to-peer transfers, but implementing such a system over the web requires careful design choices. In this blog, I will walk you through my approach to building a real-time, WebSocket-based file-sharing system that supports compressed file transfers using Pako.js.

This project enables users to join a room, discover peers, and exchange files efficiently over WebSockets. The added advantage of Pako compression reduces network bandwidth usage, making transfers faster and more efficient.

Deployed URL-: https://intrashare.abhilaksharora.com/

Project Architecture & Tech Stack

Frontend:

Next.js – For a modern and scalable frontend.
Tailwind CSS – For styling.
Pako.js – To handle file compression and decompression.
WebSockets – For real-time communication.

Backend:

Node.js – Server-side JavaScript runtime.
WebSocket Server (ws package) – To manage real-time connections and room-based messaging.
Express.js (Optional) – If we extend it with REST APIs.

Frontend Implementation

1. Establishing a WebSocket Connection

We need to initialize a WebSocket connection that allows users to join a room and communicate.

Extracting Room Code from URL

useEffect(() => {
  if (typeof window !== "undefined") {
    const params = new URLSearchParams(window.location.search);
    const roomCodeFromURL = params.get("roomCode");
    if (roomCodeFromURL) setRoomCode(roomCodeFromURL);
  }
}, []);

This extracts the roomCode parameter from the URL (e.g., ?roomCode=ABCDE) and updates the state.

Joining a WebSocket Room

const joinRoom = (roomCode: string) => {
  if (!roomCode.trim()) {
    alert("Please enter a room code!");
    return;
  }

  if (myNameRef.current === "") {
    const name = randomName();
    setMyName(name);
    myNameRef.current = name;
  }

  const socket = new WebSocket("wss://file-transfer-server.com");
  setWs(socket);

  socket.onopen = () => {
    socket.send(JSON.stringify({ type: "join_room", roomCode, name: myNameRef.current }));
  };

  socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.type === "room_update") {
      setUsersInRoom(data.users.filter((user) => user !== myNameRef.current));
    }
  };
};

This function:

Validates the room code.
Generates a random user name if none exists.
Establishes a WebSocket connection.
Notifies the server that a user has joined.
Listens for updates about connected users.

2. File Selection & Compression

Users can select a file, which is then compressed before sending.

Compressing a File Using Pako.js

const sendFile = (file: File) => {
  const reader = new FileReader();
  reader.onloadend = () => {
    const arrayBuffer = reader.result as ArrayBuffer;
    const uint8Array = new Uint8Array(arrayBuffer);
    const compressedData = pako.deflate(uint8Array);

    ws?.send(JSON.stringify({
      type: "file",
      to: selectedConnection,
      fileName: file.name,
      fileData: Array.from(compressedData),
      from: myName,
    }));
  };
  reader.readAsArrayBuffer(file);
};

Reads the file as an ArrayBuffer.
Converts it into a Uint8Array.
Compresses it using Pako’s deflate function.
Sends it over WebSocket.

3. Receiving & Decompressing Files

When a file is received, it is first decompressed before saving.

const handleIncomingFile = (data) => {
  const compressedData = new Uint8Array(data.fileData);
  try {
    const decompressedData = pako.inflate(compressedData);
    setIncomingFiles([...incomingFiles, { fileName: data.fileName, fileData: decompressedData }]);
  } catch (error) {
    console.error("Decompression failed:", error);
  }
};

Extracts the compressed file data.
Decompresses it using Pako’s inflate function.
Stores it for the user to download.

Backend Implementation

1. WebSocket Server Setup

import WebSocket, { WebSocketServer } from "ws";

const wss = new WebSocketServer({ port: 8080 });
const rooms: Record<string, { ws: WebSocket; name: string }[]> = {};

Creates a WebSocket server.
Stores active rooms and connected users.

2. Handling User Connections

wss.on("connection", (ws) => {
  ws.on("message", (message) => {
    const data = JSON.parse(message.toString());

    if (data.type === "join_room") {
      if (!rooms[data.roomCode]) rooms[data.roomCode] = [];
      rooms[data.roomCode].push({ ws, name: data.name });
      broadcastRoom(data.roomCode);
    }
  });
});

Adds users to a room.
Broadcasts updates when users join.

3. Handling File Transfers

function handleFileTransfer(data) {
  rooms[data.roomCode]?.forEach((client) => {
    if (client.name === data.to) {
      client.ws.send(JSON.stringify(data));
    }
  });
}

Routes compressed file data to the intended recipient.

Conclusion & Future Enhancements

This WebSocket-based file-sharing system provides real-time, efficient file transfers with Pako compression to optimize bandwidth usage. Future improvements may include:

WebRTC for Peer-to-Peer transfers (eliminating the server bottleneck).
Multi-file transfer support.
End-to-end encryption for security.

This approach demonstrates how WebSockets, Pako.js, and file compression can be leveraged to build a high-performance file-sharing system.

Concert Ticket Booking Platform: A Highly Scalable and Reliable Design

abhilaksh-arora — Mon, 20 Jan 2025 14:02:02 +0000

Problem Statement:

Design a highly scalable and reliable concert ticket booking platform for a live event where:

10,000 tickets are available across multiple zones/arenas (e.g., General Admission, VIP, Millionaire Pit).
Tickets go live at exactly 10:00 AM, with approximately 10 million users accessing the platform simultaneously.
Users should experience real-time updates on their queue position and ticket availability.
The system must prevent double booking of seats, handle cancellations, and reintroduce canceled tickets to the pool.
Users have 10 minutes to complete their booking; otherwise, their session expires.

Assumptions:

To make the design adaptable to various scenarios, we consider two primary assumptions:

Assumption 1: Specific Seat Numbers

Each seat is uniquely identified (e.g., 1A, 1B, etc.). Users select specific seats during booking. This model is common in arenas, theaters, and venues with assigned seating.

Assumption 2: General Pool of Seats

Tickets are sold as part of a general pool without specific seat assignments. Users book tickets based on availability in a zone, but seating is on a first-come, first-served basis. This model is suitable for standing areas, open parks, or general admission zones.

High-Level Design (HLD):

System Requirements:

Functional Requirements:

Users can view ticket availability in real time.
The system queues users when tickets go live.
Users can reserve tickets for 10 minutes before completing payment.
Canceled or expired reservations return to availability.
Users can see their position in the queue.

Non-Functional Requirements:

Scalability: Handle 10 million concurrent users.
Reliability: Ensure no double bookings or data inconsistencies.
Low Latency: Real-time updates on availability and queue positions.
Fault Tolerance: Handle partial system failures gracefully.
Consistency: Maintain consistent ticket inventory across multiple services.

Architecture Overview:

Frontend:
- Displays real-time ticket availability.
- Shows queue position and updates dynamically using WebSockets.
Backend:
- Orchestrates ticket reservation, payment, and inventory management.
- Provides APIs for frontend interactions.
Queue Management:
- Manages user queues for fairness and prevents system overload.
- Redis lists are used to maintain queue order.
Database:
- Stores persistent ticket information, including seat details and statuses (AVAILABLE, RESERVED, BOOKED).
- PostgreSQL for strong consistency and relational data modeling.
Caching Layer:
- Redis for real-time ticket inventory management and reservation TTLs. Message Queue:
- RabbitMQ/Kafka for handling asynchronous operations like notifications and inventory updates.

Component Breakdown:

Frontend:
- Displays live updates on ticket availability and user queue positions.
- Communicates with the backend using REST APIs and WebSockets.
Load Balancer:
- Distributes traffic across multiple backend servers to ensure scalability.
- Can use AWS Elastic Load Balancer (ELB) or Nginx.
Queue Management:
- Implements user queuing using BullMQ.
- Using a Redis sorted set to track user positions in the queue.
- A consumer processes users in FIFO order.
- Once dequeued, a user gets 10 minutes (TTL) in Redis to select tickets.
Inventory Management:
- Tracks ticket availability in realtime.
- Stored in Redis for high-speed access with a fallback to PostgreSQL.
Session Management:
- Redis handles user sessions with a TTL of 10 minutes.
- Reserved tickets are automatically released upon session expiration.
- Once a user selects tickets or their session expires, remove them from the queue and the Redis sorted set.
Database:
- PostgreSQL for durable storage of ticket data.
- Schema:

 tickets (id, arena_id, seat_id, status, user_id, reserved_at)  
 arenas (id, name, total_capacity)  
 users (id, name, email)

Messaging and Notifications:
- RabbitMQ for notifying users about queue updates and broadcasting real-time availability changes to WebSockets.
Payment Gateway Integration:
- Integrates with payment services like Stripe.
- Ensures tickets remain reserved until payment is confirmed or the session expires.

Low-Level Design (LLD) for Concert Ticket Booking System

Detailed Components and Interactions

BullMQ Queue:

Purpose: To manage user queues fairly, track positions efficiently, and prevent system overload.

Queue:

Primary Queue: Handles user queuing and job processing.
FIFO Order: Users are processed in the order they enter the queue.
Redis Backing: BullMQ leverages Redis for persistence.

Redis Sorted Set:

Key: arena::queue
Purpose: Tracks user positions in the queue for real-time updates.
Operations:
- ZADD: Add a user with a score representing their position.
- ZRANK: Get a user’s position in the queue.
- ZREM: Remove a user from the queue when dequeued.
- ZCARD: Get the total number of users in the queue.

Workflow:

Adding Users:

BullMQ: queue.add() to enqueue users.
Redis: ZADD to track the user's position by score (e.g., timestamp or incrementing counter).

Processing Users:

BullMQ: queue.process() to dequeue and handle users.
Redis: ZREM to remove the processed user from the sorted set.

Tracking Position:

Use ZRANK to retrieve the current position of a user.
Use ZCARD for the total queue size.

Advantages:

BullMQ: Simplifies job processing with robust retry mechanisms and concurrency control.
Redis Sorted Set: Efficient position tracking with O(log N) operations, ideal for real-time updates.

Inventory Management

Purpose: To track and update ticket availability in real time.

Redis Structures:

Specific Seats:

Key: arena::seats
Value: Hash map of seat IDs to statuses.
Example:
- HSET arena:VIP:seats 1A AVAILABLE
- HSET arena:VIP:seats 1B RESERVED

General Pool:

Key: arena::available_tickets
Value: Integer count of available tickets.
Example:
- SET arena:general:available_tickets 5000

Workflow:

When a user selects a ticket, the system updates its status in Redis (e.g., HSET for specific seats, DECR for general pools).
For confirmed bookings, the status is updated to BOOKED.
For canceled or expired reservations, the system reverts the status to AVAILABLE.

Session Management

Purpose: To manage user sessions and enforce the 10-minute reservation limit.

Redis Keys:

Key: session:
Value: JSON object with session details.
TTL: 10 minutes (automatically expires).

Workflow:

On reservation, create a session in Redis with a 10-minute TTL.
If the user completes payment within the TTL, finalize the booking.
If the session expires, release the tickets back to the pool.

Ticket Booking Process

Steps:

User Selects Ticket(s):

API: POST /tickets/reserve
Request Body:

  {
    "user_id": "123",
    "zone_id": "VIP",
    "seats": ["1A", "1B"]
  }

Actions:
- Check availability in Redis.
- Mark tickets as RESERVED in Redis.
- Start a session with a 10-minute TTL.

User Completes Payment:

API: POST /tickets/book
Request Body:

  {
    "user_id": "123",
    "zone_id": "VIP",
    "seats": ["1A", "1B"],
    "payment_id": "pay_456"
  }

Actions:
- Verify payment.
- Update ticket status to BOOKED in Redis and PostgreSQL.
- In the case of the general pool, decrement the ticket count.
- Delete the user's session information from Redis to free up resources.
- Notify other users via WebSocket about the change in seat availability.

User Cancels Reservation:

API: POST /tickets/cancel
Actions:
- Update ticket status to AVAILABLE in Redis and PostgreSQL.

Real-Time Updates

WebSocket Events:

queue.update:

Triggered when a user’s queue position changes.
Payload:

  {
    "user_id": "123",
    "position": 42
  }

availability.update:

Triggered when ticket inventory changes.
Payload:

  {
    "zone_id": "VIP",
    "available_tickets": 95
  }

Database Transactions

Reserve Ticket:

BEGIN;
SELECT * FROM tickets WHERE id = '1A' AND status = 'AVAILABLE' FOR UPDATE;
UPDATE tickets SET status = 'RESERVED', reserved_at = NOW() WHERE id = '1A';
COMMIT;

Book Ticket:

BEGIN;
UPDATE tickets SET status = 'BOOKED' WHERE id = '1A';
INSERT INTO payments (id, user_id, amount) VALUES ('pay_456', '123', 100);
COMMIT;

Cancel Ticket:

BEGIN;
UPDATE tickets SET status = 'AVAILABLE', reserved_at = NULL WHERE id = '1A';
COMMIT;

Messaging and Notifications

Use RabbitMQ for:

Broadcasting availability updates to WebSocket services.
Notifying users of reservation expirations.

Summary:

When the concert tickets go live at 10:00 AM, users are placed in a queue managed by Redis, ensuring fairness and avoiding system overload. The frontend displays real-time availability and queue position using WebSockets. When a user reaches their turn, they select tickets, which are temporarily marked as RESERVED in Redis with a 10-minute TTL to prevent double booking. If the user completes payment within the session, the tickets are marked BOOKED in the database and removed from Redis reservations. If the session expires or the user cancels, the tickets return to the AVAILABLE pool, and updates are pushed to the next users in the queue. This flow ensures high concurrency handling, real-time updates, and seamless booking without collisions.

Why This Approach Works

Real-Time Updates: Redis ensures fast updates and notifications for concurrent users.
Durability: PostgreSQL acts as the source of truth to ensure data is not lost in case of Redis failures.
Concurrency: Redis's atomic operations (MULTI and WATCH) prevent double booking.
Scalability: WebSocket-based updates ensure seamless communication with millions of users.

This detailed LLD ensures a robust, scalable, and user-friendly platform for concert ticket booking, addressing the needs for both specific seat assignments and general admission models.

Understanding Zod: A Comprehensive Guide to Schema Validation in JavaScript/Typescript

abhilaksh-arora — Thu, 20 Jun 2024 02:13:32 +0000

In the rapidly evolving world of JavaScript development, ensuring the integrity of data is paramount. Whether you're developing a full-stack application, working on the frontend, or managing a complex backend system, the need to validate data consistently and reliably is crucial. Enter Zod, a powerful TypeScript-first schema declaration and validation library. In this blog post, we'll dive deep into what Zod is, why you should consider using it, and how to get started with it.

What is Zod?

Zod is a TypeScript-first schema declaration and validation library designed to provide a type-safe way to validate JavaScript objects. It helps developers define the shape of expected data and automatically generate TypeScript types from these schemas, ensuring both compile-time and runtime validation. This dual capability makes Zod an invaluable tool for TypeScript developers looking to enforce data integrity in their applications.

Why Use Zod?

Type Safety: Zod integrates seamlessly with TypeScript, allowing you to define schemas that are strongly typed. This ensures that your data adheres to the expected structure, reducing the risk of runtime errors.
Ease of Use: Zod's intuitive API makes it easy to define and validate schemas. It provides a straightforward syntax that is easy to read and write, making it accessible even for developers new to TypeScript or schema validation.
Comprehensive Validation: Zod supports a wide range of data types and validation rules out of the box, from simple primitives like strings and numbers to complex nested objects and arrays.
Extensibility: Zod allows you to create custom validation logic, enabling you to tailor the validation process to your specific needs.
Security: By validating incoming data, Zod helps prevent malicious payloads from being processed. This is crucial for protecting your application from common security threats such as SQL injection and other forms of data-based attacks.
Integration: Zod can be easily integrated with various frameworks and libraries, including React, Express, and more, making it a versatile choice for different types of projects.

Using Zod in Both Backend and Frontend

In a typical full-stack application, you often need to validate the same data on both the frontend and backend. To avoid duplication and ensure consistency, it's a good practice to define your Zod schemas in a shared package that can be used across both environments. This approach not only reduces code duplication but also ensures that both the client and server agree on the data structure.

Creating a Shared Zod Schema Package

Let's explore how to create a shared Zod schema package that can be published to npm and used in both your frontend and backend projects.

Setup the Project

First, create a new directory for your shared package and initialize it with npm:

mkdir my-shared-schemas
cd my-shared-schemas
npm init -y

Install Zod

Install Zod as a dependency:

npm install zod

Define Your Schemas

Create a schemas directory and define your Zod schemas in a file, for example, userSchema.ts:

// src/schemas/userSchema.ts
import { z } from 'zod';

export const userSchema = z.object({
  name: z.string(),
  age: z.number(),
  email: z.string().email(),
});

Build and Publish the Package

Update your package.json to include the necessary build scripts and prepare the package for publishing. You can use a tool like tsc (TypeScript Compiler) to compile your TypeScript code:

{
  "name": "my-shared-schemas",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "build": "tsc",
    "prepublishOnly": "npm run build"
  },
  "devDependencies": {
    "typescript": "^4.0.0"
  },
  "dependencies": {
    "zod": "^3.0.0"
  }
}

Add a tsconfig.json file to configure TypeScript:

{
  "compilerOptions": {
    "outDir": "./dist",
    "module": "commonjs",
    "target": "es6",
    "declaration": true,
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

Now, build and publish the package:

npm run build
npm publish

Using the Shared Schema Package

With your shared schema package published to npm, you can now install and use it in both your frontend and backend projects.

In the Frontend:

Install the shared schema package:

npm install my-shared-schemas

Use the schemas to validate data before sending it to the backend:

import { userSchema } from 'my-shared-schemas';

const userData = {
  name: "John Doe",
  age: 30,
  email: "john.doe@example.com",
};

try {
  userSchema.parse(userData);
  // Send valid data to backend
} catch (e) {
  console.error(e.errors);
  // Handle validation errors
}

In the Backend:

Install the shared schema package:

npm install my-shared-schemas

Use the schemas to validate incoming data from the frontend:

import express from 'express';
import { userSchema } from 'my-shared-schemas';

const app = express();
app.use(express.json());

app.post('/users', (req, res) => {
  try {
    userSchema.parse(req.body);
    // Handle valid data
    res.status(200).send("User data is valid");
  } catch (e) {
    res.status(400).send(e.errors);
  }
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

By defining and sharing your Zod schemas across both the frontend and backend, you ensure that data is consistently validated at every step. This not only improves code quality but also enhances security by preventing invalid or malicious data from being processed by your server. For example, by validating incoming requests against predefined schemas, you can mitigate the risk of SQL injection and other types of injection attacks, as any unexpected or harmful input will be caught and rejected.

Advanced Usage

Zod offers advanced features to handle more complex validation scenarios, such as:

Union Types: Validate data against multiple schemas.
Optional and Nullable Types: Handle optional and nullable fields.
Custom Validation: Create custom validation rules.

Here's an example of advanced usage:

// Union type
const stringOrNumber = z.union([z.string(), z.number()]);
stringOrNumber.parse("Hello"); // This will pass
stringOrNumber.parse(123); // This will pass

// Optional and nullable fields
const optionalSchema = z.object({
  name: z.string(),
  age: z.number().optional(),
  email: z.string().nullable(),
});

// Custom validation
const positiveNumber = z.number().refine(value => value > 0, {
  message: "Number must be positive",
});
positiveNumber.parse(10); // This will pass
positiveNumber.parse(-5); // This will fail with custom error message

Conclusion

Zod is a powerful and versatile tool for schema validation in JavaScript and TypeScript applications. Its seamless integration with TypeScript, ease of use, and extensive validation capabilities make it an excellent choice for developers looking to enforce data integrity. Whether you're working on a small project or a large-scale application, Zod can help you ensure that your data is always valid and correctly structured.

By incorporating Zod into your development workflow and creating a shared schema package, you can catch errors early, improve code quality, and build more robust applications. This approach ensures consistency across your frontend and backend, making your data validation process more efficient and reliable. Moreover, by validating data both on the client side and server side, you enhance the security of your application, reducing the risk of various types of injection attacks and other malicious exploits.

Give Zod a try and experience the benefits of type-safe schema validation in your projects.

Building a Scalable Authentication System with JWT in a MERN Stack Application

abhilaksh-arora — Tue, 18 Jun 2024 03:07:09 +0000

Introduction:

Authentication is a fundamental aspect of web development, ensuring that users can securely access protected resources. JSON Web Tokens (JWT) have become a popular choice for implementing authentication in modern web applications due to their simplicity and scalability. In this tutorial, we'll explore how to implement a scalable authentication system using JWT in a MERN (MongoDB, Express.js, React, Node.js) stack application. We'll cover user registration, login, token generation, and secure authorization.

Prerequisites:

Before we begin, make sure you have the following prerequisites installed:

Node.js and npm (Node Package Manager)
MongoDB (you can use a local or remote instance)
React.js (if you're building a frontend)

Setting Up the Backend:

Initialize a New Node.js Project:

Create a new directory for your project and initialize a new Node.js project by running the following commands:

   mkdir mern-authentication
   cd mern-authentication
   npm init -y

Install Required Packages:

Install the necessary packages for our backend using the following command:

   npm install express mongoose jsonwebtoken bcryptjs body-parser cors

express: Web framework for Node.js.
mongoose: MongoDB object modeling tool.
jsonwebtoken: Library for generating JWT tokens.
bcryptjs: Library for hashing passwords securely.
body-parser: Middleware for parsing request bodies.
cors: Middleware for enabling Cross-Origin Resource Sharing.

Create a MongoDB Database:

Set up a MongoDB database either locally or using a cloud service like MongoDB Atlas. Note down the connection URI.

Create the Backend Server:

Create a file named server.js and set up a basic Express server with MongoDB connection:

   // server.js

   const express = require('express');
   const mongoose = require('mongoose');
   const bodyParser = require('body-parser');
   const cors = require('cors');

   const app = express();
   const PORT = process.env.PORT || 5000;

   // Middleware
   app.use(bodyParser.json());
   app.use(cors());

   // Connect to MongoDB
   mongoose.connect('mongodb://localhost:27017/mern_auth', {
     useNewUrlParser: true,
     useUnifiedTopology: true,
     useCreateIndex: true,
   })
   .then(() => console.log('MongoDB connected'))
   .catch(err => console.log(err));

   // Routes
   app.use('/api/auth', require('./routes/auth'));

   // Start the server
   app.listen(PORT, () => {
     console.log(`Server running on port ${PORT}`);
   });

Create Routes for Authentication:

Create a folder named routes and add a file named auth.js inside it. This file will contain routes for user registration, login, and token verification.

   // routes/auth.js

   const express = require('express');
   const router = express.Router();
   const bcrypt = require('bcryptjs');
   const jwt = require('jsonwebtoken');
   const User = require('../models/User');
   const { check, validationResult } = require('express-validator');

   // Register a new user
   router.post('/register', [
     check('name', 'Please enter a name').not().isEmpty(),
     check('email', 'Please include a valid email').isEmail(),
     check('password', 'Please enter a password with 6 or more characters').isLength({ min: 6 })
   ], async (req, res) => {
     // Validation errors
     const errors = validationResult(req);
     if (!errors.isEmpty()) {
       return res.status(400).json({ errors: errors.array() });
     }

     const { name, email, password } = req.body;

     try {
       // Check if user already exists
       let user = await User.findOne({ email });
       if (user) {
         return res.status(400).json({ msg: 'User already exists' });
       }

       // Create new user
       user = new User({ name, email, password });

       // Hash password
       const salt = await bcrypt.genSalt(10);
       user.password = await bcrypt.hash(password, salt);

       // Save user to database
       await user.save();

       // Generate JWT token
       const payload = {
         user: { id: user.id }
       };
       jwt.sign(payload, 'jwtSecret', { expiresIn: 3600 }, (err, token) => {
         if (err) throw err;
         res.json({ token });
       });

     } catch (err) {
       console.error(err.message);
       res.status(500).send('Server Error');
     }
   });

   // Login route
   router.post('/login', [
     check('email', 'Please include a valid email').isEmail(),
     check('password', 'Password is required').exists()
   ], async (req, res) => {
     // Validation errors
     const errors = validationResult(req);
     if (!errors.isEmpty()) {
       return res.status(400).json({ errors: errors.array() });
     }

     const { email, password } = req.body;

     try {
       // Check if user exists
       let user = await User.findOne({ email });
       if (!user) {
         return res.status(400).json({ msg: 'Invalid credentials' });
       }

       // Compare passwords
       const isMatch = await bcrypt.compare(password, user.password);
       if (!isMatch) {
         return res.status(400).json({ msg: 'Invalid credentials' });
       }

       // Generate JWT token
       const payload = {
         user: { id: user.id }
       };
       jwt.sign(payload, 'jwtSecret', { expiresIn: 3600 }, (err, token) => {
         if (err) throw err;
         res.json({ token });
       });

     } catch (err) {
       console.error(err.message);
       res.status(500).send('Server Error');
     }
   });

   module.exports = router;

Create a User Model:

Create a folder named models and add a file named User.js inside it. This file will define the user schema and model.

   // models/User.js

   const mongoose = require('mongoose');

   const UserSchema = new mongoose.Schema({
     name: {
       type: String,
       required: true
     },
     email: {
       type: String,
       required: true,
       unique: true
     },
     password: {
       type: String,
       required: true
     },
     date: {
       type: Date,
       default: Date.now
     }
   });

   module.exports = User = mongoose.model('user', UserSchema);

Conclusion:

In this tutorial, we've implemented a scalable authentication system using JSON Web Tokens (JWT) in a MERN stack application. We've covered user registration, login, token generation, and secure authorization. This authentication system provides a solid foundation for building secure and scalable web applications. Feel free to extend this implementation by adding features like password reset, email verification, and role-based access control.

The Ultimate Guide to Prisma ORM: Transforming Database Management for Developers

abhilaksh-arora — Tue, 18 Jun 2024 02:49:30 +0000

In the realm of software development, managing databases efficiently and effectively is crucial. This is where Object-Relational Mappers (ORMs) come into play. In this blog, we will explore the need for ORMs, review some of the most common ORMs, and discuss why Prisma ORM stands out. We will also provide a step-by-step guide to get started with Prisma in a TypeScript project, including how to set up a user database and integrate it with the frontend.

The Need for ORMs

ORMs are essential tools for developers as they bridge the gap between the object-oriented world of programming languages and the relational world of databases. They provide the following benefits:

Abstraction: Simplifies complex SQL queries and database interactions.
Productivity: Speeds up development by automating repetitive tasks.
Maintainability: Improves code readability and maintainability.
Database Portability: Allows switching between different database systems with minimal code changes.

Common ORMs

Several ORMs are popular among developers, each with its unique features and capabilities:

ActiveRecord (Ruby on Rails): Known for its simplicity and convention over configuration approach.
Hibernate (Java): A powerful and flexible ORM widely used in Java applications.
Entity Framework (C#): Integrated with .NET, offering rich functionality and ease of use.
Sequelize (Node.js): A promise-based ORM for Node.js, providing support for multiple SQL dialects.
Prisma (Node.js, TypeScript): A modern ORM that is becoming increasingly popular due to its type safety and ease of use.

Why Prisma is Better

Prisma ORM stands out for several reasons:

Type Safety: Prisma generates TypeScript types from your database schema, ensuring type safety across your application.
Intuitive Data Modeling: Prisma uses a declarative schema definition, making it easy to define and understand your data model.
Flexible: Supports multiple databases like MySQL, PostgreSQL, and MongoDB.
Powerful Tools: Prisma includes features like Prisma Studio (a GUI for database management), migrations, and a powerful query engine.
Middleware: Prisma allows you to add custom logic to your database queries through middleware.
Prisma Accelerate: Optimizes query performance, especially in serverless environments.

Getting Started with Prisma in a TypeScript Project

Here's a step-by-step guide to set up Prisma in a new TypeScript project.

1. Initialize an Empty Node.js Project

npm init -y

2. Add Dependencies

npm install prisma typescript ts-node @types/node --save-dev

3. Initialize TypeScript

npx tsc --init

Update the tsconfig.json file:

Change rootDir to src
Change outDir to dist

4. Initialize a Fresh Prisma Project

npx prisma init

This command sets up the Prisma directory structure and creates a schema.prisma file.

5. Selecting Your Database

Prisma supports multiple databases. You can update prisma/schema.prisma to set up your desired database. For example, to use PostgreSQL, modify the datasource block:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

6. Defining Your Data Model

In the schema.prisma file, define the shape of your data. For example, a simple User model:

model User {
  id    Int     @id @default(autoincrement())
  name  String
  email String  @unique
}

7. Applying Migrations

To apply the migrations and create the database schema:

npx prisma migrate dev --name init

8. Generating the Prisma Client

After defining your data model, generate the Prisma client:

npx prisma generate

9. Create the Backend Server

In the src directory, create an index.ts file and set up an Express server:

import express from 'express';
import bodyParser from 'body-parser';
import { PrismaClient } from '@prisma/client';

const app = express();
const prisma = new PrismaClient();

app.use(bodyParser.json());

app.post('/api/users', async (req, res) => {
  const { name, email } = req.body;
  try {
    const user = await prisma.user.create({
      data: {
        name,
        email,
      },
    });
    res.status(201).json(user);
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

10. Run the Backend Server

Add a script to your package.json to run the server:

"scripts": {
  "dev": "ts-node src/index.ts"
}

Start the server:

npm run dev

Integrating Prisma with the Frontend

To integrate Prisma with the frontend, we'll set up two separate directories: backend for the server-side code and frontend for the client-side code. This separation ensures a clear structure and modularity in your project.

1. Setting Up the Backend

Follow the steps above to set up the backend server using Express and Prisma.

2. Setting Up the Frontend

Initialize the Frontend Project

Create a new directory for your frontend:

   mkdir ../frontend
   cd ../frontend
   npm init -y

Install Dependencies

Install the necessary dependencies:

   npm install react react-dom axios
   npm install --save-dev typescript @types/react @types/react-dom

Initialize TypeScript

Initialize TypeScript in your frontend directory:

   npx tsc --init

Set Up a Basic React App

Create a src directory and add a index.tsx file:

   import React, { useState } from 'react';
   import ReactDOM from 'react-dom';
   import axios from 'axios';

   const CreateUser: React.FC = () => {
     const [name, setName] = useState('');
     const [email, setEmail] = useState('');

     const handleSubmit = async (e: React.FormEvent) => {
       e.preventDefault();
       try {
         const response = await axios.post('http://localhost:3000/api/users', { name, email });
         console.log('User created:', response.data);
       } catch (error) {
         console.error('Error creating user:', error);
       }
     };

     return (
       <form onSubmit={handleSubmit}>
         <input
           type="text"
           value={name}
           onChange={(e) => setName(e.target.value)}
           placeholder="Name"
           required
         />
         <input
           type="email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           placeholder="Email"
           required
         />
         <button type="submit">Create User</button>
       </form>
     );
   };

   const App: React.FC = () => (
     <div>
       <h1>Create User</h1>
       <CreateUser />
     </div>
   );

   ReactDOM.render(<App />, document.getElementById('root'));

Run the Frontend App

Add a script to your package.json to start the frontend app:

   "scripts": {
     "start": "ts-node src/index.tsx"
   }

Start the frontend app:

   npm start

3. Connecting the Frontend to the Backend

Ensure that the backend server is running on http://localhost:3000 and the frontend makes API requests to this address using Axios. The React component CreateUser handles form submissions and communicates with the backend API to create a new user.

Now you have a working setup where your Prisma-powered backend manages the database, and your React frontend interacts with it seamlessly.

Applications of Prisma ORM

Prisma ORM can be applied in various scenarios:

Web Applications: Simplifies data management for web apps built with frameworks like Next.js, Express, or NestJS.
APIs: Enhances productivity in building REST or GraphQL APIs.
Serverless Functions: Optimized for serverless environments, making it ideal for AWS Lambda, Vercel, or Netlify functions.

In conclusion, Prisma ORM is a modern, powerful tool that offers type safety, intuitive data modeling, and a suite of powerful features to enhance productivity and maintainability in your TypeScript projects. By following the steps outlined above, you can get started with Prisma and take advantage of its capabilities to build robust, scalable applications.

Mastering Flexbox: Simplifying Layouts in CSS

abhilaksh-arora — Wed, 10 Apr 2024 06:21:53 +0000

Title: Mastering Flexbox: Simplifying Layouts in CSS

Introduction:

Cascading Style Sheets (CSS) have come a long way in helping developers create beautiful and responsive layouts for web pages. However, designing complex layouts with traditional CSS techniques often involved a lot of trial and error, along with the use of hacks and workarounds. Enter Flexbox - a powerful layout model introduced in CSS3 that revolutionized the way we approach web layout design. In this comprehensive guide, we'll dive deep into Flexbox, exploring its features, syntax, and practical examples to help you master this essential tool for modern web development.

Understanding Flexbox:

Flexbox, short for Flexible Box Layout, is a one-dimensional layout model that allows you to design complex layouts more efficiently and with less code. Unlike traditional layout methods, Flexbox offers a more intuitive approach to aligning and distributing space among items within a container, regardless of their size or order.

Key Concepts of Flexbox:

Before we dive into practical examples, let's cover some key concepts of Flexbox:

Flex Container: Any HTML element with its display property set to flex becomes a flex container. This container holds the flex items and defines the main axis and cross axis for layout purposes.
Flex Items: Children of a flex container are called flex items. These items can be horizontally or vertically aligned within the container, and they can grow, shrink, or maintain their original size according to the available space.
Main Axis and Cross Axis: Flexbox layout operates along two axes - the main axis and the cross axis. The main axis represents the primary direction of the layout, while the cross axis is perpendicular to it.
Flex Direction: The flex-direction property determines the direction in which flex items are placed within the flex container, such as row, row-reverse, column, or column-reverse.
Flex Properties: Flexbox introduces several properties to control the behavior of flex items, including flex-grow, flex-shrink, and flex-basis, which determine how flex items grow, shrink, or maintain their initial size.

Now that we have a basic understanding of Flexbox, let's delve into some practical examples to see how it simplifies layout design in CSS.

Practical Examples:

Creating a Simple Navigation Bar:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Navigation</title>
<style>
  .nav {
    display: flex;
    justify-content: space-between;
    background-color: #333;
    color: #fff;
    padding: 10px;
  }
  .nav-item {
    margin: 0 10px;
    text-decoration: none;
    color: #fff;
  }
</style>
</head>
<body>
  <nav class="nav">
    <a href="#" class="nav-item">Home</a>
    <a href="#" class="nav-item">About</a>
    <a href="#" class="nav-item">Services</a>
    <a href="#" class="nav-item">Contact</a>
  </nav>
</body>
</html>

In this example, we've created a simple navigation bar using Flexbox. The display: flex property on the .nav class makes the navigation items flex items, allowing them to be evenly spaced along the main axis.

Building a Responsive Card Grid:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Card Grid</title>
<style>
  .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .card {
    flex: 0 1 calc(30% - 20px);
    margin: 10px;
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
</style>
</head>
<body>
  <div class="card-container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <!-- Add more cards as needed -->
  </div>
</body>
</html>

This example demonstrates how Flexbox can be used to create a responsive card grid layout. By setting flex-wrap: wrap on the .card-container class, we allow the cards to wrap to the next line when the container's width is insufficient. Additionally, the flex property on the .card class specifies how much space each card should take up, allowing them to resize dynamically based on the available space.

Conclusion:

Flexbox is a powerful CSS layout model that simplifies the creation of complex web layouts. By understanding its key concepts and properties, you can create flexible and responsive designs with ease. Whether you're building navigation bars, card grids, or entire page layouts, Flexbox offers a flexible and intuitive approach to web design that enhances the user experience across different devices and screen sizes. Start incorporating Flexbox into your CSS toolkit today and unlock endless possibilities for creative layout design.

Crafting Fast and Reliable Web Experiences with Progressive Web Apps (PWAs)

abhilaksh-arora — Wed, 10 Apr 2024 06:17:50 +0000

Title: Crafting Fast and Reliable Web Experiences with Progressive Web Apps (PWAs)

Introduction:
In today's digital landscape, users demand fast, reliable, and engaging web experiences. Progressive Web Apps (PWAs) have emerged as a solution to meet these expectations by combining the best features of web and mobile applications. In this blog post, we'll delve into the world of PWAs, exploring what they are, their benefits, and how to build them to create seamless experiences for your users.

Understanding Progressive Web Apps (PWAs):
Progressive Web Apps are web applications that leverage modern web technologies to provide users with a native app-like experience directly through their web browsers. PWAs are designed to be fast, reliable, and engaging, offering features such as offline functionality, push notifications, and the ability to install them on users' devices.

Benefits of PWAs:

Enhanced Performance: PWAs are built to load quickly, even on slow or unreliable networks, ensuring a smooth user experience.
Reliability: With features like service workers, PWAs can work offline or with limited network connectivity, allowing users to access content even in challenging conditions.
Engagement: PWAs can send push notifications, enabling re-engagement with users and increasing retention rates.
Cross-Platform Compatibility: PWAs work across different devices and platforms, eliminating the need for separate development efforts for each platform.
Installation Flexibility: Users can install PWAs directly from the browser, eliminating the friction associated with traditional app downloads from app stores.

Building a Progressive Web App:

Responsive Design: Ensure your PWA is responsive and adapts to various screen sizes and orientations.
Service Workers: Implement service workers to cache assets and enable offline functionality.
Web App Manifest: Create a web app manifest file to define metadata and enable installation features.
HTTPS: PWAs require a secure connection (HTTPS) to ensure data integrity and security.
App Shell Architecture: Adopt the app shell architecture to deliver fast, reliable user experiences, especially on repeat visits.

Case Studies:

Twitter Lite: Twitter Lite is a PWA version of the popular social media platform, offering a fast and reliable experience, even on low-end devices and slow networks.
Pinterest: Pinterest rebuilt its mobile web experience as a PWA, resulting in a significant increase in user engagement and time spent on the platform.
Flipkart: The e-commerce giant Flipkart adopted a PWA strategy to improve user experience and increase conversions, particularly in emerging markets with limited internet connectivity.

Conclusion:
Progressive Web Apps represent a paradigm shift in web development, offering a middle ground between web and native app experiences. By leveraging PWAs, developers can create fast, reliable, and engaging web experiences that delight users across various devices and network conditions. Whether you're building a new application or enhancing an existing one, embracing PWAs can help you stay ahead in the competitive landscape of digital experiences.

A Powerful Password Generator NPM Package

abhilaksh-arora — Sun, 07 Apr 2024 18:09:02 +0000

In today's digital age, the importance of strong, secure passwords cannot be overstated. Whether it's protecting your personal accounts or securing sensitive business data, having robust passwords is crucial. However, coming up with complex passwords that are both secure and memorable can be a daunting task.

That's where Secure Password Gen comes in. Secure Password Gen is a lightweight and easy-to-use npm package designed to generate strong and secure passwords with customizable options. In this blog post, we'll introduce you to Secure Password Gen, explore its features, and show you how to use it to enhance your password security.

Features
Secure Password Gen offers a range of features to help you generate strong passwords tailored to your specific requirements:

Customizable Length: Specify the length of the password you need, from as short as 4 characters to as long as you like.
Character Set Control: Choose which character sets to include in your password, including uppercase letters, lowercase letters, numbers, and symbols.
Flexibility: Generate passwords with varying levels of complexity to suit your needs.
Ease of Use: Simple and intuitive interface makes it easy for anyone to generate secure passwords quickly.

Getting Started
Getting started with Secure Password Gen is easy. Follow these simple steps to generate your first secure password:

Install secure-password-gen: Install the secure-password-gen package from npm using the following command:

npm install secure-password-gen

Import secure-password-gen: In your JavaScript or TypeScript file, import the generatePassword function from the secure-password-gen package:

const generatePassword = require('secure-password-gen');

Generate Passwords: Use the generatePassword function to generate passwords with the desired length and character set options:

// Generate a password with default settings (12 characters, including uppercase, lowercase, numbers, and symbols)
const password = generatePassword();
// Generate a password with custom options (e.g., length of 16 characters, including only uppercase and lowercase letters)
const customPassword = generatePassword(16, true, true, false, false);

Enjoy Secure Passwords: Use the generated passwords to enhance the security of your accounts and data.

Conclusion
With secure-password-gen, generating strong and secure passwords has never been easier. Whether you're a developer looking to enhance the security of your applications or an individual striving to protect your online accounts, Secure Password Gen has you covered. Install secure-password-gen today and take control of your password security!

For more information and detailed usage instructions, check out the secure-password-gen GitHub repository and the official npm package page.

Happy password generating!