🌍 Building “Ma Zone” — A Geolocated Events Platform with Next.js

#nextjs #api #eventdriven #webdev

I recently built Ma Zone, a web application that helps users discover events near their location and around the world.
The goal was to work on real-world challenges like geolocation, third-party APIs, maps, and SEO in a modern full-stack React environment.

Here’s a breakdown of the technical side of the project 👇

https://ma-zone-60.vercel.app/

🧱 Tech Stack

Next.js (App Router)
React + TypeScript
Leaflet + React-Leaflet for interactive maps
External Event APIs (geolocated event data)
Server-side data fetching with caching control
SEO optimization using Next.js Metadata API

🗺️ 1. Handling Maps in Next.js (SSR Challenge)

Leaflet depends on the window object, which doesn’t exist during server-side rendering.

To avoid the classic:

ReferenceError: window is not defined

I isolated the map into a Client Component and loaded it dynamically:

"use client";

import dynamic from "next/dynamic";

const Map = dynamic(() => import("./Map"), { ssr: false });

export default function MapWrapper() {
  return <Map />;
}

📍 2. User Geolocation

The app requests the user’s position via the browser API:

navigator.geolocation.getCurrentPosition(
  (position) => {
    setCoords({
      lat: position.coords.latitude,
      lng: position.coords.longitude,
    });
  },
  () => {
    // fallback location (Paris)
    setCoords({ lat: 48.8566, lng: 2.3522 });
  }
);

These coordinates are then used to fetch nearby events.

🌐 3. Fetching Geolocated Events from APIs

On the server side, I aggregate event data from multiple providers and normalize the structure:

const mapEvent = (item: any) => ({
  id: item.id,
  title: item.name,
  description: item.description,
  date: item.date,
  latitude: Number(item.latitude),
  longitude: Number(item.longitude),
});

Data is fetched with cache: "no-store" to ensure fresh event listings:

await fetch(url, { cache: "no-store" });

🧭 4. Displaying Events on the Map

Each event becomes a marker:

<Marker position={[event.latitude, event.longitude]}>
  <Popup>
    <h3>{event.title}</h3>
    <p>{event.date}</p>
  </Popup>
</Marker>

This creates a visual discovery experience instead of a simple list.

⚡ 5. SEO with Next.js Metadata API

Even though the app is dynamic and map-heavy, SEO still matters.

export const metadata = {
  title: "Ma Zone – Events near you",
  description: "Discover concerts, festivals and local events around you.",
  openGraph: {
    title: "Ma Zone",
    description: "Find events near you",
    type: "website",
  },
};

This ensures proper indexing and rich previews when shared.

🧠 Key Challenges Solved

✔ Mixing client-only libraries (Leaflet) with SSR
✔ Handling browser geolocation safely
✔ Normalizing data from different event APIs
✔ Building a map-based UX instead of a traditional feed
✔ Keeping performance + SEO in a hybrid Next.js app