DEV Community

Andres Ortiz
Andres Ortiz

Posted on

How to Build a “Find Microdermabrasion Near Me” Web App with HTML, CSS & JavaScript

Okay, real talk. Have you ever found yourself googling “microdermabrasion near me” at 11 p.m. the night before a wedding or a big job interview? Been there. I once spent 40 minutes scrolling random spa sites that looked like they were built in 2007. Yikes.

So one night I thought—why not just build a simple web app that helps people find skin treatments near them? Not rocket science, just practical. If you’re learning frontend dev, this is a fun little project with real-world value.

Let’s break it down together, right?

Microdermabrasion Chicago il

Wait, What Even Is Microdermabrasion?

Quick and dirty: it’s a skincare treatment where they exfoliate your face with a special tool. No needles, no downtime. Kinda like power-washing your pores, you know?

A lot of people in Microdermabrasion Chicago swear by it. And I mean—have you seen their glow on Instagram? Unreal.

5 Things You’ll Learn Building This App

I’m keeping this beginner-friendly but useful. We’ll cover:

  • Basic HTML structure for location-based search
  • Using Google Maps API (super fun once it works)
  • Styling with CSS Grid (because flexbox is not always enough)
  • Adding JavaScript geolocation (yes, your browser can track you)
  • Clean UI tricks for mobile users

Let’s get into the step-by-step.

1. Set Up Your HTML Skeleton

Keep it simple. Something like:

<form id="searchForm">
  <input type="text" placeholder="Enter your city or zip">
  <button type="submit">Search</button>
</form>
<div id="results"></div>
Enter fullscreen mode Exit fullscreen mode

Nothing fancy. You want it to load fast and feel intuitive.

2. Plug In Google Maps or Places API

This is where the magic happens. You’ll need an API key, and a little patience. Use the placesService.textSearch() method to return clinics near your location.

Quick tip: limit the query to terms like "microdermabrasion" + city name. In my case, I tried Microdermabrasion in Chicago and it returned actual local spas—pretty neat.

3. Style with Care

Don’t underestimate the power of clean design. Use soft gradients, rounded corners, and big clickable buttons. I used:

button {
  background: linear-gradient(#f09, #c06);
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
}
Enter fullscreen mode Exit fullscreen mode

Honestly, people will judge your whole app based on your font choices. [sic]

4. Add Geolocation (Optional But Cool)

Use navigator.geolocation.getCurrentPosition() to auto-detect user location. Saves a step and feels slick.

Just remember—ask permission first. Nobody wants their face treatment journey starting with a privacy scare.

5. Display Results Dynamically

Use innerHTML or (if you're feeling spicy) dynamically generate elements with createElement(). Highlight name, rating, address, and maybe even a map preview.

When I tested it in Microdermabrasion Chicago il areas, it worked like a charm. Felt like I built my own little Yelp.

Why Bother? Here’s What You’ll Get Out of This Project

  • You’ll learn APIs like a boss.
  • Practice real UI/UX choices (not just todo lists).
  • Understand how front and back can talk to each other.
  • Build something that actually helps people IRL.

Plus, it’s portfolio-worthy and easy to deploy with Netlify or GitHub Pages.

TL;DR — Let’s Recap Real Fast

If you’ve ever wished you could just find a legit spa without all the noise, you’re not alone. You can totally build your own little helper app—and look good doing it.

Start simple. Break things. Google errors. And you’ll get there.

Give it a shot this week—you’ll see!

Top comments (0)