typescript

typescript
import { useState, useRef } from 'react'
import { DirectUpload } from '@rails/activestorage'

interface ImageUploadProps {
  onUploadComplete: (blobId: string) => void
  maxSize?: number

Image upload with preview and Rails Direct Upload

react rails activestorage
by Maya Patel 1 tab
typescript
export async function copyToClipboard(text: string) {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch {
    const ta = document.createElement('textarea');

Frontend: copy-to-clipboard with fallback

frontend web ux
by Mateo Rodriguez 1 tab
typescript
import type { Request, Response } from 'express';

export function eventsSse(_req: Request, res: Response) {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache, no-transform');
  res.setHeader('Connection', 'keep-alive');

SSE endpoint for server-to-browser events

node realtime http
by Mateo Rodriguez 1 tab
typescript
import fs from 'node:fs';
import { parse } from 'csv-parse';
import { withClient } from '../db/pool';

export async function importCsv(path: string) {
  const parser = fs.createReadStream(path).pipe(parse({ columns: true, trim: true }));

Streaming CSV import (Node streams)

node streams postgres
by Mateo Rodriguez 1 tab
typescript
import { lazy, Suspense } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Layout from '@/components/Layout'

// Eager load critical routes
import Home from '@/pages/Home'

Lazy loading routes with React.lazy and Suspense

react performance code-splitting
by Maya Patel 1 tab
typescript
import * as Sentry from '@sentry/nextjs';

export function initSentry() {
  Sentry.init({
    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
    environment: process.env.NEXT_PUBLIC_ENV ?? 'development',

Sentry initialization with release + environment

observability frontend
by Mateo Rodriguez 1 tab
typescript
import cors from 'cors';

const allow = new Set([
  'https://codesnips.dev',
  'https://staging.codesnips.dev'
]);

CORS configuration that’s explicit (no *)

security http api
by Mateo Rodriguez 1 tab
typescript
import React from 'react'
import ReactDOM from 'react-dom/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import App from './App'
import './index.css'

React Query for server state management

react react-query state-management
by Maya Patel 2 tabs
typescript
export type ApiError =
  | { error: 'VALIDATION_ERROR'; issues: Array<{ path: string; message: string }> }
  | { error: 'UNAUTHORIZED' }
  | { error: 'FORBIDDEN' }
  | { error: 'NOT_FOUND' }
  | { error: 'CONFLICT' }

API error shape that frontend can rely on

api typescript ux
by Mateo Rodriguez 1 tab
typescript
import { emailQueue } from './email.worker';

export async function enqueueWelcomeEmail(userId: string) {
  return emailQueue.add('welcome', { userId }, { jobId: `welcome-email:${userId}`, attempts: 5 });
}

BullMQ job idempotency via dedupe id

node redis background-jobs
by Mateo Rodriguez 1 tab
typescript
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

export async function getSnipWithAuthor(id: string) {
  return prisma.snip.findUnique({
    where: { id },

Prisma: avoid N+1 with include/select

prisma performance typescript
by Mateo Rodriguez 1 tab
sql
CREATE TABLE IF NOT EXISTS idempotency_keys (
  id BIGSERIAL PRIMARY KEY,
  key TEXT NOT NULL UNIQUE,
  request_hash TEXT NOT NULL,
  response_json JSONB NOT NULL,
  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()

Idempotency keys for “create” endpoints

api reliability postgres
by Mateo Rodriguez 2 tabs