yaasiinaxmed/Somali-Postal-Code-Explorer
Domain:
geospatialRecord type:
software
Creator:
yaa
Host:
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/ …