Code Snippets Library

A custom hook that persists state to localStorage with automatic serialization.

import { useState, useEffect } from 'react'

A hook that delays updating a value until a specified time has passed since the last change.

import { useState, useEffect } from 'react'

A generic data fetching hook with loading and error states.

import { useState, useEffect } from 'react'

Detects clicks outside a referenced element to close dropdowns or modals.

import { useEffect, useRef } from 'react'

An accessible toggle switch component with smooth animation.

import { useState } from 'react'

A reusable modal dialog with backdrop, keyboard handling, and portal rendering.

import { useEffect, type ReactNode } from 'react'
import { createPortal } from 'react-dom'

A hook that triggers a callback when the user scrolls near the bottom of the page.

import { useEffect, useCallback } from 'react'

A hook and component for toggling dark mode with system preference detection.

import { useState, useEffect } from 'react'

A typed API route handler with request validation and error handling.

import { NextRequest, NextResponse } from 'next/server'

Middleware that protects routes by checking for an authentication token.

import { NextRequest, NextResponse } from 'next/server'

Generate dynamic SEO metadata based on page params and fetched data.

import type { Metadata } from 'next'

A form that uses server actions for submission with validation.

'use server'

Automatically generate a sitemap.xml from static and dynamic routes.

import type { MetadataRoute } from 'next'

Useful custom utility types for everyday TypeScript development.

// Make specific keys optional
type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>

Type-safe alternatives to enums using const objects and union types.

// Instead of: enum Status { Active, Inactive, Pending }
// Use a const object:

Runtime type narrowing functions for safe type checking.

// User-defined type guard
interface Dog { kind: 'dog'; bark(): void }

Runtime schema validation with automatic TypeScript type inference.

import { z } from 'zod'

A type-safe, reusable HTTP client with generics and interceptors.

interface ApiResponse<T> {
  data: T

A frosted glass effect using backdrop-filter for modern UI cards.

.glass-card {
  background: rgba(255, 255, 255, 0.08);

Apply gradient colors to text using background-clip for eye-catching headings.

.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);

A responsive grid system that adapts from 1 column on mobile to 4 columns on desktop.

<!-- Responsive card grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6">

Enable smooth scrolling behavior with CSS and scroll-snap for sections.

/* Global smooth scrolling */
html {

A set of reusable Express middleware functions for logging, error handling, and CORS.

import express, { Request, Response, NextFunction } from 'express'

JWT token generation and verification middleware for API authentication.

import jwt from 'jsonwebtoken'
import type { Request, Response, NextFunction } from 'express'

An in-memory rate limiter middleware to protect APIs from abuse.

import type { Request, Response, NextFunction } from 'express'

Handle file uploads with validation for type, size, and storage configuration.

import multer from 'multer'
import path from 'path'

Transform Eloquent models into structured JSON API responses.

<?php

A middleware that checks user roles and logs request details.

<?php

Reusable query scopes for cleaner and more expressive Eloquent queries.

<?php

A queueable job for handling time-consuming tasks asynchronously.

<?php