Boilerplate

A full-stack boilerplate using Next.js App Router for the frontend and Next.js API Routes for the backend. It integrates Drizzle ORM for database management, TanStack Table for advanced data handling, and demonstrates form sanitization with DOMPurify to ensure secure handling of user-generated content. Additionally, it uses Axios for API requests and Zod for schema validation.

Features

• Next.js App Router for a modern frontend architecture.
• Next.js API Routes for backend logic and APIs.
• Drizzle ORM for type-safe database operations.
• TanStack Table for data grids with sorting, filtering, and pagination.
• Form sanitization with DOMPurify to protect against XSS attacks.
• Axios for efficient and flexible HTTP requests.
• Zod for robust runtime validation and type inference.
• Full CRUD example with integrated sanitization, validation, and secure API communication.
• Modular structure for scalability and maintainability.
• TypeScript support for type-safe development.

Technical Stack

• Frontend: Next.js (App Router) + Axios
• Backend: Next.js API Routes
• Database: PostgreSQL + Drizzle ORM
• Data Table: TanStack Table
• Validation: Zod
• Security: DOMPurify for sanitization

XSS Test Cases

Use the following test cases to validate the sanitization pipeline. All of these should be sanitized and prevented from executing in the app:

<!-- HTML Tag -->
<b>XSS_TEST_BOLD</b>

<!-- HTML Attribute -->
<img src=x onerror="console.log('XSS_IMG_ERROR')">

<!-- JavaScript -->
<script>alert('XSS_SCRIPT')</script>
<script>console.log('XSS_SCRIPT_LOG')</script>

<!-- JavaScript Event -->
<div onmouseover="alert('XSS_ONMOUSEOVER')">hover me</div>
<input autofocus onfocus="console.log('XSS_ONFOCUS')">

<!-- JavaScript URI -->
<a href="javascript:alert('XSS_JSURI')">click</a>

<!-- SVG -->
<svg onload="console.log('XSS_SVG_ONLOAD')"></svg>

<!-- Image -->
<img src=invalid onerror=alert('XSS_IMG_ONERROR')>

Use Case

Ideal for developers building apps that require user input handling with strong focus on security and validation. Perfect for:

• Admin dashboards or CMS-like apps handling user content.
• Full CRUD flows with safe data storage and display.
• Projects needing input sanitization, validation, and robust data tables.

By combining Next.js, Drizzle ORM, TanStack Table, DOMPurify, Axios, and Zod, this boilerplate delivers a secure, modern, and scalable foundation for real-world applications. 🚀