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

 

Adding Everhour Dependency to Your Lovable Project

 

• Open your project's package.json file.
• Within the "dependencies" section, add the following line to include the Axios HTTP client (used to communicate with Everhour's API):

  
  "axios": "^0.21.1"
      

• If you already have other dependencies, simply add this line within the curly braces. Save the file.

 

Creating the Everhour Integration Module

 

• Create a new folder named integrations inside your project's src folder (if it doesn’t exist already).
• Within the src/integrations folder, create a new file named everhourIntegration.ts.
• Copy and paste the following TypeScript code into everhourIntegration.ts:

  
  import axios from 'axios';
  
  export interface EverhourTimeEntry {
      projectId: string;
      taskId: string;
      userId: string;
      startedAt: string; // ISO 8601 format
      duration: number;  // Duration in seconds
  }
  export class EverhourIntegration {
      private apiKey: string;
      private baseUrl: string = 'https://api.everhour.com/api'; // Base URL for Everhour API
  constructor(apiKey: string) {
      if (!apiKey) {
          throw new Error("Everhour API key is required");
      }
      this.apiKey = apiKey;
  }
  
  public async createTimeEntry(entry: EverhourTimeEntry): Promise<any> {
      try {
          const response = await axios.post(${this.baseUrl}/time-entries, entry, {
              headers: {
                  'X-Api-Key': this.apiKey,
                  'Content-Type': 'application/json'
              }
          });
          return response.data;
      } catch (error) {
          console.error("Error creating Everhour time entry:", error);
          throw error;
      }
  }
  
  }
      

  
  

 

Integrating Everhour in Your Main Application File

 

• Open your main application file (for example, app.ts or main.ts) located in your src folder.
• At the top of the file, import the Everhour integration module by adding:

  
  import { EverhourIntegration, EverhourTimeEntry } from './integrations/everhourIntegration';
      

• Initialize the integration with your Everhour API key. Add the following code snippet:

  
  // Replace 'YOUREVERHOURAPIKEYHERE' with your actual Everhour API key.
  const EVERHOURAPIKEY = 'YOUREVERHOURAPIKEYHERE';
  const everhour = new EverhourIntegration(EVERHOURAPIKEY);
      

• Create a function to submit a time entry. Insert the following code where you want to handle time entry creation (for example, upon a specific user action or event):

  
  async function submitTimeEntry() {
      const timeEntry: EverhourTimeEntry = {
          projectId: 'projectidexample',
          taskId: 'taskidexample',
          userId: 'useridexample',
          startedAt: new Date().toISOString(),
          duration: 3600, // 1 hour in seconds
      };
  
  try {
      const result = await everhour.createTimeEntry(timeEntry);
      console.log('Time entry created:', result);
  } catch (error) {
      console.error('Failed to create time entry:', error);
  }
  
  }
  // Call the function where appropriate in your application logic:
  submitTimeEntry();
      

  
  

 

Using the Everhour Integration in Your Lovable Project

 

• Determine where in your Lovable project the time tracking event occurs. This could be after a task is completed or when a user logs time.
• Insert a call to the submitTimeEntry function (or a suitably modified version) within the relevant part of your code so that the time entry is automatically sent to Everhour.
• Ensure that error handling and logging are properly managed for a smooth integration experience.