DevPortfolio - Full-Stack Developer & React Specialist

~/code-showcase

Exploring technical expertise through interactive code examples and terminal-inspired design

welcome.sh

$ git clone https://github.com/iyaminrtg/portfolio.git

$ cd portfolio && npm install

$ npm run dev

✓ Server running on http://localhost:3000

GitHub Activity

Repositories

127

Stars

Followers

Featured Code Snippets

useFetch.js

React Hooks

A reusable custom hook for handling API requests with loading, error states, and caching.

ReactHooksAPIPerformance

useFetch.js

import { useState, useEffect, useRef } from 'react';

export const useFetch = (url, options = {}) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const cache = useRef({});
  
  const { 
    cacheDuration = 5 * 60 * 1000, // 5 minutes default
    dependencies = [],
    skipFetch = false
  } = options;
  
  useEffect(() => {
    if (skipFetch) {
      setLoading(false);
      return;
    }
    
    const controller = new AbortController();
    const signal = controller.signal;
    
    const fetchData = async () => {
      setLoading(true);
      
      // Check cache first
      const cacheKey = url + JSON.stringify(options.body || {});
      const cachedData = cache.current[cacheKey];
      
      if (cachedData && Date.now() - cachedData.timestamp < cacheDuration) {
        setData(cachedData.data);
        setLoading(false);
        return;
      }
      
      try {
        const response = await fetch(url, {
          ...options,
          signal
        });
        
        if (!response.ok) {
          throw new Error("HTTP error! Status: " + response.status);
        }
        
        const result = await response.json();
        
        // Update cache
        cache.current[cacheKey] = {
          data: result,
          timestamp: Date.now()
        };
        
        if (!signal.aborted) {
          setData(result);
          setError(null);
        }
      } catch (err) {
        if (!signal.aborted) {
          setError(err.message);
          setData(null);
        }
      } finally {
        if (!signal.aborted) {
          setLoading(false);
        }
      }
    };
    
    fetchData();
    
    return () => controller.abort();
  }, [url, ...dependencies, skipFetch]);
  
  const refetch = () => {
    setLoading(true);
    // Refetch logic here...
  };
  
  return { data, loading, error, refetch };
};

💡

Technical Implementation

This custom hook provides a standardized way to handle API requests in React components. It manages loading and error states, supports request cancellation with AbortController, and implements a simple caching mechanism to reduce unnecessary network requests.

BinarySearchTree.ts

Data Structures

An efficient implementation of a binary search tree with insertion, deletion, and traversal methods.

TypeScriptData StructuresAlgorithmsGenerics

BinarySearchTree.ts

class TreeNode<T> {
  value: T;
  left: TreeNode<T> | null;
  right: TreeNode<T> | null;
  
  constructor(value: T) {
    this.value = value;
    this.left = null;
    this.right = null;
  }
}

class BinarySearchTree<T> {
  root: TreeNode<T> | null;
  private comparator: (a: T, b: T) => number;
  
  constructor(comparator: (a: T, b: T) => number = (a, b) => {
    if (a < b) return -1;
    if (a > b) return 1;
    return 0;
  }) {
    this.root = null;
    this.comparator = comparator;
  }
  
  insert(value: T): void {
    const newNode = new TreeNode(value);
    
    if (this.root === null) {
      this.root = newNode;
      return;
    }
    
    const insertNode = (node: TreeNode<T>, newNode: TreeNode<T>): void => {
      const comparison = this.comparator(newNode.value, node.value);
      
      if (comparison < 0) {
        if (node.left === null) {
          node.left = newNode;
        } else {
          insertNode(node.left, newNode);
        }
      } else {
        if (node.right === null) {
          node.right = newNode;
        } else {
          insertNode(node.right, newNode);
        }
      }
    };
    
    insertNode(this.root, newNode);
  }
  
  search(value: T): TreeNode<T> | null {
    const searchNode = (node: TreeNode<T> | null, value: T): TreeNode<T> | null => {
      if (node === null) return null;
      
      const comparison = this.comparator(value, node.value);
      
      if (comparison === 0) return node;
      if (comparison < 0) return searchNode(node.left, value);
      return searchNode(node.right, value);
    };
    
    return searchNode(this.root, value);
  }
  
  inOrderTraversal(): T[] {
    const result: T[] = [];
    
    const traverse = (node: TreeNode<T> | null): void => {
      if (node !== null) {
        traverse(node.left);
        result.push(node.value);
        traverse(node.right);
      }
    };
    
    traverse(this.root);
    return result;
  }
}

💡

Technical Implementation

This TypeScript implementation of a Binary Search Tree provides efficient operations for insertion, deletion, and searching. It includes traversal methods and uses generics to support any data type.

OptimizedImage.jsx

React Components

A React component for efficiently loading and displaying images with lazy loading and blur-up effect.

ReactPerformanceUXOptimization

OptimizedImage.jsx

import React, { useState, useEffect, useRef } from 'react';

const OptimizedImage = ({
  src,
  alt,
  width,
  height,
  placeholderSrc,
  className = '',
  onLoad,
  onError,
  lazy = true,
  threshold = 0.1,
  blurUp = true,
  errorFallback = '/images/error-placeholder.jpg',
}) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [error, setError] = useState(false);
  const [imageSrc, setImageSrc] = useState(placeholderSrc || '');
  const imageRef = useRef(null);
  
  useEffect(() => {
    let observer;
    let mounted = true;
    
    const loadImage = () => {
      const img = new Image();
      img.src = src;
      
      img.onload = () => {
        if (mounted) {
          setImageSrc(src);
          setIsLoaded(true);
          if (onLoad) onLoad();
        }
      };
      
      img.onerror = () => {
        if (mounted) {
          setError(true);
          setImageSrc(errorFallback);
          if (onError) onError();
        }
      };
    };
    
    if (lazy && 'IntersectionObserver' in window) {
      observer = new IntersectionObserver(
        (entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              loadImage();
              observer.unobserve(imageRef.current);
            }
          });
        },
        { threshold }
      );
      
      if (imageRef.current) {
        observer.observe(imageRef.current);
      }
    } else {
      loadImage();
    }
    
    return () => {
      mounted = false;
      if (observer && imageRef.current) {
        observer.unobserve(imageRef.current);
      }
    };
  }, [src, errorFallback, lazy, onLoad, onError, threshold]);
  
  const imageClasses = [
    className,
    blurUp && !isLoaded ? 'blur-sm scale-105' : '',
    'transition-all duration-500 ease-in-out',
  ].filter(Boolean).join(' ');
  
  return (
    <div className="overflow-hidden relative" style={{ width, height }}>
      <img
        ref={imageRef}
        src={error ? errorFallback : imageSrc}
        alt={alt}
        width={width}
        height={height}
        className={imageClasses}
        style={{ objectFit: 'cover' }}
      />
      
      {!isLoaded && !error && (
        <div className="absolute inset-0 flex items-center justify-center bg-gray-900/50">
          <div className="w-8 h-8 border-2 border-cyan-500 border-t-transparent rounded-full animate-spin"></div>
        </div>
      )}
    </div>
  );
};

export default OptimizedImage;

💡

Technical Implementation

This React component optimizes image loading with lazy loading using Intersection Observer API, blur-up effect transitions, comprehensive error handling, and performance optimizations.

Development Philosophy

🏗️

Clean Architecture

Organizing code for maintainability and scalability

Single Responsibility Principle

Dependency Injection

Separation of Concerns

Immutability

Meaningful Naming Conventions

⚡

Performance

Techniques for improving application performance

Memoization of expensive calculations

Virtualization for large lists

Code splitting and lazy loading

Efficient state management

Optimized rendering strategies

🔒

Security

Protecting applications from vulnerabilities

Input validation and sanitization

Protection against XSS and CSRF

Secure authentication patterns

Environment variable management

Regular dependency updates

Code Review Philosophy

My Approach to Code Reviews

Code reviews are a critical part of the development process, serving as both a quality control mechanism and a learning opportunity. My approach focuses on constructive feedback, knowledge sharing, and maintaining high standards while fostering a positive team environment.

review-checklist.md

## What I Look For:

✓Code readability and maintainability

✓Adherence to project architecture

✓Performance implications

✓Security considerations

✓Test coverage and quality

feedback-principles.md

## Feedback Principles:

→Focus on the code, not the person

→Provide specific, actionable feedback

→Explain the why behind suggestions

→Balance critique with positivity

→Use reviews as teaching opportunities

sample-review-comment.md

💡 Consider using a memoized selector here:

This would prevent unnecessary recalculations and improve performance with larger data sets.

const memoizedData = useMemo(() => {
  return expensiveCalculation(data);
}, [data]);