yaasiinaxmed/Somali-Postal-Code-Explorer

A modern, interactive postal code directory for Somalia — browse every region, search cities, view postal codes on an interactive map, and copy formatted addresses in one click. # 🇸🇴 Somali Postal Code Explorer > **A modern, interactive postal code directory for Somalia** — browse every region, search cities, view postal codes on an interactive map, and copy formatted addresses in one click. --- ## 📸 Overview The **Somali Postal Code Explorer** is a full-stack web application built with Next.js App Router that provides a clean, searchable, and interactive directory of postal codes across all 18 regions of Somalia. It de-duplicates raw postal records so each city appears exactly once, with all its codes grouped together for a better user experience. ### ✨ Key Features | Feature | Description | |---|---| | 🗺️ **Interactive Map** | Leaflet-powered map showing city markers; click to select a city | | 🔍 **Live Search** | Filter by city name, region name, region code, or postal code | | 📋 **One-click Copy** | Copy individual codes, all codes, or a full formatted address | | 🏷️ **Region Filter** | Quick-filter pills for all 18 Somali regions | | 📊 **Stats Dashboard** | Live counts of cities shown, regions, and unique postal codes | | 📱 **Responsive** | Fully optimised for mobile, tablet, and desktop | --- ## 🗂️ Project Structure ``` somali-postel-code/ ├── app/ │ ├── layout.tsx # Root layout with metadata, fonts & analytics │ ├── page.tsx # Entry point — loads postal data & renders MapApp │ └── globals.css # Global Tailwind CSS base styles │ ├── components/ │ ├── map-app.tsx # 🧠 Main application component (search, filter, UX) │ ├── somalia-map-fullscreen.tsx # Leaflet map with city markers │ ├── map-leaflet.tsx # Low-level Leaflet wrapper │ ├── postal-code-content.tsx # Postal code display card │ ├── postal-code-map.tsx # Embedded map tile │ ├── postal-code-table.tsx # Tabular view of codes │ ├── search-bar.tsx # Reusable search bar │ ├── somali-flag.tsx # SVG Somali flag asset │ ├── theme-provider.tsx # next-themes provider wrapper │ └── ui/ …