Website Search Feature with Maps and Sharing

This level adds small product features to the first website. Search, maps, and sharing are simple, but they teach the habit of improving user usefulness instead of only improving appearance.

This page is a practical guide to website search feature. You are not memorizing theory first; you are learning enough context to give better instructions, review AI's work, and ship something that behaves correctly.

Why This Skill Matters

People looking for website search feature usually need more than a definition. They need a narrow workflow: what to ask AI, what to check in the browser, and what proves the result works.

In this level, website search feature stays tied to one outcome instead of drifting into unrelated tools or theory.

What You Are Learning

Search reduces friction

If a page has many cards, search helps users find the item that matches their intent.

Embeds add context quickly

A map embed can make a local guide feel more real without building your own mapping system.

Sharing creates distribution

A share button or copy-link action helps people pass the site to someone else.

How to Work with AI in This Level

Treat the AI assistant like a fast junior developer that needs a clear brief and a reviewer. Give it the goal, the constraints, and the acceptance criteria. Then make it explain the files it changed before you move on.

A strong request usually includes:

• the user-facing outcome you want
• the pages, components, or files that should change
• the style or behavior constraints
• what should stay unchanged
• how you will verify the result

Step 1: Add search

Let users filter restaurant cards by name, cuisine, or description.

Use this prompt as a starting point:

Upgrade this food guide so it feels more like a small product. Add search/filtering for the restaurant cards, a map embed for the featured location, and share actions. Keep the UI clean and make sure the features work on mobile.

After the assistant finishes, inspect the browser or terminal before continuing. The goal is to build the habit of checking real output instead of assuming the code is correct.

---

Step 2: Add a map embed

Add a Google Maps or OpenStreetMap embed for the featured restaurant or city area.

After the assistant finishes, inspect the browser or terminal before continuing. The goal is to build the habit of checking real output instead of assuming the code is correct.

---

Step 3: Add share actions

Add a copy-link button and a simple social share link.

After the assistant finishes, inspect the browser or terminal before continuing. The goal is to build the habit of checking real output instead of assuming the code is correct.

Review Checklist

Before you mark the level complete, check the result manually:

• The page or feature loads without console errors.
• The main user flow works from start to finish.
• Text is readable on mobile and desktop.
• Buttons, links, and forms give visible feedback.
• You can explain the main files AI changed in plain English.

Pass Criteria

For website search feature, the standard is simple: the feature should work in the browser, match the page goal, and be clear enough for you to explain without reading every line of code.

Search filters the cards, the map renders, and sharing/copy actions work without breaking the layout.

If You Get Stuck

• If map embeds are blocked, use a simple external map link instead.
• If search is case-sensitive, ask AI to normalize the query and text.
• If share actions feel awkward, keep one copy-link button and one social share link.

What to Ask AI Next

After finishing website search feature, ask AI to summarize the implementation and suggest one improvement that would help a real user. This keeps the page focused on website search feature while still giving you a next step.

If the level works, ask AI to summarize what you built in three bullets and suggest one small improvement. Save that summary. These notes become useful later when you deploy, debug, or explain the project to someone else.