I build custom WordPress, React, and Laravel solutions so you can deliver client projects faster, without technical headaches.
// 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
});
Years of Experience
Projects Delivered
Client Satisfaction
Themes, plugins, ACF, WooCommerce
No bloated builders—just clean, fast code.
Facebook, CRM, payment gateways
Seamlessly connect tools for your clients.
Dynamic UIs + scalable backends
From prototypes to full platforms.
Need a specific tech stack? Let’s talk →
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.
As we collaborated on various projects, I am pleased to recommend Ali’s development and project management skills. Ali’s expertise is rooted not only in his strong development know-how but also in his deep understanding of individual project needs. Ali, thank you very much for all the projects we have worked on together so far. I look forward to building a strong future partnership with you.