docs: update pic

fix: add rate limiter back for newsletter

Author: thedaviddias

README.md

@@ -1,19 +1,17 @@
-<div align="center">
-
-# UX Patterns for Devs
-
-🎨 A comprehensive collection of UX patterns for developers who want to build effective, accessible, and usable UI components.
+<a href="https://uxpatterns.dev/">
+  <img src="https://raw.githubusercontent.com/thedaviddias/ux-patterns-for-developers/refs/heads/main/banner.png" alt="">
+  </br>
+  </br>
+</a>
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Contributions Welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/thedaviddias/ux-patterns-for-developers/blob/main/.github/CONTRIBUTING.md)
-[![GitHub Stars](https://img.shields.io/github/stars/thedaviddias/ux-patterns-for-developers?style=social)](https://github.com/thedaviddias/ux-patterns-for-developers)
-[![Twitter Follow](https://img.shields.io/twitter/follow/thedaviddias?style=social)](https://x.com/thedaviddias)
 
-[View Documentation](https://uxpatterns.dev) · [Report Bug](https://github.com/thedaviddias/ux-patterns-for-developers/issues) · [Request Pattern](https://github.com/thedaviddias/ux-patterns-for-developers/issues/new)
+---
 
-![Screenshot of the homepage of UX Patterns for Devs](https://raw.githubusercontent.com/thedaviddias/ux-patterns-for-developers/refs/heads/main/ux-patterns-developers-2.jpeg)
+# UX Patterns for Devs
 
-</div>
+🎨 A comprehensive collection of UX patterns for developers who want to build effective, accessible, and usable UI components.
 
 ## ✨ Features
 

apps/gallery/app/api/newsletter/route.ts

@@ -1,6 +1,13 @@
-import { NextResponse } from "next/server";
 import { KitProvider } from "@ux-patterns/newsletter/kit-provider";
-import { type KitConfig, subscribeSchema } from "@ux-patterns/newsletter/schema";
+import {
+	checkRateLimit,
+	getRateLimitKey,
+} from "@ux-patterns/newsletter/rate-limiter";
+import {
+	type KitConfig,
+	subscribeSchema,
+} from "@ux-patterns/newsletter/schema";
+import { NextResponse } from "next/server";
 
 // POST handler for newsletter subscription
 export async function POST(request: Request) {
@@ -25,6 +32,18 @@ export async function POST(request: Request) {
 			);
 		}
 
+		// Server-side rate limiting based on IP address
+		const rateLimitKey = getRateLimitKey(request);
+		if (!checkRateLimit(rateLimitKey)) {
+			return NextResponse.json(
+				{
+					success: false,
+					message: "Too many requests. Please try again in a minute.",
+				},
+				{ status: 429 },
+			);
+		}
+
 		// Initialize Kit provider
 		const kitConfig: KitConfig = {
 			provider: "kit",

apps/kit/app/api/newsletter/route.ts

@@ -1,6 +1,13 @@
-import { NextResponse } from "next/server";
 import { KitProvider } from "@ux-patterns/newsletter/kit-provider";
-import { type KitConfig, subscribeSchema } from "@ux-patterns/newsletter/schema";
+import {
+	checkRateLimit,
+	getRateLimitKey,
+} from "@ux-patterns/newsletter/rate-limiter";
+import {
+	type KitConfig,
+	subscribeSchema,
+} from "@ux-patterns/newsletter/schema";
+import { NextResponse } from "next/server";
 
 // POST handler for newsletter subscription
 export async function POST(request: Request) {
@@ -25,6 +32,18 @@ export async function POST(request: Request) {
 			);
 		}
 
+		// Server-side rate limiting based on IP address
+		const rateLimitKey = getRateLimitKey(request);
+		if (!checkRateLimit(rateLimitKey)) {
+			return NextResponse.json(
+				{
+					success: false,
+					message: "Too many requests. Please try again in a minute.",
+				},
+				{ status: 429 },
+			);
+		}
+
 		// Initialize Kit provider
 		const kitConfig: KitConfig = {
 			provider: "kit",

apps/web/app/api/newsletter/route.ts

@@ -1,6 +1,13 @@
-import { NextResponse } from "next/server";
 import { KitProvider } from "@ux-patterns/newsletter/kit-provider";
-import { type KitConfig, subscribeSchema } from "@ux-patterns/newsletter/schema";
+import {
+	checkRateLimit,
+	getRateLimitKey,
+} from "@ux-patterns/newsletter/rate-limiter";
+import {
+	type KitConfig,
+	subscribeSchema,
+} from "@ux-patterns/newsletter/schema";
+import { NextResponse } from "next/server";
 
 // POST handler for newsletter subscription
 export async function POST(request: Request) {
@@ -25,6 +32,18 @@ export async function POST(request: Request) {
 			);
 		}
 
+		// Server-side rate limiting based on IP address
+		const rateLimitKey = getRateLimitKey(request);
+		if (!checkRateLimit(rateLimitKey)) {
+			return NextResponse.json(
+				{
+					success: false,
+					message: "Too many requests. Please try again in a minute.",
+				},
+				{ status: 429 },
+			);
+		}
+
 		// Initialize Kit provider
 		const kitConfig: KitConfig = {
 			provider: "kit",

banner.png

@@ -0,0 +1,52 @@
+// Simple in-memory rate limiter (consider using Redis/Upstash in production)
+const rateLimitMap = new Map<string, { count: number; resetTime: number }>();
+
+// Clean up expired entries every 5 minutes
+setInterval(
+	() => {
+		const now = Date.now();
+		const keysToDelete: string[] = [];
+		rateLimitMap.forEach((value, key) => {
+			if (value.resetTime < now) {
+				keysToDelete.push(key);
+			}
+		});
+		keysToDelete.forEach((key) => {
+			rateLimitMap.delete(key);
+		});
+	},
+	5 * 60 * 1000,
+);
+
+export function getRateLimitKey(request: Request): string {
+	// Get client IP from headers (works with Vercel/Cloudflare)
+	const forwardedFor = request.headers.get("x-forwarded-for");
+	const realIp = request.headers.get("x-real-ip");
+	const cfConnectingIp = request.headers.get("cf-connecting-ip");
+
+	const clientIp =
+		forwardedFor?.split(",")[0] || realIp || cfConnectingIp || "unknown";
+	return `newsletter:${clientIp}`;
+}
+
+export function checkRateLimit(
+	key: string,
+	maxRequests: number = 3,
+	windowMs: number = 60000,
+): boolean {
+	const now = Date.now();
+	const record = rateLimitMap.get(key);
+
+	if (!record || record.resetTime < now) {
+		// Create new record or reset expired one
+		rateLimitMap.set(key, { count: 1, resetTime: now + windowMs });
+		return true;
+	}
+
+	if (record.count >= maxRequests) {
+		return false; // Rate limit exceeded
+	}
+
+	record.count++;
+	return true;
+}