Free AI Code & Developer Prompts

You are a Staff Frontend Engineer. Build a high-performance React component for [Feature, e.g. an interactive financial transaction table with instant search and multi-column sorting]. Requirements: 1. Framework: Next.js (App Router), Tailwind CSS, Lucide React icons. 2. Architecture: Accessible (ARIA standards, keyboard navigable), mobile-responsive, zero layout-shift. 3. State: Local state using clean React hooks, optimistic UI updates, error boundary fallback. 4. Anti-Slop Rules: No generic purple gradients, use high-contrast dark slate styling with subtle hairline borders (1px solid #1e293b) and tabular numbers (tabular-nums). Output only clean, ready-to-use TypeScript code without conversational filler.

Design a ready-to-use Supabase (PostgreSQL) relational database schema for [App Concept, e.g. a multi-tenant document extraction SaaS with team billing]. Include: 1. UUIDv4 primary keys for all tables. 2. Row Level Security (RLS) policies enforcing strict tenant isolation: users can only SELECT, INSERT, UPDATE their own organization's records. 3. Atomic credit deduction stored procedure with row-level locking (`FOR UPDATE`) to prevent concurrency race conditions. 4. Auto-updating `updated_at` trigger. 5. Optimized indexes on foreign keys and frequently queried status columns.

Build a high-converting, fully responsive SaaS landing page in React 18, TypeScript, and Tailwind CSS. Design language: sleek dark theme (#0B0F19 background) with radial electric-indigo hero gradients. Include: 1. Sticky glassmorphic navbar with logo, nav links, and "Get Started" CTA 2. Hero section with bold heading, glowing pill badge, subtle animated grid background, and dual CTA buttons 3. Interactive Bento Grid showcase with 4 feature cards highlighting speed, security, and exports 4. Interactive pricing toggle (Monthly vs. Annual with 20% discount badge) and 3 pricing tiers (Free, Pro, Enterprise) 5. Testimonial carousel with customer avatars and star ratings 6. Accessible FAQ accordion component and modern footer with newsletter input.

Build a modern Kanban board web application in React and Tailwind CSS with zero external drag-and-drop dependencies (use HTML5 drag and drop API). Features: 1. Four columns: Backlog, In Progress, Code Review, Done with task counters 2. Task cards with editable title, priority badge (Low/Medium/High with distinct colors), due date, and assignee avatar 3. Quick "Add Task" inline input or modal 4. Smooth drag-and-drop between columns with visual drop target highlighting 5. Search & filter bar to filter tasks by keyword or priority 6. Full state persistence in browser localStorage so reloads keep all tasks.

Create an executive financial analytics dashboard using React, Tailwind CSS, and Lucide icons. Include: 1. Header with greeting, date picker, search bar, and user profile avatar 2. 4 top KPI stat cards (Total Revenue, Active Subscribers, Churn Rate, MRR Growth) with percentage change chips (+12.4% vs last month) 3. Interactive chart component showing 12-month revenue trajectory 4. Recent transactions table with column sorting, status badges (Completed, Pending, Failed), and pagination 5. Quick Action buttons: "Export CSV", "Generate Invoice", and "Add Funds".

Act as a Senior Principal Frontend Engineer. Build a sleek, dark-mode modern SaaS analytics dashboard using React, Next.js 14 (App Router), Tailwind CSS, and Lucide React icons. Include a sidebar navigation, a top navbar with user profile dropdown, and a main content grid featuring interactive charts using Recharts. Ensure clean component structure, responsive design, smooth transition animations, and accessible accessibility attributes.

Write a ready-to-use JavaScript Code Node for an n8n workflow that ingests binary files from a document extraction webhook and sends them to Gemini. Requirements: 1. Validate HMAC-SHA256 signature in incoming `x-webhook-signature` header. 2. Extract base64 buffer from binary item without memory leaks. 3. Construct multimodal payload for Gemini with structured JSON schema enforcement. 4. Handle exponential retry on HTTP 429 and 503 errors. 5. Return normalized item containing extracted JSON and execution latency metrics.

Build an ultra-modern responsive Bento Grid component in React and Tailwind CSS. Specifications: - 5 cards with unequal spans (e.g. 2 large 2x2 cards, 3 compact cards). - Dynamic mouse spotlight effect: A subtle radial gradient following cursor coordinates across card hairline borders (`pointer-events-none`). - High contrast dark palette: bg-slate-950, card bg-slate-900/40, border slate-800, text slate-200. - Zero generic purple AI gradients; use sharp emerald, amber, and cyan accents for metric badges. - Smooth micro-interactions on hover using CSS transforms (`hover:-translate-y-1 transition-all duration-300`). Deliver complete standalone component code with TypeScript props.

Write a high-throughput Python FastAPI endpoint for asynchronous PDF/image file uploads. Requirements: 1. Accept `UploadFile` up to 30MB. 2. Validate magic bytes in memory (reject executable binaries renamed as .pdf). 3. Stream chunks directly to a ClamAV daemon (`pyclamd`) without writing temporary files to disk. 4. Enforce user rate limits using Redis token bucket (10 uploads/minute per API key). 5. Return JSON with file SHA-256 hash, verified MIME type, and temporary S3 presigned URL. Include comprehensive docstrings and Pydantic response models.

Write a complete Supabase Edge Function (Deno TypeScript) to authenticate and process incoming payment or document extraction webhooks. Specifications: - Extract raw request body as `ArrayBuffer`. - Compute HMAC-SHA256 digest using `crypto.subtle` and secret stored in `Deno.env.get('WEBHOOK_SECRET')`. - Use timing-safe string comparison to prevent side-channel timing attacks. - If valid, parse JSON and execute atomic database insert into `processed_events` with idempotency key check. - Return 200 OK immediately with `{ received: true }`.

Create a Next.js (App Router) / React 19 Server Action and client form for user profile updates. Features: 1. Server Action file with `'use server'` directive. 2. Strict Zod schema validating username, email, and organization slug with custom error messages. 3. Client component leveraging `useActionState` and `useOptimistic` hook. 4. Instant optimistic UI feedback with automatic rollback and toast notification if server validation or database query fails. 5. Full accessible ARIA attributes on input fields for screen readers.

Write an `opengraph-image.tsx` route handler using `@vercel/og` (Satori) for dynamic social share cards. Design specifications: - Dimensions: 1200x630px. - Dynamic props: Accept `title`, `category`, and `toolsCount` from search params. - Sleek dark theme: Deep slate backdrop (`#020617`), subtle grid lines, custom SVG logo icon on top-left, large bold typography (`Plus Jakarta Sans`), and glowing badge indicating '120+ AI Tools Catalog'. - Optimized caching headers: `Cache-Control: public, max-age=86400, stale-while-revalidate=604800`.

Write a production PostgreSQL stored procedure and pg_cron schedule to enforce a strict monthly quota policy. Policy rules: 1. Every user has a monthly limit of 10 free extractions. 2. Zero carry-forward: If a user only extracted 4 files in October, their remaining 6 expire on November 1st. They reset back to exactly 10, NEVER 16. 3. Table schema: `users_quota (user_id UUID PRIMARY KEY, extractions_used INT, quota_limit INT DEFAULT 10, last_reset_month DATE)`. 4. Procedure `check_and_deduct_quota(p_user_id UUID)` that locks row `FOR UPDATE`, checks if `last_reset_month < date_trunc('month', CURRENT_DATE)`, resets `extractions_used = 0` if new month, checks if `extractions_used < quota_limit`, increments by 1, and returns boolean `allowed`. 5. Schedule cron job running at midnight on the 1st of every month.

Implement a sliding-window log rate limiter middleware for Node.js Express using `ioredis`. Specifications: - Group requests by client IP or authenticated user ID. - Allow 60 requests per 60-second rolling window. - Use Redis sorted sets (`ZADD`, `ZREMRANGEBYSCORE`, `ZCARD`, `EXPIRE`) inside an atomic multi-transaction to achieve race-free counting across multi-container deployments. - Return standard rate limit headers: `X-RateLimit-Limit`, `X-RateLimit-Remaining`, `X-RateLimit-Reset`. - Send 429 Too Many Requests with informative JSON retry-after timestamp.

Write a high-performance Python utility function to sanitize tabular data before exporting to CSV or Excel (.xlsx). Security requirements: 1. Neutralize Formula Injection / CSV Injection (CWE-1236). 2. Any string cell beginning with `=`, `+`, `-`, `@`, `\t`, or `\r` must be prepended with a single quote (`'`). 3. Strip dangerous DDE commands like `=cmd|' /C calc'!A0` or `=HYPERLINK`. 4. Preserve valid numeric values (negative numbers like `-45.20` must remain numbers, not quoted strings). 5. Include unit tests with pytest testing edge cases (whitespace padding, Unicode fullwidth equals signs).

Write an enterprise-grade multi-stage Dockerfile for a Next.js (App Router) application utilizing standalone output. Stages: 1. `deps`: Alpine Node 20 base, cache npm/bun dependencies. 2. `builder`: Run build script with `NEXT_TELEMETRY_DISABLED=1`. 3. `runner`: Ultra-lightweight non-root user (`nodejs:nodejs`, UID 10001), copy only necessary static assets and standalone server files. Features: - Image size under 150MB. - Healthcheck instruction probing `/api/health` every 15s. - Proper signal handling (`dumb-init` or Node process) for graceful container shutdown on SIGTERM.

Write a TypeScript wrapper class for the official `@google/genai` SDK. Features: 1. Initialize `GoogleGenAI` instance with API key from environment. 2. Method `extractDocument<T>(fileBuffer: Buffer, mimeType: string, zodSchema: z.ZodSchema<T>): Promise<T>`. 3. Convert Zod schema into valid Gemini JSON schema definition. 4. Wrap API calls in an exponential backoff loop with full jitter for handling HTTP 429 quota exhaustion and HTTP 503 service unavailable. 5. Log token usage counts (prompt tokens, completion tokens) for internal cost tracking. 6. Export clean TypeScript types.

Build a Chrome Extension (Manifest V3) that adds a context menu item: 'Extract Document Data'. Functionality: 1. `background.ts`: Register context menu on text selection and PDF link clicks. 2. When clicked, capture target URL or selected text and dispatch message to side panel. 3. `sidepanel.tsx`: Display extraction progress bar with clean animated pulse. 4. Call document extraction API via background worker with authenticated Bearer token stored in `chrome.storage.sync`. 5. Allow user to copy extracted JSON or download formatted `.xlsx` directly from the side panel.

Create a complete `.github/workflows/security-audit.yml` pipeline that triggers on pull requests to `main`. Jobs to execute in parallel: 1. Secret Scanning: Run `trufflehog` to detect hardcoded API keys, Supabase service roles, or JWT tokens. 2. Dependency Vulnerability Audit: Run `npm audit --audit-level=high`. 3. Static Code Analysis: Run ESLint with security plugins (`eslint-plugin-security`). 4. Typecheck: Run `tsc --noEmit`. 5. Build: Verify Vite/Next.js production bundle compiles with zero warnings. Block pull request merging if any high-severity vulnerability or leaked secret is found.

Build an accessible 3-step document onboarding wizard in React and Tailwind CSS. Step 1: File Upload (drag-and-drop zone with keyboard Enter/Space activation). Step 2: Schema Field Selection (checkbox grid with Arrow key navigation). Step 3: Export Format & Destination (Radio group with live JSON/Excel preview). Accessibility requirements: - Announce step changes using `aria-live="polite"`. - Manage focus automatically: Shift focus to step header on transition. - Persist incomplete progress to `localStorage`. - Include Back, Next, and Skip buttons with proper `tabIndex`.

Create a ultra-fast virtualized data table in React 19 using `@tanstack/react-table` and `@tanstack/react-virtual`. Requirements: 1. Capable of smoothly rendering 10,000+ extracted invoice records at 60 FPS. 2. Dynamic column resizing, multi-column sorting, and column pin toggling (sticky left columns). 3. Inline cell editing with keyboard Enter to save and Escape to cancel. 4. Global fuzzy filter input with debounced 150ms search. 5. Sticky table header and virtual scroll container with custom slim slate scrollbar.

Write a Cloudflare Worker script that acts as a secure API reverse proxy. Features: 1. Whitelist allowed origin domains (e.g. `https://example.com`, `https://app.example.com`). 2. Intercept `OPTIONS` preflight requests and reply with proper CORS headers (`Access-Control-Allow-Methods: GET, POST, OPTIONS`, `Access-Control-Allow-Headers: Authorization, Content-Type`). 3. Strip sensitive internal routing headers before forwarding to upstream backend. 4. Mask client IP address when calling third-party LLM providers. 5. Add `X-Response-Time` header to monitor latency.

Write a Drizzle ORM schema (`schema.ts`) and SQL migration for a multi-tenant document extraction platform. Tables: 1. `organizations`: id, name, tier (free/pro/enterprise), created_at. 2. `users`: id (references auth.users), org_id, email, role (owner/member). 3. `documents`: id, org_id, user_id, filename, file_size, storage_path, extraction_status, extracted_data (jsonb), created_at, expires_at. Include: - Complete PostgreSQL RLS policies in raw SQL: Enforce that users can only view and mutate documents belonging to their own `org_id`. - Index on `(org_id, created_at DESC)` and GIN index on `extracted_data`.

Implement a reliable background webhook delivery worker using Node.js and BullMQ. Specifications: - Queue `webhook-delivery` with exponential backoff strategy: 5 retry attempts (intervals: 10s, 30s, 2m, 10m, 1h). - Send signed POST payload with `X-Webhook-Signature` and timestamp. - On final failure (after 5 attempts), move job to `webhook-dead-letter-queue` and fire an alert to PagerDuty/Discord. - Provide an API endpoint `/api/admin/dlq/replay` allowing admins to retry failed webhooks with one click.