Build a places search app with React + Tailwind

~35 min remaining

Step 1 of 6 — Scaffold React + Vite + Tailwind

What you'll build: a React app with a Tailwind-styled sliding sidebar for searching places by name; results render as cards, clicking one zooms the map and highlights the landmark. Prerequisites: Node 20+, a Magic Lane API key, and working knowledge of React hooks. Total time: ~35 minutes.

1. Scaffold React + Vite + Tailwind

Spin up a React + TypeScript project with Vite, install the Magic Lane Maps SDK, and add Tailwind CSS.

npm create vite@latest places-search -- --template react-ts
cd places-search
npm install
npm install @magiclane/maps-sdk
npm install -D tailwindcss @tailwindcss/vite

We're using Tailwind CSS v4 with its Vite plugin — no PostCSS or config file required, just the plugin and a single @import in your CSS.

Edit vite.config.ts — the two highlighted lines are what we're adding to wire up Tailwind:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Replace src/index.css with one line:

@import "tailwindcss";

Then trim src/App.tsx to a Tailwind smoke test and confirm the dev server runs:

export default function App() {
  return (
    <div className="h-screen w-screen grid place-items-center bg-slate-900 text-white">
      <h1 className="text-3xl font-semibold">Places Search — setup OK</h1>
    </div>
  );
}

npm run dev

You should see a dark page with centred white text. Tailwind classes are live — if they aren't, the @tailwindcss/vite plugin or the @import "tailwindcss" line is missing.

Add your Magic Lane API key to .env at the project root:

VITE_MAGICLANE_API_KEY=your-key-here

Get one from the developer portal.