Creative Developer & Designer

import { useState, useEffect } from 'react';

type SetValue<T> = T | ((val: T) => T);

function useLocalStorage<T>(
  key: string,
  initialValue: T
): [T, (value: SetValue<T>) => void] {
  const [storedValue, setStoredValue] = useState<T>(() => {
    if (typeof window === "undefined") {
      return initialValue;
    }
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  const setValue = (value: SetValue<T>) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      if (typeof window !== "undefined") {
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
      }
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

export default useLocalStorage;

class SearchManager {
  constructor(apiEndpoint, debounceMs = 300) {
    this.apiEndpoint = apiEndpoint;
    this.debounceMs = debounceMs;
    this.abortController = null;
    this.timeoutId = null;
    this.cache = new Map();
  }

  async search(query, options = {}) {
    // Cancel previous request
    if (this.abortController) {
      this.abortController.abort();
    }
    
    // Clear existing timeout
    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
    }

    // Check cache first
    if (this.cache.has(query)) {
      return this.cache.get(query);
    }

    return new Promise((resolve, reject) => {
      this.timeoutId = setTimeout(async () => {
        try {
          this.abortController = new AbortController();
          
          const response = await fetch(`${this.apiEndpoint}?q=${encodeURIComponent(query)}`, {
            signal: this.abortController.signal,
            ...options
          });

          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }

          const results = await response.json();
          this.cache.set(query, results);
          resolve(results);
        } catch (error) {
          if (error.name !== 'AbortError') {
            reject(error);
          }
        }
      }, this.debounceMs);
    });
  }
}

.responsive-grid {
  --min-item-width: 280px;
  --gap: clamp(1rem, 3vw, 2rem);
  --padding: clamp(1rem, 4vw, 2rem);
  
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min-item-width), 1fr));
  gap: var(--gap);
  padding: var(--padding);
}

.grid-item {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 2px);
  padding: clamp(1rem, 3vw, 1.5rem);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.grid-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px hsl(var(--foreground) / 0.1);
}

@container (max-width: 400px) {
  .responsive-grid {
    grid-template-columns: 1fr;
  }
}

const winston = require('winston');

class AppError extends Error {
  constructor(message, statusCode, isOperational = true) {
    super(message);
    this.statusCode = statusCode;
    this.status = `${statusCode}`.startsWith('4') ? 'fail' : 'error';
    this.isOperational = isOperational;
    Error.captureStackTrace(this, this.constructor);
  }
}

const logger = winston.createLogger({
  level: 'info',
  format: winston.format.combine(
    winston.format.timestamp(),
    winston.format.errors({ stack: true }),
    winston.format.json()
  ),
  transports: [
    new winston.transports.File({ filename: 'error.log', level: 'error' }),
    new winston.transports.File({ filename: 'combined.log' })
  ]
});

module.exports = (err, req, res, next) => {
  err.statusCode = err.statusCode || 500;
  err.status = err.status || 'error';

  logger.error('API Error:', {
    message: err.message,
    statusCode: err.statusCode,
    stack: err.stack,
    url: req.url,
    method: req.method
  });

  if (process.env.NODE_ENV === 'development') {
    res.status(err.statusCode).json({
      status: err.status,
      error: err,
      message: err.message,
      stack: err.stack
    });
  } else {
    if (err.isOperational) {
      res.status(err.statusCode).json({
        status: err.status,
        message: err.message
      });
    } else {
      res.status(500).json({
        status: 'error',
        message: 'Something went wrong!'
      });
    }
  }
};