SP
Available
Follow on Instagram
React
Node.js
Next.js
A collection of useful code snippets, utilities, and reusable components
All
React
React Custom Hook: useLocalStorage
A reusable hook for managing localStorage with React state synchronization
const useLocalStorage = (key, initialValue) => {
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {...
React
Hooks
localStorage
JavaScript
Express.js Error Handler Middleware
Centralized error handling middleware for Express.js applications
const errorHandler = (err, req, res, next) => {
const statusCode = err.statusCode || 500;
const message = err.message || 'Internal Server Error';
res.status(statusCode).json({
success: false,...
Express
Node.js
Error Handling
JavaScript
CSS Grid Layout Helper
Utility classes for responsive CSS Grid layouts
.grid-container {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
...
CSS
Grid
Responsive
CSS
TypeScript Generic API Response
Type-safe API response handling with TypeScript generics
interface ApiResponse<T> {
success: boolean;
data?: T;
error?: string;
message?: string;
}...
TypeScript
API
Generics
TypeScript
Next.js Image Optimization
Optimized image component with blur placeholder
import Image from 'next/image';
const OptimizedImage = ({ src, alt, width, height }) => (
<Image
src={src}
alt={alt}...
Next.js
Image
Optimization
JavaScript
MongoDB Aggregation Pipeline
Complex aggregation pipeline for data analysis
const pipeline = [
{ $match: { status: 'active' } },
{ $group: {
_id: '$category',
total: { $sum: '$amount' },
count: { $sum: 1 }...
MongoDB
Aggregation
Pipeline
JavaScript