Lovable and LearnWorlds integration: Step-by-Step Guide 2025

 

Adding the Axios Dependency via Code

 

• Create or open the file that holds your project’s dependency declarations (commonly a package.json file). Since Lovable doesn’t give direct terminal access, you will add Axios as a dependency by inserting it into your JSON configuration.
• Add the following entry into your dependencies section:

  
  "axios": "^0.21.1"
      

• This tells your project to include Axios for making HTTP requests to LearnWorlds.

 

Creating the LearnWorlds Service File

 

• Create a new file named learnworldsService.ts inside your preferred folder (for example, a folder named integrations within your project’s src directory).
• Paste the following TypeScript code into that file. This service file handles the API requests to LearnWorlds:

  
  import axios from 'axios';
  
  const BASE_URL = 'https://api.learnworlds.com';
  export interface Course {
    id: string;
    title: string;
    description: string;
  }
  export async function fetchCourses(apiKey: string): Promise<Course[]> {
    try {
      const response = await axios.get(${BASE_URL}/courses, {
        headers: { 'Authorization': Bearer ${apiKey} }
      });
      return response.data;
    } catch (error) {
      console.error('Error fetching courses from LearnWorlds:', error);
      throw error;
    }
  }
      

  
  


• This file defines a function, fetchCourses, which makes a GET request to LearnWorlds to retrieve courses using your API key.

 

Creating a Configuration File for API Keys

 

• Create a new file named config.ts in your src directory.
• Paste the following code inside it to manage your LearnWorlds API key:

  
  export const LEARNWORLDSAPIKEY = 'YOURLEARNWORLDSAPIKEYHERE';
      

• Replace YOURLEARNWORLDSAPIKEYHERE with your actual LearnWorlds API key.

 

Integrating LearnWorlds into Your Main Application Code

 

• Open your main application file (commonly app.ts or similar) in the Lovable project.
• Add an import for both the configuration and the LearnWorlds service by inserting the following at the top of the file:

  
  import { LEARNWORLDSAPIKEY } from './config';
  import { fetchCourses } from './integrations/learnworldsService';
      

• Insert the following code snippet where you wish to load the LearnWorlds data (for instance, after your application initializes):

  
  async function loadLearnWorldsCourses() {
    try {
      const courses = await fetchCourses(LEARNWORLDSAPIKEY);
      // Process and integrate courses into your Lovable project as needed.
      console.log('LearnWorlds Courses:', courses);
    } catch (error) {
      console.error('Error loading LearnWorlds data:', error);
    }
  }
  
  loadLearnWorldsCourses();
      

  
  


• This code calls the fetchCourses function using your API key and logs the returned courses. You can modify this area to integrate the courses into your project’s UI or further processing logic.

 

Testing the Integration

 

• Save all your changes. When your Lovable project runs, the loadLearnWorldsCourses function will be executed.
• Open your project’s browser console to verify that the courses are being logged, which confirms successful communication with LearnWorlds.
• If you encounter any errors, check the console messages to troubleshoot the issue.