Shahid Ali Online

Web Development for Agencies Who Need Speed & Reliability

I build custom WordPress, React, and Laravel solutions so you can deliver client projects faster, without technical headaches.

apiService.ts — vite-project
apiService.ts types.ts hooks/

// Professional API service implementation
// Using Axios with TypeScript and clean architecture

import axios, { AxiosInstance, AxiosResponse } from 'axios';
import { APIError } from './errors';
import type { ApiConfig, RequestParams } from './types';

/**
 * Robust HTTP service with interceptors, error handling,
 * and request cancellation
 */
export class ApiService {
  private instance: AxiosInstance;
  private pendingRequests: Map<string, AbortController> = new Map();

  constructor(config: ApiConfig) {
    this.instance = axios.create({
      baseURL: config.baseURL,
      timeout: 15000,
      headers: {
        'Content-Type': 'application/json',
        ...config.headers
      }
    });

    this.setupInterceptors();
  }

  private setupInterceptors(): void {
    // Request interceptor for auth tokens
    this.instance.interceptors.request.use(
      (config) => {
        const controller = new AbortController();
        const requestKey = `${config.method}-${config.url}`;
        
        // Cancel previous duplicate requests
        if (this.pendingRequests.has(requestKey)) {
          this.pendingRequests.get(requestKey)?.abort();
        }
        
        this.pendingRequests.set(requestKey, controller);
        config.signal = controller.signal;
        
        // Add auth token if exists
        const token = localStorage.getItem('authToken');
        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
        }
        
        return config;
      },
      (error) => Promise.reject(error)
    );

    // Response interceptor for error handling
    this.instance.interceptors.response.use(
      (response) => {
        const requestKey = `${response.config.method}-${response.config.url}`;
        this.pendingRequests.delete(requestKey);
        return response.data;
      },
      (error) => {
        if (error.code === 'ERR_CANCELED') return;
        
        const apiError = new APIError(
          error.response?.data?.message || error.message,
          error.response?.status || 500,
          error.response?.data?.errors
        );
        return Promise.reject(apiError);
      }
    );
  }

  /**
   * Generic request method with type safety
   */
  public async request<T>(
    params: RequestParams
  ): Promise<T> {
    try {
      const { method = 'GET', endpoint, data } = params;
      return await this.instance({
        method,
        url: endpoint,
        data
      });
    } catch (error) {
      if (error instanceof APIError) {
        // Handle specific API errors
        console.error('API Error:', error);
        throw error;
      }
      throw new Error('Network error occurred');
    }
  }

  // Specific API methods
  public async get<T>(endpoint: string): Promise<T> {
    return this.request<T>({ method: 'GET', endpoint });
  }

  public cancelRequests(): void {
    this.pendingRequests.forEach(controller => controller.abort());
    this.pendingRequests.clear();
  }
}

// Singleton instance pattern
export const apiService = new ApiService({
  baseURL: import.meta.env.VITE_API_BASE_URL
});
    

8+

Years of Experience

50+

Projects Delivered

100%

Client Satisfaction

Trusted by

How I Help Agencies & Marketers

Custom WordPress Development

Themes, plugins, ACF, WooCommerce

No bloated builders—just clean, fast code.

API & Backend Integration

Facebook, CRM, payment gateways

Seamlessly connect tools for your clients.

React, Node & Laravel Apps

Dynamic UIs + scalable backends

From prototypes to full platforms.

Need a specific tech stack? Let’s talk →

EUSTM

Panavent LLC

Pyramid Technologies Inc.

Spacemakers

Chemtrex LLC

The Buzzer

Hey I am Ali, a freelance web developer with 8+ years of helping agencies and marketers ship better websites. I focus on maintainable code and clear communication, so you get a smooth process from start to finish.

I’ve worked on many brand development projects with Shahid Ali for close to two years now.
In those two years, I’ve seen him not only excel at the core elements of his job project management and development but also learn other tasks that extend well beyond the scope of his role, like deep knowledge of web technology, quality check, and even championing digital marketing.

Danjel Cela

Vice Director at Madrassa " LIRIA " Elbasan

Jerome Houdremont

Media Content Strategy | Brand Positioning | Partner at Brainplug Sàrl
Very responsive, very helpful and great product delivery.

Alen Debensason

Co-Founder & CEO at Arbox
Ali is the best choice in website development out there. He demonstrated high quality work, and exceptional attention to detail. Looking forward to work with him again.

Anarkoi

Owner at JPX Designs
Looks great! thanks so much – the experience is great – we definitely have some ideas on future product development.

Carlos Lott

Account Manager at Generateagentleads.com
Ali was amazing! We had very detailed conversations to pin down all the requirements and he delivered exactly as promised. He knows his stuff and was able to make some suggestions that improved the overall design. I would highly recommend him and will gladly partner with him on future projects.

Alex Hernandez

Founder at unsteadystate.com





    Chemtrex

    "WordPress Optimization Tips for Agencies" "When to Choose Laravel Over WordPress" "How to Scope Web Projects for Clients"