Forem: Laxman Rathod

I built a VS Code extension to understand code without leaving the editor

Laxman Rathod — Mon, 02 Feb 2026 18:18:39 +0000

Reading unfamiliar code often breaks focus.
You hover → don’t understand → open docs → lose flow.

So I built HoverExplain.

HoverExplain gives you clear, AI-powered explanations
for functions, classes, and variables — directly on hover inside VS Code.

No docs.
No tabs.
No context switching.

It’s built for developers who value focus, speed, and clarity.

This is just the beginning.
I’d love feedback, feature ideas, and language requests.

Try it out and let me know what you think 🚀
https://marketplace.visualstudio.com/items?itemName=luckyra8od.hoverexplain

Master API Load Testing with Artillery.io: Your APIs Under Fire 🔥

Laxman Rathod — Wed, 10 Sep 2025 18:01:52 +0000

Discover how to stress-test your APIs like a pro using Artillery's powerful cloud platform

Hey developers! 👋 Ever launched an API only to watch it crumble under real-world traffic? We've all been there. Today, we're diving into Artillery.io - the modern load testing tool that'll help you build bulletproof APIs. Whether you're a startup founder or a seasoned engineer, this guide will get you load testing like a pro in minutes, not hours.

Why Load Testing Matters in 2025

Picture this: Your app goes viral overnight, traffic spikes 10x, and your API starts returning 500 errors faster than you can say "server overload." Sound familiar?

Real-world scenarios where load testing saves the day:

Black Friday traffic surges
Viral social media mentions
Product Hunt launches
Marketing campaign success

Artillery.io makes load testing as simple as writing a config file. No complex setups, no infrastructure headaches - just pure performance insights.

What is Artillery.io? 🎯

Artillery.io is a modern, developer-friendly load testing platform that's evolved far beyond its CLI roots. The latest version offers:

Cloud-based testing - No local resource limitations
Real browser testing - Not just HTTP requests
Beautiful dashboards - Actionable insights, not just numbers
CI/CD integration - Automated performance testing
Global load generation - Test from multiple regions

Think of it as the "Vercel for load testing" - simple, powerful, and built for modern development workflows.

Getting Started: Your First Load Test

Step 1: Setting Up Artillery.io

First, let's get Artillery installed and ready:

# Install Artillery globally
pnpm add -g artillery@latest

# Verify installation
artillery --version

Create a free account at artillery.io to access the cloud features - trust me, it's worth it!

Step 2: Your First Test Configuration

Create a file called basic-load-test.yml:

config:
  target: "https://jsonplaceholder.typicode.com"
  phases:
    - duration: 60
      arrivalRate: 5
      name: "Warm up"
    - duration: 120
      arrivalRate: 20
      name: "Sustained load"
    - duration: 60
      arrivalRate: 50
      name: "Peak traffic"

scenarios:
  - name: "Get posts"
    weight: 70
    flow:
      - get:
          url: "/posts"
      - think: 2
      - get:
          url: "/posts/{{ $randomInt(1, 100) }}"

  - name: "Create post"
    weight: 30
    flow:
      - post:
          url: "/posts"
          json:
            title: "Test Post {{ $randomString() }}"
            body: "This is a test post from Artillery"
            userId: "{{ $randomInt(1, 10) }}"

Step 3: Running Your First Test

# Run locally (great for development)
artillery run basic-load-test.yml

# Run on Artillery Cloud (recommended)
artillery run-cloud basic-load-test.yml

Boom! 🎉 You just ran your first load test. Artillery will show you real-time metrics including response times, error rates, and throughput.

Understanding Your Results 📊

Artillery provides several key metrics:

Response Time Metrics

Response time:
  min: 45ms
  max: 1.2s
  mean: 120ms
  p95: 340ms
  p99: 670ms

What this means:

mean (120ms): Half of requests were faster than this
p95 (340ms): 95% of requests were faster than this
p99 (670ms): Only 1% of requests were slower than this

HTTP Status Codes

Codes:
  200: 2847 (95.6%)
  500: 131 (4.4%)

Red flags to watch for:

High 4xx rates (client errors)
Any 5xx rates (server errors)
Timeouts or connection errors

Advanced Testing Scenarios

Testing with Authentication

config:
  target: "https://your-api.com"
  phases:
    - duration: 60
      arrivalRate: 10

scenarios:
  - name: "Authenticated requests"
    flow:
      # Login first
      - post:
          url: "/auth/login"
          json:
            email: "test@example.com"
            password: "password123"
          capture:
            - json: "$.token"
              as: "authToken"

      # Use the token
      - get:
          url: "/protected-resource"
          headers:
            Authorization: "Bearer {{ authToken }}"

Database-Heavy Operations

scenarios:
  - name: "CRUD operations"
    flow:
      # Create
      - post:
          url: "/api/users"
          json:
            name: "{{ $randomString() }}"
            email: "{{ $randomString() }}@test.com"
          capture:
            - json: "$.id"
              as: "userId"

      # Read
      - get:
          url: "/api/users/{{ userId }}"

      # Update
      - put:
          url: "/api/users/{{ userId }}"
          json:
            name: "Updated {{ $randomString() }}"

      # Delete
      - delete:
          url: "/api/users/{{ userId }}"

File Upload Testing

scenarios:
  - name: "File uploads"
    flow:
      - post:
          url: "/api/upload"
          formData:
            file: "@./test-file.pdf"
            description: "Load test upload"

Artillery Cloud: The Game Changer ☁️

The cloud platform takes Artillery to the next level:

Global Load Generation

# Test from multiple regions
artillery run-cloud basic-load-test.yml --region us-east-1,eu-west-1,ap-southeast-1

Real Browser Testing

config:
  target: "https://your-app.com"
  engines:
    playwright: {}

scenarios:
  - engine: playwright
    flow:
      - goto:
          url: "/"
      - click:
          selector: "#login-button"
      - type:
          selector: "#email"
          text: "test@example.com"
      - type:
          selector: "#password"
          text: "password123"
      - click:
          selector: "#submit"
      - waitForSelector:
          selector: "#dashboard"

Monitoring Integration

config:
  target: "https://your-api.com"
  plugins:
    statsd:
      host: your-statsd-server
    datadog:
      apiKey: your-datadog-key

Best Practices for Effective Load Testing

1. Start Small, Scale Gradually

# Good: Gradual ramp-up
phases:
  - duration: 30
    arrivalRate: 1
    name: "Baseline"
  - duration: 60
    arrivalRate: 10
    name: "Normal load"
  - duration: 30
    arrivalRate: 50
    name: "Peak load"

# Avoid: Instant high load
phases:
  - duration: 60
    arrivalRate: 100  # Too aggressive!

2. Test Realistic User Journeys

scenarios:
  - name: "Typical user flow"
    flow:
      - get:
          url: "/"
      - think: 3 # User reads the page
      - post:
          url: "/search"
          json:
            query: "{{ $randomString() }}"
      - think: 2
      - get:
          url: "/results/{{ $randomInt(1, 10) }}"

3. Monitor Both Client and Server

# Monitor your infrastructure while testing
artillery run-cloud test.yml &
docker stats  # or your monitoring tool

4. Set Up Proper Test Data

config:
  payload:
    path: "test-data.csv"
    fields:
      - "userId"
      - "email"
      - "productId"

scenarios:
  - flow:
      - post:
          url: "/api/orders"
          json:
            userId: "{{ userId }}"
            productId: "{{ productId }}"

Integrating with Your CI/CD Pipeline

GitHub Actions Example

name: Load Test
on:
  push:
    branches: [main]

jobs:
  load-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Artillery
        run: npm install -g artillery@latest
      - name: Run Load Test
        run: artillery run-cloud load-test.yml
        env:
          ARTILLERY_CLOUD_API_KEY: ${{ secrets.ARTILLERY_API_KEY }}

Performance Budgets

config:
  ensure:
    p95: 200 # 95th percentile under 200ms
    p99: 500 # 99th percentile under 500ms
    errorRate: 1 # Less than 1% errors

Analyzing and Acting on Results

Interpreting Common Patterns

🔴 Response Time Climbing

Phase 1: 100ms average
Phase 2: 200ms average
Phase 3: 500ms average

Action: Investigate database queries, add caching

🔴 Error Rate Spike

0-30 seconds: 0% errors
30-60 seconds: 15% errors

Action: Check rate limiting, database connections

🟢 Healthy Performance

Consistent response times across all phases
Error rate < 1%
No connection timeouts

Setting Up Alerts

config:
  ensure:
    p99: 1000
    errorRate: 5
  # Fail the test if thresholds exceeded

Pro Tips for Production Testing

1. Test Production-Like Environment

# Use staging environment that mirrors production
artillery run-cloud test.yml --target https://staging-api.yourapp.com

2. Coordinate with Your Team

# Schedule tests to avoid conflicts
artillery run-cloud test.yml --note "Weekly performance regression test"

3. Test Edge Cases

scenarios:
  - name: "Large payload test"
    flow:
      - post:
          url: "/api/data"
          json:
            data: "{{ $randomString(10000) }}" # Large string

Troubleshooting Common Issues

High Response Times

Check database query performance
Verify caching is working
Monitor memory usage

Connection Errors

Check server connection limits
Verify load balancer configuration
Monitor network latency

Inconsistent Results

Use cloud testing for consistent resources
Run multiple test iterations
Check for external dependencies

What's Next?

Ready to level up your load testing game? Here are some advanced topics to explore:

Custom metrics collection with plugins
Distributed testing across multiple regions
Performance regression testing in CI/CD
Real user monitoring integration
Chaos engineering with Artillery

Wrapping Up

Congratulations! 🎉 You're now equipped with the knowledge to stress-test your APIs like a seasoned performance engineer. Artillery makes what used to be complex infrastructure problems into simple configuration files.

Key takeaways:

Start with simple tests and gradually increase complexity
Use Artillery Cloud for consistent, scalable testing
Monitor both application and infrastructure metrics
Integrate load testing into your development workflow
Test realistic user scenarios, not just endpoint hammering

Remember: Load testing isn't about breaking your API (though that's fun too 😄) - it's about understanding your system's limits and building confidence in your infrastructure.

Found this helpful? Hit that ❤️ and follow me for more performance engineering insights!

What's your biggest API performance challenge? Drop a comment below - I love hearing from fellow developers and might write about your specific use case next!

Keep building awesome stuff! 🚀

Building Real-time Magic: Supabase Subscriptions in Next.js 15 ⚡

Laxman Rathod — Fri, 29 Aug 2025 07:32:37 +0000

Transform your static apps into dynamic, real-time experiences with just a few lines of code

Hey there, fellow developers! 👋 Ready to add some real-time superpowers to your Next.js applications? Today we're diving into one of my favorite features of Supabase – real-time database subscriptions. By the end of this guide, you'll be building apps that update instantly across all connected clients, no refresh button needed!

Why Real-time Matters in 2025

Think about the apps you use daily – Discord messages appearing instantly, collaborative docs updating as teammates type, live dashboards showing fresh data. Users expect this level of interactivity, and Supabase makes it surprisingly simple to deliver.

What we'll build today:

A live chat system that updates instantly
Real-time notifications for database changes
Best practices for handling connections efficiently
Clean TypeScript implementation throughout

Prerequisites (Don't worry, it's simple!)

Before we jump in, make sure you have:

Basic knowledge of React/Next.js
A Supabase project (from my previous guide or new one)
Node.js 18+ and PNPM installed
10 minutes of your time ⏰

Haven't set up Prisma with Supabase yet? Check out my previous comprehensive guide first!

Step 1: Project Setup (Lightning Fast with PNPM)

Let's create a fresh Next.js 15 project:

pnpm create next-app@latest realtime-chat-app
cd realtime-chat-app

Choose these options when prompted:

✅ TypeScript
✅ ESLint
✅ Tailwind CSS
✅ App Router
✅ Import alias

Install our dependencies:

pnpm add @supabase/supabase-js @supabase/ssr uuid
pnpm add -D @types/uuid

Step 2: Supabase Configuration

Create lib/supabase/client.ts:

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  realtime: {
    params: {
      eventsPerSecond: 10,
    },
  },
});

// Types for our chat system
export interface Message {
  id: string;
  content: string;
  user_name: string;
  created_at: string;
}

export interface Profile {
  id: string;
  name: string;
  online: boolean;
  last_seen: string;
}

Add your environment variables to .env.local:

NEXT_PUBLIC_SUPABASE_URL=your_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key

Step 3: Database Schema (Simple & Effective)

Head to your Supabase dashboard and run this SQL or you use can Prisma ORM, which makes schema management easier to maintain and version control as your project grows:

-- Enable real-time for public schema
ALTER PUBLICATION supabase_realtime ADD TABLE messages;
ALTER PUBLICATION supabase_realtime ADD TABLE profiles;

-- Messages table
CREATE TABLE messages (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  content TEXT NOT NULL,
  user_name VARCHAR(50) NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Profiles table for online status
CREATE TABLE profiles (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name VARCHAR(50) NOT NULL UNIQUE,
  online BOOLEAN DEFAULT false,
  last_seen TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable Row Level Security
ALTER TABLE messages ENABLE ROW LEVEL SECURITY;
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;

-- Allow all operations (for demo - adjust for production)
CREATE POLICY "Allow all operations" ON messages FOR ALL USING (true);
CREATE POLICY "Allow all operations" ON profiles FOR ALL USING (true);

Step 4: Real-time Hook (The Magic Happens Here)

Create hooks/useRealtime.ts:

"use client";

import { useEffect, useState } from "react";
import { supabase, Message, Profile } from "@/lib/supabase/client";
import { RealtimeChannel } from "@supabase/supabase-js";

export function useMessages() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let channel: RealtimeChannel;

    // Fetch initial messages
    const fetchMessages = async () => {
      const { data, error } = await supabase
        .from("messages")
        .select("*")
        .order("created_at", { ascending: true })
        .limit(50);

      if (error) {
        console.error("Error fetching messages:", error);
      } else {
        setMessages(data || []);
      }
      setLoading(false);
    };

    // Set up real-time subscription
    const setupSubscription = () => {
      channel = supabase
        .channel("messages")
        .on(
          "postgres_changes",
          { event: "INSERT", schema: "public", table: "messages" },
          (payload) => {
            const newMessage = payload.new as Message;
            setMessages((prev) => [...prev, newMessage]);
          }
        )
        .on(
          "postgres_changes",
          { event: "DELETE", schema: "public", table: "messages" },
          (payload) => {
            const deletedId = payload.old.id;
            setMessages((prev) => prev.filter((msg) => msg.id !== deletedId));
          }
        )
        .subscribe();
    };

    fetchMessages();
    setupSubscription();

    // Cleanup on unmount
    return () => {
      if (channel) {
        supabase.removeChannel(channel);
      }
    };
  }, []);

  return { messages, loading };
}

export function useOnlineUsers() {
  const [onlineUsers, setOnlineUsers] = useState<Profile[]>([]);

  useEffect(() => {
    let channel: RealtimeChannel;

    const fetchOnlineUsers = async () => {
      const { data } = await supabase
        .from("profiles")
        .select("*")
        .eq("online", true);

      setOnlineUsers(data || []);
    };

    const setupSubscription = () => {
      channel = supabase
        .channel("profiles")
        .on(
          "postgres_changes",
          { event: "*", schema: "public", table: "profiles" },
          (payload) => {
            if (payload.eventType === "UPDATE") {
              const updatedProfile = payload.new as Profile;
              setOnlineUsers((prev) => {
                const filtered = prev.filter(
                  (user) => user.id !== updatedProfile.id
                );
                return updatedProfile.online
                  ? [...filtered, updatedProfile]
                  : filtered;
              });
            }
          }
        )
        .subscribe();
    };

    fetchOnlineUsers();
    setupSubscription();

    return () => {
      if (channel) {
        supabase.removeChannel(channel);
      }
    };
  }, []);

  return onlineUsers;
}

Step 5: Building the Chat Interface

Create components/ChatRoom.tsx:

"use client";

import { useState, useRef, useEffect } from "react";
import { supabase } from "@/lib/supabase/client";
import { useMessages, useOnlineUsers } from "@/hooks/useRealtime";

export default function ChatRoom() {
  const [message, setMessage] = useState("");
  const [userName, setUserName] = useState("");
  const [isJoined, setIsJoined] = useState(false);
  const { messages, loading } = useMessages();
  const onlineUsers = useOnlineUsers();
  const messagesEndRef = useRef<HTMLDivElement>(null);

  // Auto-scroll to bottom when new messages arrive
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  const joinChat = async () => {
    if (!userName.trim()) return;

    // Update user online status
    await supabase.from("profiles").upsert({
      name: userName,
      online: true,
      last_seen: new Date().toISOString(),
    });

    setIsJoined(true);
  };

  const leaveChat = async () => {
    // Update user offline status
    await supabase
      .from("profiles")
      .update({ online: false, last_seen: new Date().toISOString() })
      .eq("name", userName);

    setIsJoined(false);
  };

  const sendMessage = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!message.trim() || !userName) return;

    await supabase.from("messages").insert({
      content: message.trim(),
      user_name: userName,
    });

    setMessage("");
  };

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      if (isJoined && userName) {
        supabase
          .from("profiles")
          .update({ online: false })
          .eq("name", userName);
      }
    };
  }, [isJoined, userName]);

  if (!isJoined) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
        <div className="bg-white p-8 rounded-2xl shadow-xl max-w-md w-full">
          <h1 className="text-2xl font-bold text-center mb-6 text-gray-800">
            Join the Chat 💬
          </h1>
          <div className="space-y-4">
            <input
              type="text"
              placeholder="Enter your name"
              value={userName}
              onChange={(e) => setUserName(e.target.value)}
              className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              onKeyPress={(e) => e.key === "Enter" && joinChat()}
            />
            <button
              onClick={joinChat}
              disabled={!userName.trim()}
              className="w-full bg-blue-600 text-white p-3 rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              Join Chat
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 flex">
      {/* Sidebar - Online Users */}
      <div className="w-64 bg-white border-r border-gray-200 p-4">
        <div className="flex justify-between items-center mb-4">
          <h2 className="font-semibold text-gray-800">
            Online ({onlineUsers.length})
          </h2>
          <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
        </div>
        <div className="space-y-2">
          {onlineUsers.map((user) => (
            <div
              key={user.id}
              className="flex items-center gap-2 p-2 rounded-lg bg-gray-50"
            >
              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
              <span className="text-sm text-gray-700">{user.name}</span>
            </div>
          ))}
        </div>
        <button
          onClick={leaveChat}
          className="mt-4 w-full text-sm text-red-600 hover:text-red-700 p-2 border border-red-200 rounded-lg hover:bg-red-50 transition-colors"
        >
          Leave Chat
        </button>
      </div>

      {/* Main Chat Area */}
      <div className="flex-1 flex flex-col">
        {/* Header */}
        <div className="bg-white border-b border-gray-200 p-4">
          <h1 className="text-xl font-semibold text-gray-800">
            Real-time Chat
          </h1>
          <p className="text-sm text-gray-600">Welcome, {userName}! 👋</p>
        </div>

        {/* Messages */}
        <div className="flex-1 overflow-y-auto p-4 space-y-4">
          {loading ? (
            <div className="flex justify-center">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
            </div>
          ) : (
            messages.map((msg) => (
              <div
                key={msg.id}
                className={`flex ${
                  msg.user_name === userName ? "justify-end" : "justify-start"
                }`}
              >
                <div
                  className={`max-w-xs lg:max-w-md px-4 py-2 rounded-2xl ${
                    msg.user_name === userName
                      ? "bg-blue-600 text-white"
                      : "bg-white text-gray-800 border border-gray-200"
                  }`}
                >
                  {msg.user_name !== userName && (
                    <p className="text-xs font-medium text-gray-500 mb-1">
                      {msg.user_name}
                    </p>
                  )}
                  <p className="text-sm">{msg.content}</p>
                  <p
                    className={`text-xs mt-1 ${
                      msg.user_name === userName
                        ? "text-blue-100"
                        : "text-gray-400"
                    }`}
                  >
                    {new Date(msg.created_at).toLocaleTimeString([], {
                      hour: "2-digit",
                      minute: "2-digit",
                    })}
                  </p>
                </div>
              </div>
            ))
          )}
          <div ref={messagesEndRef} />
        </div>

        {/* Message Input */}
        <form
          onSubmit={sendMessage}
          className="p-4 bg-white border-t border-gray-200"
        >
          <div className="flex gap-2">
            <input
              type="text"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder="Type your message..."
              className="flex-1 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            />
            <button
              type="submit"
              disabled={!message.trim()}
              className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              Send
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

Step 6: Wire It All Up

Update your app/page.tsx:

import ChatRoom from "@/components/ChatRoom";

export default function Home() {
  return <ChatRoom />;
}

Step 7: Best Practices & Performance Tips

1. Connection Management

// Always clean up subscriptions
useEffect(() => {
  const channel = supabase.channel("my-channel");
  // ... setup subscription

  return () => {
    supabase.removeChannel(channel);
  };
}, []);

2. Rate Limiting

// Configure events per second to prevent spam
const supabase = createClient(url, key, {
  realtime: {
    params: {
      eventsPerSecond: 10, // Adjust based on your needs
    },
  },
});

3. Error Handling

channel.subscribe((status) => {
  if (status === "SUBSCRIBED") {
    console.log("Connected to real-time!");
  } else if (status === "CHANNEL_ERROR") {
    console.error("Real-time connection failed");
  }
});

Testing Your Real-time App

Start your development server:

pnpm dev

Open multiple browser tabs to http://localhost:3000 and watch the magic happen! Messages appear instantly across all tabs. 🎉

Production Deployment Tips

Environment Variables: Ensure your Supabase credentials are properly set
Row Level Security: Implement proper RLS policies for production
Connection Limits: Monitor your connection usage in Supabase dashboard
Error Boundaries: Add React error boundaries for better UX

What's Next?

Ready to level up? Here are some exciting features to add:

🎨 Typing Indicators: Show when users are typing
📁 File Sharing: Add image and file upload support
🔔 Push Notifications: Browser notifications for new messages
🌙 Dark Mode: Because dark mode is always cool
📱 Mobile Optimization: Perfect mobile experience

Wrapping Up

Congratulations! 🎉 You've just built a real-time chat application with modern web technologies. The combination of Supabase's real-time capabilities with Next.js 15's performance makes for an incredibly smooth development experience.

Key takeaways:

Real-time subscriptions are surprisingly simple with Supabase
TypeScript keeps everything type-safe and maintainable
Proper cleanup prevents memory leaks and connection issues
PNPM makes dependency management a breeze

Found this helpful? Give it a ❤️ and follow me for more web development insights! I share practical guides like this every week.

What would you like to see next? Drop a comment with your suggestions – I love hearing from fellow developers!

Connect with me:

Happy coding! 🚀

Setting up Prisma with Supabase in Next.js 15: A Complete Developer's Guide

Laxman Rathod — Sat, 23 Aug 2025 17:42:44 +0000

Building modern full-stack applications just got easier with this powerful combination of tools

Hey developers! 👋 Ready to supercharge your Next.js 15 application with a robust database setup? Today we're diving deep into integrating Prisma ORM with Supabase's PostgreSQL database, using PNPM as our package manager. By the end of this guide, you'll have a rock-solid foundation for your next project.

Why This Stack Rocks

Before we jump into the code, let's talk about why this combination is absolutely fantastic:

Next.js 15: The latest and greatest React framework with improved performance and developer experience
Prisma: Type-safe database access with incredible developer tooling
Supabase: Open-source Firebase alternative with a powerful PostgreSQL database
PNPM: Lightning-fast, disk space efficient package manager that's becoming the new standard

This stack gives you type safety from database to frontend, excellent performance, and a delightful developer experience. Let's get started!

Prerequisites

Before we begin, make sure you have:

Node.js 18+ installed
PNPM installed globally (npm install -g pnpm)
A Supabase account (free tier works perfectly)
Your favorite code editor ready to go

Step 1: Setting Up Your Next.js 15 Project

Let's start by creating a fresh Next.js 15 project using PNPM:

pnpm create next-app@latest my-prisma-supabase-app
cd my-prisma-supabase-app

When prompted, choose your preferred options. For this guide, I recommend:

TypeScript: Yes
ESLint: Yes
Tailwind CSS: Yes (optional, but great for styling)
App Router: Yes
Import alias: Yes

Step 2: Installing Prisma and Dependencies

Now let's install all the packages we need:

# Install Prisma CLI and client
pnpm add prisma @prisma/client

# Optional install additional dependencies for our setup
pnpm add @supabase/supabase-js dotenv

Pro tip: PNPM's speed really shines here compared to npm or yarn!

Step 3: Setting Up Supabase

Head over to supabase.com and create a new project:

Click "New Project"
Choose your organization
Enter a project name
Set a database password (keep it safe!)
Choose your region
Click "Create new project"

Wait for Supabase to set up your database (usually takes 1-2 minutes). Once ready, grab your connection details:

Go to Settings → Database
Copy the connection string under "Connection string"
Also note down your project URL and anon key from Settings → API

Step 4: Environment Configuration

Create a .env.local file in your project root:

# Database connection string from Supabase
DATABASE_URL="postgresql://postgres:YOUR_PASSWORD@YOUR_PROJECT_REF.supabase.co:5432/postgres?pgbouncer=true&connection_limit=1"

# For direct connection (migrations)
DIRECT_URL="postgresql://postgres:YOUR_PASSWORD@YOUR_PROJECT_REF.supabase.co:5432/postgres"

# Supabase public configuration
NEXT_PUBLIC_SUPABASE_URL="https://YOUR_PROJECT_REF.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="your_anon_key_here"

Important notes:

Replace YOUR_PASSWORD, YOUR_PROJECT_REF, and your actual keys
The DATABASE_URL uses pgbouncer for connection pooling
The DIRECT_URL is needed for migrations
Never commit your .env.local file to version control!

Step 5: Initializing Prisma

Initialize Prisma in your project:

pnpm prisma init

This creates:

A prisma folder with schema.prisma
Updates your .env file (you can replace it with your .env.local content)

Step 6: Configuring Prisma Schema

Open prisma/schema.prisma and update it:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

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

// Example models - customize based on your needs
model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  posts     Post[]

  @@map("users")
}

model Post {
  id        String   @id @default(cuid())
  title     String
  content   String?
  published Boolean  @default(false)
  authorId  String
  author    User     @relation(fields: [authorId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@map("posts")
}

Step 7: Creating and Running Your First Migration

Now for the exciting part - let's create our database schema:

# Create and apply your first migration
pnpm prisma migrate dev --name init

This command:

Creates a new migration file in prisma/migrations
Applies the migration to your Supabase database
Generates the Prisma client

You should see output confirming the migration was successful!

Step 8: Setting Up Prisma Client

Create a lib/prisma.ts file to set up your Prisma client:

import { PrismaClient } from "@prisma/client";

declare const globalThis: {
  prismaGlobal: ReturnType<typeof prismaClientSingleton>;
} & typeof global;

const prismaClientSingleton = () => {
  return new PrismaClient();
};

export const prisma = globalThis.prismaGlobal ?? prismaClientSingleton();

if (process.env.NODE_ENV !== "production") globalThis.prismaGlobal = prisma;

This setup prevents multiple Prisma client instances during development hot reloads.

Step 9: Creating Your First API Route

Let's create an API route to test everything works. Create app/api/users/route.ts:

import { prisma } from '@/lib/prisma'
import { NextResponse } from 'next/server'

export async function GET() {
  try {
    const users = await prisma.user.findMany({
      include: {
        posts: true,
      },
    })
    return NextResponse.json(users)
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to fetch users' },
      { status: 500 }
    )
  }
}

export async function POST(request: Request) {
  try {
    const { name, email } = await request.json()

    const user = await prisma.user.create({
      data: {
        name,
        email,
      },
    })

    return NextResponse.json(user, { status: 201 })
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to create user' },
      { status: 500 }
    )
  }
}

Step 10: Testing Your Setup

Let's create a simple page to test our setup. Update app/page.tsx:

'use client'

import { useState, useEffect } from 'react'

interface User {
  id: string
  name: string | null
  email: string
  posts: any[]
}

export default function Home() {
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data)
        setLoading(false)
      })
  }, [])

  const createTestUser = async () => {
    const response = await fetch('/api/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: 'John Doe',
        email: `johndoe@example.com`,
      }),
    })

    if (response.ok) {
      const newUser = await response.json()
      setUsers([...users, newUser])
    }
  }

  if (loading) return <div className="p-8">Loading...</div>

  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">Prisma + Supabase + Next.js 15</h1>

      <button 
        onClick={createTestUser}
        className="bg-blue-500 text-white px-4 py-2 rounded mb-4 hover:bg-blue-600"
      >
        Create User
      </button>

      <div>
        <h2 className="text-xl font-semibold mb-2">Users ({users.length})</h2>
        {users.map(user => (
          <div key={user.id} className="border p-3 mb-2 rounded">
            <p><strong>Name:</strong> {user.name || 'No name'}</p>
            <p><strong>Email:</strong> {user.email}</p>
            <p><strong>Posts:</strong> {user.posts.length}</p>
          </div>
        ))}
      </div>
    </div>
  )
}

Start your development server:

pnpm dev

Visit http://localhost:3000 and test creating a user!

Working with Prisma Migrations

Here are the essential migration commands you'll use regularly:

Creating New Migrations

When you modify your schema:

# Create a new migration
pnpm prisma migrate dev --name add_user_profile

# Reset database (careful in production!)
pnpm prisma migrate reset

Viewing Migration Status

# See migration status
pnpm prisma migrate status

# View your data
pnpm prisma studio

Production Deployments

For production:

# Deploy pending migrations
pnpm prisma migrate deploy

# Generate Prisma client
pnpm prisma generate

Best Practices and Pro Tips

1. Schema Design

Use meaningful model and field names
Add database constraints where appropriate
Consider indexing for frequently queried fields
Use enums for predefined values

2. Migration Management

Always review migration files before applying
Use descriptive migration names
Never edit migration files manually
Keep migrations small and focused

3. Performance Optimization

Use connection pooling (already configured with Supabase)
Implement proper indexing
Use select to limit returned fields
Consider using findFirst instead of findMany when appropriate

4. Error Handling

try {
  const user = await prisma.user.create({ data: userData })
  return user
} catch (error) {
  if (error instanceof Prisma.PrismaClientKnownRequestError) {
    // Handle specific Prisma errors
    if (error.code === 'P2002') {
      throw new Error('Email already exists')
    }
  }
  throw error
}

5. Type Safety

import type { User, Post } from '@prisma/client'

type UserWithPosts = User & {
  posts: Post[]
}

Package.json Scripts

Add these helpful scripts to your package.json:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "db:generate": "prisma generate",
    "db:push": "prisma db push",
    "db:migrate": "prisma migrate dev",
    "db:studio": "prisma studio",
    "db:seed": "tsx prisma/seed.ts"
  }
}

Troubleshooting Common Issues

Connection Issues

Double-check your DATABASE_URL and DIRECT_URL
Ensure your Supabase project is running
Verify your IP is allowed (Supabase allows all by default)

Migration Errors

Check if your schema changes are valid
Ensure you're not removing required fields without proper migration steps
Review the generated migration SQL

Type Errors

Run pnpm prisma generate after schema changes
Restart your TypeScript server in your editor
Check for naming conflicts

Next Steps

Congratulations! 🎉 You now have a solid foundation with Prisma, Supabase, and Next.js 15. Here's what you might want to explore next:

Authentication: Add Supabase Auth for user management
Real-time Features: Implement Supabase real-time subscriptions
File Storage: Use Supabase Storage for file uploads
Advanced Queries: Explore Prisma's powerful querying capabilities
Testing: Set up unit tests for your database operations
Deployment: Deploy to Vercel with proper environment variables

Wrapping Up

This powerful combination of technologies gives you everything needed to build modern, scalable applications. The type safety from Prisma, the reliability of PostgreSQL through Supabase, and the performance of Next.js 15 create an excellent developer experience.

The setup might seem like a lot initially, but once it's running, you'll appreciate the robust foundation it provides.
Happy coding, and feel free to reach out if you have questions!

Found this guide helpful? Share it with your fellow developers and let me know what you build with this stack!

Mastering TypeScript Types: A Practical Guide from Basics to Advanced

Laxman Rathod — Tue, 15 Jul 2025 11:52:42 +0000

If you've been writing JavaScript for a while, you've probably encountered those frustrating moments: Cannot read property 'name' of undefined, mysterious runtime errors, or spending hours debugging issues that could have been caught at compile time.

TypeScript's type system is your solution to these problems. It's not just about adding types to JavaScript – it's about creating a safety net that makes your code more robust, readable, and maintainable.

As a JavaScript developer, mastering TypeScript types will transform how you write code. You'll catch bugs before they reach production, enjoy better IDE support with intelligent autocompletion, and build applications that scale with confidence. Whether you're working on a small project or a large enterprise application, TypeScript's static typing system will become your best friend.

Let's dive into the world of TypeScript types and explore how they can elevate your JavaScript development experience.

Starting with the Basics: Primitive Types 🔧

The Foundation: Basic Types

TypeScript provides several primitive types that form the building blocks of your type system:

// String type
const userName: string = "John Doe";
const welcomeMessage: string = `Welcome, ${userName}!`;

// Number type
const userAge: number = 28;
const pi: number = 3.14159;
const binary: number = 0b1010; // Binary number

// Boolean type
const isActive: boolean = true;
const hasPermission: boolean = false;

// Null and undefined
const data: null = null;
const notInitialized: undefined = undefined;

// Symbol (ES6)
const uniqueId: symbol = Symbol("id");

Always use explicit type annotations for function parameters and return types, even when TypeScript can infer them. This improves code readability and catches errors early.

Arrays and Tuples

Arrays and tuples handle collections of data with different levels of structure:

// Typed arrays
const numbers: number[] = [1, 2, 3, 4, 5];
const names: string[] = ["Alice", "Bob", "Charlie"];

// Alternative array syntax
const scores: Array<number> = [95, 87, 92];

// Tuples: fixed-length arrays with mixed types
const userInfo: [string, number, boolean] = ["John", 28, true];
const coordinates: [number, number] = [40.7128, -74.0060];

// Accessing tuple elements
const [name, age, isActive] = userInfo;

Use tuples when you need a fixed-length array with mixed types (like coordinates or key-value pairs). Use regular arrays for dynamic collections of the same type.

Object Types

Objects are fundamental to JavaScript, and TypeScript provides powerful ways to type them:

// Basic object type
const user: { name: string; age: number; email: string } = {
  name: "Alice",
  age: 30,
  email: "alice@example.com"
};

// Using Record utility type
const statusMessages: Record<string, string> = {
  success: "Operation completed successfully",
  error: "Something went wrong",
  pending: "Processing..."
};

// Interface approach (recommended)
interface User {
  name: string;
  age: number;
  email: string;
  isActive?: boolean; // Optional property
}

const newUser: User = {
  name: "Bob",
  age: 25,
  email: "bob@example.com"
};

Always prefer interfaces over inline object types for reusable object structures. Interfaces are more flexible and can be extended or merged.

Intermediate Types: Building Flexibility 🔄

Union Types: Multiple Possibilities

Union types allow variables to hold values of different types:

// Basic union types
let id: string | number = 42;
id = "user-123"; // Also valid

// Union with literal types
type Status = "loading" | "success" | "error";
let requestStatus: Status = "loading";

// Function with union parameters
function formatId(id: string | number): string {
  if (typeof id === "string") {
    return id.toUpperCase();
  }
  return `ID-${id}`;
}

// Union with objects
interface Dog {
  breed: string;
  bark(): void;
}

interface Cat {
  breed: string;
  meow(): void;
}

type Pet = Dog | Cat;

function petSound(pet: Pet): void {
  // Type narrowing required
  if ("bark" in pet) {
    pet.bark();
  } else {
    pet.meow();
  }
}

Use union types judiciously. Avoid overly broad unions that make code hard to reason about. Always use type narrowing when working with union types.

Intersection Types: Combining Types

Intersection types combine multiple types into one:

// Basic intersection
type Person = {
  name: string;
  age: number;
};

type Employee = {
  employeeId: string;
  department: string;
};

type EmployeePerson = Person & Employee;

const worker: EmployeePerson = {
  name: "Sarah",
  age: 32,
  employeeId: "EMP001",
  department: "Engineering"
};

// Intersection with interfaces
interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

interface BlogPost {
  title: string;
  content: string;
  author: string;
}

type TimestampedPost = BlogPost & Timestamped;

Use intersection types when you need to combine multiple interfaces or types in a clean, modular way. They're perfect for adding common fields like timestamps or metadata.

Literal Types: Exact Values

Literal types restrict variables to specific values:

// String literals
type Theme = "light" | "dark" | "auto";
let currentTheme: Theme = "dark";

// Number literals
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;
let roll: DiceRoll = 4;

// Boolean literals
type IsTrue = true;
let flag: IsTrue = true;

// E.g., API endpoints
type APIEndpoint = "/users" | "/posts" | "/comments";
type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";

interface APIRequest {
  endpoint: APIEndpoint;
  method: HTTPMethod;
  body?: any;
}

Use literal types for values that can only be one of a few specific options. This creates more predictable and safer code, especially for configuration options and enums.

Advanced Types: Power and Flexibility 🚀

Generics: Type-Safe Reusability

Generics allow you to create reusable components that work with multiple types:

// Basic generic function
function identity<T>(arg: T): T {
  return arg;
}

const stringResult = identity<string>("hello"); // string
const numberResult = identity<number>(42); // number

// Generic interfaces
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

interface User {
  id: number;
  name: string;
  email: string;
}

const userResponse: ApiResponse<User> = {
  data: { id: 1, name: "Ajay", email: "hello@ajay.dev" },
  status: 200,
  message: "Success"
};

// Generic classes
class DataStore<T> {
  private items: T[] = [];

  add(item: T): void {
    this.items.push(item);
  }

  get(index: number): T | undefined {
    return this.items[index];
  }

  getAll(): T[] {
    return [...this.items];
  }
}

const stringStore = new DataStore<string>();
stringStore.add("hello");
stringStore.add("world");

// Generic constraints
interface Lengthable {
  length: number;
}

function logLength<T extends Lengthable>(item: T): T {
  console.log(item.length);
  return item;
}

logLength("hello"); // Works with strings
logLength([1, 2, 3]); // Works with arrays

Use generics for flexibility while maintaining type safety. They're essential for reusable libraries and APIs. Always add constraints when you need specific properties or methods.

Mapped Types: Dynamic Type Transformations

Mapped types create new types by transforming existing ones:

// Basic mapped type
type ReadOnly<T> = {
  readonly [P in keyof T]: T[P];
};

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

type ReadOnlyUser = ReadOnly<User>;
// Result: { readonly name: string; readonly age: number; readonly email: string; }

// Optional mapped type
type MakeOptional<T> = {
  [P in keyof T]?: T[P];
};

type OptionalUser = MakeOptional<User>;
// Result: { name?: string; age?: number; email?: string; }

// Advanced mapped type with conditional logic
type NonNullable<T> = {
  [P in keyof T]: T[P] extends null | undefined ? never : T[P];
};

// E.g., form field types
type FormField<T> = {
  [K in keyof T]: {
    value: T[K];
    error?: string;
    touched: boolean;
  };
};

type UserForm = FormField<User>;
// Result: {
//   name: { value: string; error?: string; touched: boolean; }
//   age: { value: number; error?: string; touched: boolean; }
//   email: { value: string; error?: string; touched: boolean; }
// }

Use mapped types when you need to transform or iterate over properties of existing types. They're perfect for creating utility types and handling complex data transformations.

Conditional Types: Smart Type Logic

Conditional types enable type-level logic based on other types:

// Basic conditional type
type IsString<T> = T extends string ? true : false;

type Test1 = IsString<string>; // true
type Test2 = IsString<number>; // false

// E.g., extract array element type
type ArrayElement<T> = T extends (infer U)[] ? U : never;

type StringArray = string[];
type ElementType = ArrayElement<StringArray>; // string

// Advanced conditional type
type NonNullable<T> = T extends null | undefined ? never : T;

type CleanType = NonNullable<string | null | undefined>; // string

// Conditional types with generics
type ApiResult<T> = T extends string
  ? { message: T }
  : T extends number
  ? { code: T }
  : { data: T };

type StringResult = ApiResult<string>; // { message: string }
type NumberResult = ApiResult<number>; // { code: number }
type ObjectResult = ApiResult<User>; // { data: User }

Use conditional types for advanced type-checking and transformations in complex data flows. They're powerful but should be used judiciously to avoid overly complex type definitions.

Utility Types: TypeScript's Built-in Helpers 🛠️

TypeScript provides several built-in utility types that solve common problems:

Partial - Making Properties Optional

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

// Partial makes all properties optional
type UserUpdate = Partial<User>;

function updateUser(id: number, updates: UserUpdate): User {
  // Implementation here
  return {} as User;
}

// Usage
updateUser(1, { name: "Samay" }); // Only name is provided
updateUser(1, { email: "hello@samay.com", age: 23 }); // Multiple fields

Required - Making Properties Required

interface Config {
  apiUrl?: string;
  timeout?: number;
  retries?: number;
}

// Required makes all properties mandatory
type RequiredConfig = Required<Config>;

function initializeApp(config: RequiredConfig): void {
  // All properties are guaranteed to exist
  console.log(config.apiUrl, config.timeout, config.retries);
}

Readonly - Making Properties Immutable

interface User {
  id: number;
  name: string;
  email: string;
}

type ImmutableUser = Readonly<User>;

const user: ImmutableUser = {
  id: 1,
  name: "Bob",
  email: "hello@bob.dev"
};

// user.name = "Tom"; // Error: Cannot assign to 'name' because it is a read-only property

Pick - Selecting Specific Properties

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
  password: string;
}

// Pick only specific properties
type PublicUser = Pick<User, "id" | "name" | "email">;

function getPublicUserInfo(user: User): PublicUser {
  return {
    id: user.id,
    name: user.name,
    email: user.email
  };
}

Record - Creating Key-Value Types

// Record creates a type with specific keys and value types
type UserRole = "admin" | "user" | "guest";
type Permissions = Record<UserRole, string[]>;

const rolePermissions: Permissions = {
  admin: ["read", "write", "delete"],
  user: ["read", "write"],
  guest: ["read"]
};

// Another example
type HTTPStatus = Record<number, string>;
const statusMessages: HTTPStatus = {
  200: "OK",
  404: "Not Found",
  500: "Internal Server Error"
};

E.g., API Response Handling

// Generic API response wrapper
interface ApiResponse<T> {
  data: T;
  success: boolean;
  message: string;
  timestamp: Date;
}

// User data structure
interface User {
  id: number;
  name: string;
  email: string;
  profile: {
    avatar: string;
    bio: string;
  };
}

// Specific response types
type GetUserResponse = ApiResponse<User>;
type GetUsersResponse = ApiResponse<User[]>;

// API service with proper typing
class UserService {
  async getUser(id: number): Promise<GetUserResponse> {
    const response = await fetch(`/api/users/${id}`);
    return response.json();
  }

  async getUsers(): Promise<GetUsersResponse> {
    const response = await fetch("/api/users");
    return response.json();
  }
}

// Usage with type safety
const userService = new UserService();
const userResponse = await userService.getUser(1);

if (userResponse.success) {
  // TypeScript knows this is User type
  console.log(userResponse.data.name);
  console.log(userResponse.data.profile.avatar);
}

E.g., React Component Props

import React from 'react';

// Button component props
interface ButtonProps {
  children: React.ReactNode;
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  onClick?: () => void;
}

// Typed React component
const Button: React.FC<ButtonProps> = ({
  children,
  variant = 'primary',
  size = 'medium',
  disabled = false,
  onClick
}) => {
  const className = `btn btn-${variant} btn-${size}`;

  return (
    <button 
      className={className}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

// Usage with full type safety
const App = () => {
  return (
    <div>
      <Button variant="primary" size="large" onClick={() => console.log('Clicked!')}>
        Click Me
      </Button>
    </div>
  );
};

E.g., Complex Data Structures

// E-commerce product system
interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
  images: string[];
  specifications: Record<string, string>;
}

interface CartItem {
  product: Product;
  quantity: number;
  selectedOptions?: Record<string, string>;
}

interface Order {
  id: string;
  customer: {
    id: string;
    name: string;
    email: string;
  };
  items: CartItem[];
  total: number;
  status: 'pending' | 'processing' | 'shipped' | 'delivered';
  createdAt: Date;
  updatedAt: Date;
}

// Shopping cart management
class ShoppingCart {
  private items: CartItem[] = [];

  addItem(product: Product, quantity: number = 1): void {
    const existingItem = this.items.find(item => item.product.id === product.id);

    if (existingItem) {
      existingItem.quantity += quantity;
    } else {
      this.items.push({ product, quantity });
    }
  }

  removeItem(productId: string): void {
    this.items = this.items.filter(item => item.product.id !== productId);
  }

  getTotal(): number {
    return this.items.reduce((total, item) => {
      return total + (item.product.price * item.quantity);
    }, 0);
  }

  getItems(): readonly CartItem[] {
    return [...this.items];
  }
}

Best Practices for Scalable TypeScript Code 📚

1. Always Declare Types Explicitly

// Good: Explicit type declarations
function calculateTax(amount: number, rate: number): number {
  return amount * rate;
}

const user: User = getUserFromDatabase();

// Avoid: Relying solely on inference for important types
function calculateTax(amount, rate) { // Types are unclear
  return amount * rate;
}

2. Separate Types from Logic

// types/user.ts
export interface User {
  id: number;
  name: string;
  email: string;
}

export interface CreateUserRequest {
  name: string;
  email: string;
}

export type UserRole = 'admin' | 'user' | 'guest';

// services/userService.ts
import { User, CreateUserRequest } from '../types/user';

export class UserService {
  async createUser(request: CreateUserRequest): Promise<User> {
    // Implementation
  }
}

3. Use Type Inference Wisely

// Good: Let TypeScript infer simple types
const numbers = [1, 2, 3, 4, 5]; // TypeScript infers number[]
const message = "Hello, World!"; // TypeScript infers string

// Good: Explicit types for complex scenarios
const userCache: Map<string, User> = new Map();
const apiResponse: ApiResponse<User[]> = await fetchUsers();

4. Avoid `any` and `unknown`

// Bad: Using any defeats the purpose of TypeScript
function processData(data: any): any {
  return data.someProperty;
}

// Good: Use specific types or generics
function processData<T extends { someProperty: string }>(data: T): string {
  return data.someProperty;
}

// When you must use unknown, narrow the type
function processUnknownData(data: unknown): string {
  if (typeof data === 'object' && data !== null && 'someProperty' in data) {
    return (data as { someProperty: string }).someProperty;
  }
  throw new Error('Invalid data format');
}

5. Modularize Types for Large Codebases

// types/common.ts
export interface ApiResponse<T> {
  data: T;
  success: boolean;
  message: string;
}

export interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

// types/user.ts
import { Timestamped } from './common';

export interface User extends Timestamped {
  id: number;
  name: string;
  email: string;
}

// types/product.ts
import { Timestamped } from './common';

export interface Product extends Timestamped {
  id: string;
  name: string;
  price: number;
}

Conclusion 🎯

TypeScript's type system is a powerful tool that transforms JavaScript development from a runtime guessing game into a compile-time safety net. By mastering these concepts – from basic primitive types to advanced generics and conditional types – you're building a foundation for writing more predictable, scalable, and maintainable code.

The journey doesn't end here. As you become more comfortable with TypeScript types, consider exploring these advanced topics:

Type Guards: Creating custom type narrowing functions
Advanced Generics: Variance, higher-order types, and complex constraints
Template Literal Types: Creating dynamic string types
TypeScript with React: Advanced patterns for component typing
TypeScript with Node.js: Building robust backend applications

Remember, mastering TypeScript types is a journey, not a destination. Start with the basics, practice regularly, and gradually incorporate more advanced patterns as your confidence grows. Your future self (and your teammates) will thank you for the investment in type safety and code quality.

Happy typing! 🚀

Found this guide helpful? Share it with your fellow JavaScript developers and let's build better, more reliable applications together!

TypeScript in 2025: Why Every JavaScript Developer Should Make the Switch (And How to Get Started) 🚀

Laxman Rathod — Wed, 09 Jul 2025 08:28:34 +0000

Picture this: You're debugging a JavaScript application at 2 AM, hunting down a mysterious Cannot read property 'name' of undefined error that's been haunting your codebase. Sound familiar? 😅

What if I told you there's a way to catch these errors before they reach production? Enter TypeScript – JavaScript's more disciplined sibling that's taking the development world by storm.

In 2025, TypeScript isn't just a nice-to-have; it's becoming the standard. Major frameworks like React, Vue, and Angular have embraced it, and companies from startups to tech giants are making the switch. If you're still writing vanilla JavaScript, you're missing out on a superpower that could transform your development experience.

What is TypeScript? 🤔

TypeScript is essentially JavaScript with a type system on top. Think of it as JavaScript that went to finishing school – it's the same language you know and love, but with better manners and more structure.

A Brief History

Created by Microsoft in 2012, TypeScript was born out of the need to build large-scale JavaScript applications. As JavaScript projects grew more complex, developers needed better tools to manage complexity and catch errors early.

How It Relates to JavaScript

Here's the beautiful part: TypeScript IS JavaScript. Every valid JavaScript file is also a valid TypeScript file. You can literally rename your .js files to .ts and start adding types gradually. TypeScript compiles down to clean, readable JavaScript that runs anywhere JavaScript runs.

The Core Benefits

Static Typing: Catch errors at compile time, not runtime
Better Tooling: Amazing autocomplete, refactoring, and navigation
Enhanced Developer Experience: Your IDE becomes your best friend
Modern Ecosystem: First-class support in VSCode, React, Node.js, and more

Why You Should Care: Supercharging Your JavaScript ⚡

TypeScript is like spell-check for your JavaScript. Just as spell-check catches typos before you send that important email, TypeScript catches bugs before they reach your users.

Making JavaScript Predictable

JavaScript's flexibility is both a blessing and a curse. TypeScript adds guardrails that make your code more predictable and maintainable:

// JavaScript - Runtime error waiting to happen
function greetUser(user) {
  return `Hello, ${user.name}!`;
}

greetUser(null); // 💥 Runtime error!

// TypeScript - Caught at compile time
interface User {
  name: string;
  email: string;
}

function greetUser(user: User): string {
  return `Hello, ${user.name}!`;
}

greetUser(null); // ❌ Compile error - caught before runtime!

The Analogy That Clicks

Think of TypeScript as adding traffic lights to JavaScript's wild west highway. JavaScript lets you drive anywhere, anytime – sometimes you crash, sometimes you don't. TypeScript adds structure that guides you safely to your destination while still giving you the freedom to code creatively.

Setting Up Your TypeScript Environment 🛠️

Let's get you up and running with a modern TypeScript setup that'll have you coding in minutes.

Prerequisites

First, make sure you have Node.js installed. If you don't have it yet, grab it from nodejs.org.

Installation Options

You have two main approaches:

Global Installation (Quick Start)

npm install -g typescript

Local Project Installation (Recommended)

# Using npm
npm install -D typescript

# Using yarn
yarn add -D typescript

# Using pnpm (faster alternative)
pnpm add -D typescript

Initialize Your TypeScript Project

Create a new directory and initialize your TypeScript configuration:

mkdir my-typescript-project
cd my-typescript-project

# Initialize npm project
npm init -y

# Create TypeScript config
npx tsc --init

This creates a tsconfig.json file – TypeScript's configuration heart. Here's a beginner-friendly version:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Project Structure Best Practices

Organize your project like this:

my-typescript-project/
├── src/
│   ├── index.ts
│   └── utils/
├── dist/           # Compiled JS files
├── package.json
└── tsconfig.json

Your First TypeScript Code: Hello World! 👋

Let's write some TypeScript! Create a src/index.ts file:

// src/index.ts
interface Person {
  name: string;
  age: number;
  isStudent: boolean;
}

function introduce(person: Person): string {
  const status = person.isStudent ? 'student' : 'professional';
  return `Hi, I'm ${person.name}, a ${person.age}-year-old ${status}!`;
}

const developer: Person = {
  name: "Alex",
  age: 28,
  isStudent: false
};

console.log(introduce(developer));

Compile and Run

# Compile TypeScript to JavaScript
npx tsc

# Run the compiled JavaScript
node dist/index.js

You should see: Hi, I'm Alex, a 28-year-old professional!

Pro Tip: Use ts-node for Faster Development

Install ts-node to run TypeScript files directly:

npm install -D ts-node

# Run TypeScript directly
npx ts-node src/index.ts

Best Practices for TypeScript Beginners 📚

1. Embrace Strict Mode

Always keep "strict": true in your tsconfig.json. It might seem intimidating, but it's your safety net:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

2. Prefer const Over let

TypeScript works better with immutable data:

// Good
const userName = "John";
const userAge = 30;

// Less ideal
let userName = "John";
let userAge = 30;

3. Start with Basic Types

Don't jump into complex types immediately. Master these first:

// Basic types
const message: string = "Hello TypeScript!";
const count: number = 42;
const isActive: boolean = true;
const items: string[] = ["apple", "banana", "orange"];

// When you're unsure, use any (sparingly!)
const dynamicData: any = fetchDataFromAPI();

4. Don't Over-Engineer

Start simple and add complexity gradually:

// Start with this
function addNumbers(a: number, b: number): number {
  return a + b;
}

// Not this (too complex for beginners)
function addNumbers<T extends number | bigint>(a: T, b: T): T {
  return (a + b) as T;
}

5. Use VSCode for Maximum Benefit

VSCode has built-in TypeScript support that provides:

Real-time error checking
Intelligent autocomplete
Automatic imports
Refactoring tools

Install the TypeScript extension for even better support!

Conclusion: Your TypeScript Journey Starts Now 🎯

TypeScript isn't just a trend – it's the future of JavaScript development. By adding types to your JavaScript, you're not just preventing bugs; you're building more maintainable, scalable, and professional applications.

Starting with TypeScript in 2025 is one of the smartest career moves you can make. The learning curve is gentle, the benefits are immediate, and the job market is hungry for TypeScript developers.

Take Action Today

Set up your first TypeScript project using this guide
Convert one of your existing JavaScript projects to TypeScript
Join the TypeScript community on Discord or Reddit
Follow TypeScript on Twitter for updates and tips

Remember: every expert was once a beginner. Your TypeScript journey starts with a single npm install typescript command. What are you waiting for? 🚀

Found this helpful? Drop a 🔥 in the comments and share your TypeScript success stories! Got questions? I'm here to help – the TypeScript community is incredibly welcoming to newcomers.

Connect me on X, GitHub, LinkedIn