typescript

typescript
import { startOfDay, isToday, isYesterday, format } from 'date-fns';

export interface ChatMessage {
  id: string;
  senderId: string;
  senderName: string;

Group Chat Messages by Day with a Memoized Selector in React

react typescript selectors
by codesnips 3 tabs
typescript
import { z } from "zod";

const booleanFromString = z
  .string()
  .transform((v) => v.trim().toLowerCase())
  .pipe(z.enum(["true", "false", "1", "0"]))

Type-Safe Environment Variable Parsing and Validation With Zod

config zod environment
by codesnips 3 tabs
typescript
import { useEffect, useRef } from "react";

const FOCUSABLE = [
  "a[href]",
  "button:not([disabled])",
  "textarea:not([disabled])",

Trap Keyboard Focus in a Modal with a useFocusTrap React Hook

react hooks accessibility
by codesnips 3 tabs
typescript
import { S3Client } from "@aws-sdk/client-s3";
import { createPresignedPost, PresignedPost } from "@aws-sdk/s3-presigned-post";
import { randomUUID } from "crypto";

const s3 = new S3Client({ region: process.env.AWS_REGION });
const BUCKET = process.env.UPLOAD_BUCKET!;

Pre-signed S3 upload from the browser

s3 security aws-sdk
by codesnips 3 tabs
typescript
import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react'

type Theme = 'light' | 'dark'

interface ThemeContextType {
  theme: Theme

Dark mode with Tailwind and localStorage persistence

react tailwind dark-mode
by Maya Patel 3 tabs
typescript
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  // rawBody: true preserves the exact bytes Stripe signed
  const app = await NestFactory.create(AppModule, { rawBody: true });

Verify Stripe Webhook Signatures in a NestJS Guard Before the Handler

nestjs webhooks stripe
by codesnips 4 tabs
typescript
import { WebSocketServer } from 'ws';
import type WebSocket from 'ws';

type ClientState = { topics: Set<string> };
const state = new WeakMap<WebSocket, ClientState>();

WebSocket server with topic subscriptions (ws)

node realtime websockets
by Mateo Rodriguez 1 tab
typescript
import type { Redis } from "ioredis";

export interface StoredResponse {
  status: "pending" | "completed";
  fingerprint: string;
  httpStatus?: number;

Idempotent POST Requests in Express with a Redis-Backed Middleware

express redis idempotency
by codesnips 3 tabs
typescript
export interface Cursor {
  createdAt: string;
  id: string;
}

export function encodeCursor(c: Cursor): string {

Cursor Pagination for a REST List Endpoint with a Typed Fetch Client

typescript express rest
by codesnips 3 tabs
typescript
import { useState } from 'react'
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,

Drag and drop with dnd-kit

react drag-drop dnd-kit
by Maya Patel 1 tab
typescript
import { z } from 'zod';

export const signupSchema = z
  .object({
    email: z.string().min(1, 'Email is required').email('Enter a valid email'),
    password: z

React Hook Form + Zod resolver

react forms react-hook-form
by codesnips 3 tabs
typescript
import { Injectable, NgZone } from '@angular/core';
import { Observable, Subject } from 'rxjs';

export interface ObserverOptions {
  rootMargin?: string;
  threshold?: number | number[];

Lazy-Load Images with an Angular IntersectionObserver Directive

angular directive intersectionobserver
by codesnips 4 tabs