DEV Community

Takeo Sartorius
Takeo Sartorius

Posted on

Learn to use APIs creating an app that shows average cleaning rates in the US

So, last winter I was trying to figure out how much I should be paying for a basic apartment cleaning in different cities. You know, just to compare prices across states while I planned a move. I ended up going down this rabbit hole—spreadsheets, blog posts, weird calculators... and then it hit me: "Why not build a small app that shows average cleaning rates using a public API?" Way more fun than copy-pasting stuff.

Here’s the thing: if you’ve ever wanted to get into APIs, this is a super chill way to start. Plus, you’ll end up with something actually useful—especially if you’ve ever looked up something like House Cleaning in Chicago IL and got overwhelmed by the range of prices.

House Cleaning in Chicago IL

Wait, what's an API again?

Let me break it down like I would to a buddy over coffee ☕:

  1. API (Application Programming Interface) – A digital bridge that lets apps talk to each other.
  2. Endpoints – Think of them like entry points to specific data.
  3. GET request – It's basically like saying “Hey, give me the info I asked for.”
  4. JSON format – The kinda messy but lovable format data usually comes in.
  5. Fetch() in JavaScript – A simple way to grab data from the web into your app.

How I built it (and how you can too)

Step 1 – Find your data. In my case, I used a public dataset that includes average service costs by city and category. Just Google around for "housekeeping rates API" or use something like Data.gov.

Step 2 – Start simple. I made a basic HTML page with a search box and a spot to show the result.

<input type="text" id="cityInput" placeholder="Enter a US city" />
<button onclick="getRates()">Check Rates</button>
<div id="output"></div>
Enter fullscreen mode Exit fullscreen mode

Step 3 – Fetch the data with JavaScript.

async function getRates() {
  const city = document.getElementById('cityInput').value;
  const res = await fetch(`https://api.example.com/rates?city=${city}`);
  const data = await res.json();
  document.getElementById('output').innerText = `Avg Rate: $${data.average}`;
}
Enter fullscreen mode Exit fullscreen mode

Step 4 – Add a little logic to make it more useful.

if (data.average > 150) {
  document.getElementById('output').innerText += ' (That’s a bit pricey!)';
} else {
  document.getElementById('output').innerText += ' (Not bad at all!)';
}
Enter fullscreen mode Exit fullscreen mode

Step 5 – Style it up so it doesn’t look like 1998.

#output {
  font-size: 1.2em;
  margin-top: 20px;
}
Enter fullscreen mode Exit fullscreen mode

Step 6 – Optional: map the response to local businesses or services. For example, if someone searches House Cleaning in Chicago, your app could suggest nearby providers.

Why this project rocks (and you’ll love doing it too)

  • You’ll get comfortable with real-life data and API structures
  • You end up with a usable app (trust me, friends will ask you to use it)
  • You can expand it later with filters, sorting, or even location-based suggestions
  • It’s the kind of portfolio piece that screams “I don’t just code—I solve problems”

You’ll also start noticing patterns and, weirdly, gain a better sense of how services vary between cities. Like, I thought House Cleaning Chicago would be more expensive than LA… turns out, not always.

Give it a try

Seriously, just start. Open your editor, grab any public API, and start playing. Keep it messy at first. You’ll get the hang of it fast.

Let me know if you build something—I’d love to see what city you start with!

Top comments (0)