Build a Real Hotel Price Tracker With Loveable and Makcorps API

Ever looked at the chaos of hotel prices online and thought, “There has to be an easier way to keep track of this”? If you run a travel website, manage hotel bookings, build comparison tools, or simply want to help travellers get the best deals, you’re in the right place.

This guide will walk you through creating your own hotel price tracker using Loveable, the no-code builder anyone can use, and Makcorps Hotel Price API, which pulls up-to-the-minute prices for any hotel, anywhere in the world, from over 200 booking sites like Booking.com, Expedia, and Agoda.

You don’t need to know how to code. You don’t need to hire a developer. You just need a few minutes and a bit of curiosity. 

Ready to make finding the best hotel deal simple? Let’s get started.

What You Need

Before you begin, you’ll need:

• Loveable account
  
• Makcorps API key

Step 1: Get Your Makcorps API Key

Start by registering at Makcorps. After verifying your email, head over to your dashboard and retrieve your unique API key.

This key will authenticate your requests to the Makcorps API. 

Step 2: Understand the APIs – Mapping and Price

To build this hotel price tracker, you need to understand the two-step process involving two APIs provided by Makcorps.

1. Hotel Mapping API

This API helps you find the unique document_id for a specific hotel, which is needed to fetch price data. You can check the response in Postman by making a GET request. 

Endpoint:

https://api.makcorps.com/mapping?api_key=YOUR_API_KEY&name=Hotel%20Name,%20City

To know more, check out the hotel mapping API documentation page.

2. Hotel Price API – Search By Hotel ID

Once you have the document_id this is the hotel ID), use this in the API endpoint to get real-time hotel pricing data from different OTAs.

Endpoint:

https://api.makcorps.com/hotel?hotelid=DOCUMENT_ID&rooms=1&adults=2&checkin=2025-07-01&checkout=2025-07-03&api_key=YOUR_API_KEY&cur=USD

Key details:

• Use &cur= to specify currency. Do not use &currency=
  
• Date format is YYYY-MM-DD
  
• This endpoint may require two requests for full data in some cases
  
• Returned data is deeply nested in an array: comparison[0]
  

Response Format:

{

  "comparison": [[

    {

      "vendor1": "Booking.com",

      "price1": "150",

      "Totalprice1": "165",

      "vendor2": "Expedia",

      "price2": "148",

      "Totalprice2": "160"

    }

  ]]

}

Parsing this correctly is essential.

Step 3: Key Technical Notes Before You Build

Before you move to Loveable, understand these critical requirements:

• Currency parameter: Use cur=, not currency=
  
• Date format: Always use YYYY-MM-DD
  
• Double-fetch logic: In rare cases, a second API call may be needed to retrieve the full dataset
  
• Nested format: Price comparison results are stored in comparison[0]. Always access the first element
  
• Smart hotel matching: Use exact match first, then partial, then default to the first result
  

Step 4: Login to Loveable and Use the Prompt

Now, go to Loveable and log into your account.

In the chat prompt, paste the full instruction below 👇:

Note: In the last line of prompt, don’t forget to paste your API key.

Complete Prompt for Loveable:

Build a modern hotel price comparison web application that actually works with real API integration.

CRITICAL API WORKFLOW (This is essential for it to work):

The tracker uses a 2-step API process:

Step 1 - Hotel Mapping API: Find the hotel's document_id

Endpoint: https://api.makcorps.com/mapping?api_key=${API_KEY}&name=${searchQuery}
Search query format: "Hotel Name, City" (comma-separated)
Returns array of hotels with document_id, name, city, country
Important: Use smart matching - try exact match first, then partial match, then fallback to first result
Step 2 - Price API: Get prices using the document_id

Endpoint: https://api.makcorps.com/hotel?hotelid=${document_id}&rooms=${rooms}&adults=${adults}&checkin=${checkin}&checkout=${checkout}&api_key=${API_KEY}&cur=${currency}
Critical: Must use &cur= NOT &currency= for currency parameter
Date format: YYYY-MM-DD
Returns nested comparison array format
API Response Handling (Critical for parsing results):

The price API returns data in this format:


{
  comparison: [[
    {
      vendor1: "Booking.com",
      price1: "150",
      Totalprice1: "165",
      vendor2: "Expedia", 
      price2: "148",
      Totalprice2: "160"
      // ... more vendors
    }
  ]]
}
Essential parsing logic:


const vendorArray = priceData.comparison[0];
vendorArray.forEach((vendorData) => {
  Object.keys(vendorData).forEach(key => {
    if (key.startsWith('vendor') && !key.includes('price')) {
      const vendorNum = key.replace('vendor', '');
      const vendorName = vendorData[key];
      const price = vendorData[`price${vendorNum}`];
      const totalPrice = vendorData[`Totalprice${vendorNum}`];
      
      if (vendorName && price) {
        results.push({
          vendor: vendorName,
          price: totalPrice || price
        });
      }
    }
  });
});
Required Error Handling & Retry Logic:

Implement fetchWithRetry with exponential backoff (1s, 2s, 4s delays)
Handle CORS properly with headers: 'Accept': 'application/json', 'Content-Type': 'application/json'
Add comprehensive console.log statements for debugging
Validate dates (future dates only, checkout after checkin)
Handle empty API responses gracefully
Smart Hotel Matching Function:


const findBestHotelMatch = (hotels, searchName) => {
  // Exact match first
  const exactMatch = hotels.find(hotel => 
    hotel.name.toLowerCase() === searchName.toLowerCase()
  );
  if (exactMatch) return exactMatch;
  
  // Partial match second
  const partialMatch = hotels.find(hotel =>
    hotel.name.toLowerCase().includes(searchName.toLowerCase()) ||
    searchName.toLowerCase().includes(hotel.name.toLowerCase())
  );
  if (partialMatch) return partialMatch;
  
  // Fallback to first result
  return hotels[0];
};
UI/UX Requirements:

Primary color: #E59C15 (golden orange)
10 currencies with symbols: USD($), EUR(€), GBP(£), INR(₹), AUD(A$), CAD(C$), JPY(¥), CHF(Fr), CNY(¥), SGD(S$)
Form validation with user-friendly error messages
Loading states with spinners
Selected hotel display card
Search summary with all parameters
Results grid with vendor avatars (first letter of vendor name)
"Powered by Makcorps.com" attribution in footer
Essential Form Fields:

Hotel Name (required, with bed icon)
City (required, with map pin icon)
Check-in/Check-out dates (calendar pickers, required)
Adults (1-6 dropdown)
Rooms (1-5 dropdown)
Currency (dropdown with full names and symbols)
Technical Stack:

React with TypeScript
Tailwind CSS for styling
Shadcn/ui components (Card, Button, Input, Select, Calendar, Popover)
Date-fns for formatting
Lucide React icons
API Configuration:


const API_KEY = 'YOUR_API_KEY_HERE'; // Replace with actual key
Critical Success Factors:

URL encode the search query properly
Use correct currency parameter (&cur= not &currency=)
Parse the nested comparison array format correctly
Implement proper retry logic for API failures
Handle vendor data with null/undefined price filtering
Use the document_id (not name) for price API calls
This prompt includes all the insider knowledge needed to build a working hotel price tracker. The key is understanding the 2-API workflow and the specific response format parsing.


This is my actual api key which you need to use: (paste your API KEY Here)

Step 5: What If Loveable Doesn’t Build It Perfectly?

While Loveable is incredibly powerful, it may sometimes miss critical logic or fail to connect an API correctly on the first try. This is expected when dealing with complex prompts or API response structures.

If your tracker is missing results or something looks off, simply type this into Loveable’s chat:

“The price data isn’t loading or is incomplete. Please re-read the prompt, especially the API response format. Fix the vendor and price extraction logic.”

Loveable’s AI will analyze its own output, adjust the API integration, and rebuild the component, often correctly, the second time.

You can also paste a specific API response sample in the chat if you want it to improve parsing.

Step 6: Testing Your Hotel Price Tracker

Fill in the form on your app with some hotel details. Then check if the tracker shows the right prices. You can also double-check the data using Postman, just to be sure everything’s working.

Want to see my tracker in action? Have a look below 👇

Wrapping Up

Building a hotel price tracker with Loveable and the Makcorps API is super easy. You’ve now got a tool that can fetch real-time hotel prices from hundreds of booking sites, anywhere in the world, without any complicated code or setup.

But that’s just the beginning. The Makcorps API isn’t only for price tracking. You can use it to spot the best hotel deals for any trip, keep an eye on what competitors are charging, pull data straight into a spreadsheet, or even power your own travel comparison website. The possibilities go well beyond a simple tracker.

To get data other than hotel pricing, you can use these hotel APIs and build something unique.

Want to explore more tutorials for using Makcorps API? Here are a few to get you started:

• How to get hotel prices from multiple sites into Google Sheets
  
• How to use Python with the Makcorps API for Booking.com data
  
• How to track hotel deals under your budget using the API
  

Ready to try it for yourself? Sign up on Makcorps, get your API keys, and start building. The world of hotel data is yours to explore.