LinkedIn Clone

api-integration-patterns • 12/31/2025

API INTEGRATION PATTERNS

Linkedin Admin Panel

This document provides comprehensive information about API integration patterns used in the Linkedin Admin Panel, including HTTP client configuration, request/response handling, error management, and performance optimization strategies.

Architectural Design Credit and Contact Information

The architectural design of this API integration system is credited to Mindbricks Genesis Engine.

We encourage open communication and welcome any questions or discussions related to the architectural aspects of this API integration system.

Documentation Scope

This guide covers the complete API integration patterns within the Linkedin Admin Panel. It includes HTTP client configuration, request/response handling, error management, caching strategies, and performance optimization techniques.

Intended Audience

This documentation is intended for frontend developers, API integrators, and system architects who need to understand, implement, or maintain API integration patterns within the admin panel.

HTTP Client Architecture

Service-Specific Axios Instances

JobApplication Axios Configuration

import axios from 'axios';
import { CONFIG } from 'src/global-config';

const jobApplicationAxiosInstance = axios.create({ 
  baseURL: CONFIG.jobApplicationServiceUrl
});

jobApplicationAxiosInstance.interceptors.response.use(
  (response) => response,
  (error) => Promise.reject((error.response && error.response.data) || 'Something went wrong!')
);

export default jobApplicationAxiosInstance;

Fetcher Utility

export const fetcher = async (args) => {
  try {
    const [url, config] = Array.isArray(args) ? args : [args];
    const res = await jobApplicationAxiosInstance.get(url, { ...config });
    return res.data;
  } catch (error) {
    console.error('Failed to fetch:', error);
    throw error;
  }
};

Service Endpoints

export const jobApplicationEndpoints = {
    
    
        jobPosting: {
            
                
                updateJobPosting: '/v1/jobpostings/:jobPostingId'
            
                ,
                deleteJobPosting: '/v1/jobpostings/:jobPostingId'
            
                ,
                getJobPosting: '/v1/jobpostings/:jobPostingId'
            
                ,
                listJobPostings: '/v1/jobpostings'
            
                ,
                createJobPosting: '/v1/jobpostings'
            
        },
    
        jobApplication: {
            
                
                deleteJobApplication: '/v1/jobapplications/:jobApplicationId'
            
                ,
                getJobApplication: '/v1/jobapplications/:jobApplicationId'
            
                ,
                updateJobApplication: '/v1/jobapplications/:jobApplicationId'
            
                ,
                createJobApplication: '/v1/jobapplications'
            
                ,
                listJobApplications: '/v1/jobapplications'
            
        }
    
};

Networking Axios Configuration

import axios from 'axios';
import { CONFIG } from 'src/global-config';

const networkingAxiosInstance = axios.create({ 
  baseURL: CONFIG.networkingServiceUrl
});

networkingAxiosInstance.interceptors.response.use(
  (response) => response,
  (error) => Promise.reject((error.response && error.response.data) || 'Something went wrong!')
);

export default networkingAxiosInstance;

Fetcher Utility

export const fetcher = async (args) => {
  try {
    const [url, config] = Array.isArray(args) ? args : [args];
    const res = await networkingAxiosInstance.get(url, { ...config });
    return res.data;
  } catch (error) {
    console.error('Failed to fetch:', error);
    throw error;
  }
};

Service Endpoints

export const networkingEndpoints = {
    
    
        connection: {
            
                
                createConnection: '/v1/connections'
            
                ,
                listConnections: '/v1/connections'
            
                ,
                deleteConnection: '/v1/connections/:connectionId'
            
                ,
                getConnection: '/v1/connections/:connectionId'
            
        },
    
        connectionRequest: {
            
                
                deleteConnectionRequest: '/v1/connectionrequests/:connectionRequestId'
            
                ,
                updateConnectionRequest: '/v1/connectionrequests/:connectionRequestId'
            
                ,
                listConnectionRequests: '/v1/connectionrequests'
            
                ,
                createConnectionRequest: '/v1/connectionrequests'
            
                ,
                getConnectionRequest: '/v1/connectionrequests/:connectionRequestId'
            
        }
    
};

Company Axios Configuration

import axios from 'axios';
import { CONFIG } from 'src/global-config';

const companyAxiosInstance = axios.create({ 
  baseURL: CONFIG.companyServiceUrl
});

companyAxiosInstance.interceptors.response.use(
  (response) => response,
  (error) => Promise.reject((error.response && error.response.data) || 'Something went wrong!')
);

export default companyAxiosInstance;

Fetcher Utility

export const fetcher = async (args) => {
  try {
    const [url, config] = Array.isArray(args) ? args : [args];
    const res = await companyAxiosInstance.get(url, { ...config });
    return res.data;
  } catch (error) {
    console.error('Failed to fetch:', error);
    throw error;
  }
};

Service Endpoints

export const companyEndpoints = {
    
    
        companyFollower: {
            
                
                followCompany: '/v1/followcompany'
            
                ,
                unfollowCompany: '/v1/unfollowcompany/:companyFollowerId'
            
                ,
                listCompanyFollowers: '/v1/companyfollowers'
            
                ,
                getCompanyFollower: '/v1/companyfollowers/:companyFollowerId'
            
        },
    
        companyUpdate: {
            
                
                getCompanyUpdate: '/v1/companyupdates/:companyUpdateId'
            
                ,
                createCompanyUpdate: '/v1/companyupdates'
            
                ,
                updateCompanyUpdate: '/v1/companyupdates/:companyUpdateId'
            
                ,
                deleteCompanyUpdate: '/v1/companyupdates/:companyUpdateId'
            
                ,
                listCompanyUpdates: '/v1/companyupdates'
            
        },
    
        company: {
            
                
                createCompany: '/v1/companies'
            
                ,
                getCompany: '/v1/companies/:companyId'
            
                ,
                listCompanies: '/v1/companies'
            
                ,
                updateCompany: '/v1/companies/:companyId'
            
                ,
                deleteCompany: '/v1/companies/:companyId'
            
        },
    
        companyAdmin: {
            
                
                getCompanyAdmin: '/v1/companyadmins/:companyAdminId'
            
                ,
                removeCompanyAdmin: '/v1/removecompanyadmin/:companyAdminId'
            
                ,
                assignCompanyAdmin: '/v1/assigncompanyadmin'
            
                ,
                listCompanyAdmins: '/v1/companyadmins'
            
        }
    
};

Content Axios Configuration

import axios from 'axios';
import { CONFIG } from 'src/global-config';

const contentAxiosInstance = axios.create({ 
  baseURL: CONFIG.contentServiceUrl
});

contentAxiosInstance.interceptors.response.use(
  (response) => response,
  (error) => Promise.reject((error.response && error.response.data) || 'Something went wrong!')
);

export default contentAxiosInstance;

Fetcher Utility

export const fetcher = async (args) => {
  try {
    const [url, config] = Array.isArray(args) ? args : [args];
    const res = await contentAxiosInstance.get(url, { ...config });
    return res.data;
  } catch (error) {
    console.error('Failed to fetch:', error);
    throw error;
  }
};

Service Endpoints

export const contentEndpoints = {
    
    
        post: {
            
                
                createPost: '/v1/posts'
            
                ,
                listPosts: '/v1/posts'
            
                ,
                getPost: '/v1/posts/:postId'
            
                ,
                deletePost: '/v1/posts/:postId'
            
                ,
                updatePost: '/v1/posts/:postId'
            
                ,
                listUserPosts: '/v1/userposts'
            
        },
    
        like: {
            
                
                likePost: '/v1/likepost'
            
                ,
                listLikes: '/v1/likes'
            
                ,
                unlikePost: '/v1/unlikepost/:likeId'
            
        },
    
        comment: {
            
                
                updateComment: '/v1/comments/:commentId'
            
                ,
                createComment: '/v1/comments'
            
                ,
                listComments: '/v1/comments'
            
                ,
                getComment: '/v1/comments/:commentId'
            
                ,
                deleteComment: '/v1/comments/:commentId'
            
        }
    
};

Messaging Axios Configuration

import axios from 'axios';
import { CONFIG } from 'src/global-config';

const messagingAxiosInstance = axios.create({ 
  baseURL: CONFIG.messagingServiceUrl
});

messagingAxiosInstance.interceptors.response.use(
  (response) => response,
  (error) => Promise.reject((error.response && error.response.data) || 'Something went wrong!')
);

export default messagingAxiosInstance;

Fetcher Utility

export const fetcher = async (args) => {
  try {
    const [url, config] = Array.isArray(args) ? args : [args];
    const res = await messagingAxiosInstance.get(url, { ...config });
    return res.data;
  } catch (error) {
    console.error('Failed to fetch:', error);
    throw error;
  }
};

Service Endpoints

export const messagingEndpoints = {
    
    
        message: {
            
                
                listMessages: '/v1/messages'
            
                ,
                getMessage: '/v1/messages/:messageId'
            
                ,
                updateMessage: '/v1/messages/:messageId'
            
                ,
                deleteMessage: '/v1/messages/:messageId'
            
                ,
                createMessage: '/v1/messages'
            
        },
    
        conversation: {
            
                
                updateConversation: '/v1/conversations/:conversationId'
            
                ,
                getConversation: '/v1/conversations/:conversationId'
            
                ,
                deleteConversation: '/v1/conversations/:conversationId'
            
                ,
                listConversations: '/v1/conversations'
            
                ,
                createConversation: '/v1/conversations'
            
        }
    
};

Profile Axios Configuration

import axios from 'axios';
import { CONFIG } from 'src/global-config';

const profileAxiosInstance = axios.create({ 
  baseURL: CONFIG.profileServiceUrl
});

profileAxiosInstance.interceptors.response.use(
  (response) => response,
  (error) => Promise.reject((error.response && error.response.data) || 'Something went wrong!')
);

export default profileAxiosInstance;

Fetcher Utility

export const fetcher = async (args) => {
  try {
    const [url, config] = Array.isArray(args) ? args : [args];
    const res = await profileAxiosInstance.get(url, { ...config });
    return res.data;
  } catch (error) {
    console.error('Failed to fetch:', error);
    throw error;
  }
};

Service Endpoints

export const profileEndpoints = {
    
    
        profile: {
            
                
                updateProfile: '/v1/profiles/:profileId'
            
                ,
                deleteProfile: '/v1/profiles/:profileId'
            
                ,
                listProfiles: '/v1/profiles'
            
                ,
                createProfile: '/v1/profiles'
            
                ,
                getProfile: '/v1/profiles/:profileId'
            
        },
    
        premiumsubscription: {
            
                
                deletePremuimSub: '/v1/premuimsub/:premiumsubscriptionId'
            
                ,
                createPremuimSub: '/v1/premuimsub'
            
                ,
                updatePremuimSub: '/v1/premuimsub/:premiumsubscriptionId'
            
                ,
                getPremuimSub: '/v1/premuimsub/:premiumsubscriptionId'
            
                ,
                listPremuimSub: '/v1/premuimsub'
            
                ,
                startPremiumsubscriptionPayment: '/v1/startpremiumsubscriptionpayment/:premiumsubscriptionId'
            
                ,
                refreshPremiumsubscriptionPayment: '/v1/refreshpremiumsubscriptionpayment/:premiumsubscriptionId'
            
                ,
                callbackPremiumsubscriptionPayment: '/v1/callbackpremiumsubscriptionpayment'
            
        },
    
        certification: {
            
                
                updateCertification: '/v1/certifications/:certificationId'
            
                ,
                listCertifications: '/v1/certifications'
            
                ,
                createCertification: '/v1/certifications'
            
                ,
                getCertification: '/v1/certifications/:certificationId'
            
                ,
                deleteCertification: '/v1/certifications/:certificationId'
            
        },
    
        language: {
            
                
                deleteLanguage: '/v1/languages/:languageId'
            
                ,
                updateLanguage: '/v1/languages/:languageId'
            
                ,
                listLanguages: '/v1/languages'
            
                ,
                getLanguage: '/v1/languages/:languageId'
            
                ,
                createLanguage: '/v1/languages'
            
        },
    
        sys_premiumsubscriptionPayment: {
            
                
                getPremiumsubscriptionPayment2: '/v1/premiumsubscriptionpayment2/:sys_premiumsubscriptionPaymentId'
            
                ,
                listPremiumsubscriptionPayments2: '/v1/premiumsubscriptionpayments2'
            
                ,
                createPremiumsubscriptionPayment: '/v1/premiumsubscriptionpayment'
            
                ,
                updatePremiumsubscriptionPayment: '/v1/premiumsubscriptionpayment/:sys_premiumsubscriptionPaymentId'
            
                ,
                deletePremiumsubscriptionPayment: '/v1/premiumsubscriptionpayment/:sys_premiumsubscriptionPaymentId'
            
                ,
                listPremiumsubscriptionPayments2: '/v1/premiumsubscriptionpayments2'
            
                ,
                getPremiumsubscriptionPaymentByOrderId: '/v1/premiumsubscriptionpaymentbyorderid/:orderId'
            
                ,
                getPremiumsubscriptionPaymentByPaymentId: '/v1/premiumsubscriptionpaymentbypaymentid/:paymentId'
            
                ,
                getPremiumsubscriptionPayment2: '/v1/premiumsubscriptionpayment2/:sys_premiumsubscriptionPaymentId'
            
        },
    
        sys_paymentCustomer: {
            
                
                getPaymentCustomerByUserId: '/v1/paymentcustomers/:userId'
            
                ,
                listPaymentCustomers: '/v1/paymentcustomers'
            
        },
    
        sys_paymentMethod: {
            
                
                listPaymentCustomerMethods: '/v1/paymentcustomermethods/:userId'
            
        }
    
};

Auth Axios Configuration

import axios from 'axios';
import { CONFIG } from 'src/global-config';

const authAxiosInstance = axios.create({ 
  baseURL: CONFIG.authServiceUrl
});

authAxiosInstance.interceptors.response.use(
  (response) => response,
  (error) => Promise.reject((error.response && error.response.data) || 'Something went wrong!')
);

export default authAxiosInstance;

Fetcher Utility

export const fetcher = async (args) => {
  try {
    const [url, config] = Array.isArray(args) ? args : [args];
    const res = await authAxiosInstance.get(url, { ...config });
    return res.data;
  } catch (error) {
    console.error('Failed to fetch:', error);
    throw error;
  }
};

Service Endpoints

export const authEndpoints = {
    
    login: "/login", 
    me: "/v1/users/:userId", 
    logout: "/logout",
    
    
        user: {
            
                
                getUser: '/v1/users/:userId'
            
                ,
                updateUser: '/v1/users/:userId'
            
                ,
                updateProfile: '/v1/profile/:userId'
            
                ,
                createUser: '/v1/users'
            
                ,
                deleteUser: '/v1/users/:userId'
            
                ,
                archiveProfile: '/v1/archiveprofile/:userId'
            
                ,
                listUsers: '/v1/users'
            
                ,
                searchUsers: '/v1/searchusers'
            
                ,
                updateUserRole: '/v1/userrole/:userId'
            
                ,
                updateUserPassword: '/v1/userpassword/:userId'
            
                ,
                updateUserPasswordByAdmin: '/v1/userpasswordbyadmin/:userId'
            
                ,
                getBriefUser: '/v1/briefuser/:userId'
            
                ,
                registerUser: '/v1/registeruser'
            
        }
    
};

Service Integration

JobApplication Service Integration

The JobApplication service is integrated using:

  • Service-specific Axios instance with base URL configuration
  • Dynamic endpoint generation based on business logic
  • Error handling through response interceptors
  • Fetcher utility for data retrieval

Available Endpoints:

  • JobPosting data object management

  • JobApplication data object management

Networking Service Integration

The Networking service is integrated using:

  • Service-specific Axios instance with base URL configuration
  • Dynamic endpoint generation based on business logic
  • Error handling through response interceptors
  • Fetcher utility for data retrieval

Available Endpoints:

  • Connection data object management

  • ConnectionRequest data object management

Company Service Integration

The Company service is integrated using:

  • Service-specific Axios instance with base URL configuration
  • Dynamic endpoint generation based on business logic
  • Error handling through response interceptors
  • Fetcher utility for data retrieval

Available Endpoints:

  • CompanyFollower data object management

  • CompanyUpdate data object management

  • Company data object management

  • CompanyAdmin data object management

Content Service Integration

The Content service is integrated using:

  • Service-specific Axios instance with base URL configuration
  • Dynamic endpoint generation based on business logic
  • Error handling through response interceptors
  • Fetcher utility for data retrieval

Available Endpoints:

  • Post data object management

  • Like data object management

  • Comment data object management

Messaging Service Integration

The Messaging service is integrated using:

  • Service-specific Axios instance with base URL configuration
  • Dynamic endpoint generation based on business logic
  • Error handling through response interceptors
  • Fetcher utility for data retrieval

Available Endpoints:

  • Message data object management

  • Conversation data object management

Profile Service Integration

The Profile service is integrated using:

  • Service-specific Axios instance with base URL configuration
  • Dynamic endpoint generation based on business logic
  • Error handling through response interceptors
  • Fetcher utility for data retrieval

Available Endpoints:

  • Profile data object management

  • Premiumsubscription data object management

  • Certification data object management

  • Language data object management

  • Sys_premiumsubscriptionPayment data object management

  • Sys_paymentCustomer data object management

  • Sys_paymentMethod data object management

Auth Service Integration

The Auth service is integrated using:

  • Service-specific Axios instance with base URL configuration
  • Dynamic endpoint generation based on business logic
  • Error handling through response interceptors
  • Fetcher utility for data retrieval

Available Endpoints:

  • User data object management

Request/Response Patterns

Standard Request Format

Request Structure

// Simple GET request
const response = await fetcher('/endpoint');

// GET request with parameters
const response = await fetcher(['/endpoint', { params: { id: 1 } }]);

// POST request

const response = await jobApplicationAxiosInstance.post('/endpoint', data);
// Simple GET request
const response = await fetcher('/endpoint');

// GET request with parameters
const response = await fetcher(['/endpoint', { params: { id: 1 } }]);

// POST request

const response = await networkingAxiosInstance.post('/endpoint', data);
// Simple GET request
const response = await fetcher('/endpoint');

// GET request with parameters
const response = await fetcher(['/endpoint', { params: { id: 1 } }]);

// POST request

const response = await companyAxiosInstance.post('/endpoint', data);
// Simple GET request
const response = await fetcher('/endpoint');

// GET request with parameters
const response = await fetcher(['/endpoint', { params: { id: 1 } }]);

// POST request

const response = await contentAxiosInstance.post('/endpoint', data);
// Simple GET request
const response = await fetcher('/endpoint');

// GET request with parameters
const response = await fetcher(['/endpoint', { params: { id: 1 } }]);

// POST request

const response = await messagingAxiosInstance.post('/endpoint', data);
// Simple GET request
const response = await fetcher('/endpoint');

// GET request with parameters
const response = await fetcher(['/endpoint', { params: { id: 1 } }]);

// POST request

const response = await profileAxiosInstance.post('/endpoint', data);
// Simple GET request
const response = await fetcher('/endpoint');

// GET request with parameters
const response = await fetcher(['/endpoint', { params: { id: 1 } }]);

// POST request

const response = await authAxiosInstance.post('/endpoint', data);

Response Handling

Standard Response Format

// Success response
const response = await fetcher('/endpoint');
// response contains the data directly

// Error handling
try {
  const response = await fetcher('/endpoint');
} catch (error) {
  console.error('API Error:', error);
  // Error is already processed by the interceptor
}

Pagination Handling

Pagination Implementation

// Pagination is handled by the data grid component
// The MUI DataGrid handles pagination automatically

Error Handling Patterns

Error Classification

Error Types

// Basic error handling through Axios interceptors
// Errors are processed and simplified before reaching components

Error Handler

Centralized Error Handling

class APIErrorHandler {
  handleError(error) {
    if (error.response) {
      // Server responded with error status
      return this.handleServerError(error);
    } else if (error.request) {
      // Network error
      return this.handleNetworkError(error);
    } else {
      // Other error
      return this.handleUnknownError(error);
    }
  }

  handleServerError(error) {
    const { status, data } = error.response;
    
    switch (status) {
      case 400:
        return new ValidationError(
          data.message || 'Validation failed',
          data.errors || []
        );
      case 401:
        return new AuthenticationError(
          data.message || 'Authentication required'
        );
      case 403:
        return new AuthorizationError(
          data.message || 'Access denied'
        );
      case 404:
        return new APIError(
          data.message || 'Resource not found',
          404,
          'NOT_FOUND'
        );
      case 429:
        return new APIError(
          data.message || 'Rate limit exceeded',
          429,
          'RATE_LIMIT'
        );
      case 500:
        return new APIError(
          data.message || 'Internal server error',
          500,
          'SERVER_ERROR'
        );
      default:
        return new APIError(
          data.message || 'Unknown server error',
          status,
          'UNKNOWN_ERROR'
        );
    }
  }

  handleNetworkError(error) {
    return new NetworkError(
      'Network error occurred',
      error
    );
  }

  handleUnknownError(error) {
    return new APIError(
      error.message || 'Unknown error occurred',
      0,
      'UNKNOWN_ERROR'
    );
  }
}

Retry Mechanisms

Exponential Backoff Retry

class RetryManager {
  constructor(options = {}) {
    this.maxRetries = options.maxRetries || 3;
    this.baseDelay = options.baseDelay || 1000;
    this.maxDelay = options.maxDelay || 10000;
    this.retryableStatusCodes = options.retryableStatusCodes || [408, 429, 500, 502, 503, 504];
  }

  async executeWithRetry(operation, context = {}) {
    let lastError;
    
    for (let attempt = 0; attempt <= this.maxRetries; attempt++) {
      try {
        return await operation();
      } catch (error) {
        lastError = error;
        
        if (attempt === this.maxRetries || !this.shouldRetry(error)) {
          break;
        }
        
        const delay = this.calculateDelay(attempt);
        await this.sleep(delay);
      }
    }
    
    throw lastError;
  }

  shouldRetry(error) {
    return false;
  }

  calculateDelay(attempt) {
    return 0;
  }

  sleep(ms) {
    return Promise.resolve();
  }
}

Performance Optimization

Request Batching

Batch Request Manager

class BatchRequestManager {
  constructor(apiClient) {
    this.apiClient = apiClient;
    this.pendingRequests = new Map();
    this.batchTimeout = 100; // 100ms
  }

  async batchRequest(endpoint, data, options = {}) {
    const batchKey = this.generateBatchKey(endpoint, options);
    
    if (!this.pendingRequests.has(batchKey)) {
      this.pendingRequests.set(batchKey, []);
    }
    
    const request = {
      data: data,
      resolve: null,
      reject: null,
      timestamp: Date.now()
    };
    
    const promise = new Promise((resolve, reject) => {
      request.resolve = resolve;
      request.reject = reject;
    });
    
    this.pendingRequests.get(batchKey).push(request);
    
    // Process batch after timeout
    setTimeout(() => this.processBatch(batchKey), this.batchTimeout);
    
    return promise;
  }

  async processBatch(batchKey) {
    const requests = this.pendingRequests.get(batchKey);
    if (!requests || requests.length === 0) return;
    
    this.pendingRequests.delete(batchKey);
    
    try {
      const [serviceName, endpoint] = batchKey.split(':');
      const batchData = requests.map(req => req.data);
      
      const response = await this.apiClient.post(`/${endpoint}/batch`, {
        requests: batchData
      });
      
      requests.forEach((request, index) => {
        if (response.data.results[index].success) {
          request.resolve(response.data.results[index].data);
        } else {
          request.reject(new Error(response.data.results[index].error));
        }
      });
    } catch (error) {
      requests.forEach(request => {
        request.reject(error);
      });
    }
  }
}