# Signpost Platform - Import Platform This is a country-specific information platform built with React and TypeScript, providing localized information services, articles, and service directories. ## Project Overview The Signpost platform provides critical information services to communities in Import Platform. This instance serves specific geographic areas with tailored content, services, and language support. ## Note This llms.txt file was generated with fallback content due to API connectivity issues. For the most accurate and up-to-date information about dynamic routes and content, please check the live application. ## Repository Structure ``` signpost-monorepo/ ├── lib/ # Shared components and utilities │ ├── components/ # Reusable React components │ ├── api.ts # API integration layer │ ├── app.ts # Core application logic │ ├── db.ts # Database operations │ ├── helpers.tsx # Utility functions │ ├── locale.ts # Internationalization │ ├── translations.ts # Translation data │ └── types.*.ts # TypeScript type definitions ├── packages/ # Individual country/region applications │ └── [this-package]/ # This specific country application ├── lerna.json # Monorepo configuration └── package.json # Root dependencies ``` ## Key Technologies & Architecture ### Frontend Stack - **React 18** with TypeScript for type safety - **Vite** for fast development and optimized builds - **React Router** for client-side routing - **Tailwind CSS** for utility-first styling - **React GA4** for analytics tracking ### Backend & Data - **Zendesk API** integration for content management - **IndexedDB** (via Dexie) for local data caching - **Mapbox** for interactive mapping and geolocation - **REST APIs** for service provider data ### Internationalization - Multi-language support with RTL language handling - Dynamic locale switching - Localized content and translations - Country-specific configurations ## Client-Side Routing & Pages ### Core Application Routes The application uses React Router for client-side navigation with the following route structure: #### Static Routes - `/:locale?` - Home page with dynamic content blocks - `/:locale?/services/:id?` - Individual service provider pages - `/:locale?/articles/:id?` - Article detail pages - `/hc/:locale?/articles/:id?` - Help center article pages (legacy support) - `/:locale?/categories/:categoryid?/:sectionid?` - Category and section listing pages - `/:locale?/search-results` - Search results page - `/:locale?/sections/:sectionid` - Redirect handler for legacy section URLs - `/:locale?/service-map` - Interactive map view of all services - `/:locale?/contact-us` - Contact form page #### Dynamic Route Generation This package generates dynamic routes at build time by fetching data from the Zendesk API and service provider databases. #### Route Structure Pattern ``` /[locale]/[content-type]/[id] ``` - `locale` - Language code (e.g., en, es, ar, fr) - `content-type` - articles, services, categories - `id` - Unique identifier for the content ### Page Components #### Home Page (`Blocks`) - Dynamic content blocks rendered based on configuration - Mission statement and search functionality - Category and service overviews - Social media channels and contact information #### Service Pages (`Service`) - Detailed service provider information - Contact details and operating hours - Geographic location with map integration - Service categories and specializations - Accessibility and population served #### Article Pages (`Article`) - Rich text content with metadata - SEO-optimized with structured data - Social sharing capabilities - Related content and breadcrumbs - File attachments and media #### Category Pages (`Categories`) - Hierarchical content organization - Article listings with pagination - Search and filtering capabilities - Breadcrumb navigation - Related categories and sections #### Search Results (`SearchResults`) - Full-text search across articles and services - Faceted filtering options - Result categorization and ranking - Pagination and result count - Search analytics tracking #### Map Page (`MapPage`) - Interactive service location mapping - Geographic clustering and filtering - Service details in popups - Map style controls and zoom - Mobile-responsive design #### Contact Page (`ContactUs`) - Multi-channel contact forms - Country-specific contact information - Social media integration - Accessibility features - Form validation and submission ### Internationalization & Localization #### Language Support - Dynamic locale detection and switching - RTL language support (Arabic, Hebrew, etc.) - Localized URL structures - Country-specific content and configurations #### URL Localization - Locale prefixes in URLs (e.g., /en/, /es/, /ar/) - Automatic locale redirection - Hreflang tags for SEO - Language-specific content routing ### SEO & Performance #### Static Site Generation - Pre-rendered routes for better SEO - Dynamic route generation at build time - Sitemap generation for search engines - Meta tag optimization per page #### Performance Optimizations - Code splitting by route - Lazy loading of components - Image optimization and caching - Service worker for offline support ## Shared Components (`lib/components/`) ### Core UI Components - **Analytics** - Google Analytics 4 integration with privacy controls - **Article** - Rich text article rendering with metadata - **Blocks** - Modular content blocks (text, images, services, etc.) - **Header/Footer** - Navigation and site structure - **Search** - Full-text search across articles and services - **Maps** - Interactive service location mapping ### Content Management - **Categories/Sections** - Hierarchical content organization - **Services** - Service provider listings with filtering - **Contact Forms** - User feedback and support - **Breadcrumbs** - Navigation context ### User Experience - **Language Dropdown** - Multi-language selection - **Cookie Banner** - Privacy compliance - **Loading States** - User feedback during data loading - **Pagination** - Content navigation - **Tree Select** - Hierarchical data selection ## Data Models ### Service Providers - Geographic location data - Contact information and hours - Service categories and specializations - Accessibility and population served - Provider details and descriptions ### Content Management - Articles with rich text content - Categories and sections for organization - Multi-language content support - File attachments and media ### Geographic Data - Countries, regions, and cities - Service provider locations - Interactive mapping integration ## Common Patterns ### Component Architecture - Functional components with hooks - TypeScript interfaces for props - CSS modules and Tailwind utilities - Responsive design patterns - Accessibility considerations ### Data Flow - Centralized state management - API abstraction layer - Local caching with IndexedDB - Real-time data synchronization - Error handling and fallbacks ### Internationalization - Dynamic locale detection - RTL language support - Localized date/time formatting - Country-specific configurations - Translation key management ## Package Structure This package follows the consistent structure: ``` [package-name]/ ├── src/ │ ├── main.tsx # Application entry point │ ├── index.css # Global styles │ └── assets/ # Static assets ├── public/ # Public assets ├── index.html # HTML template ├── package.json # Dependencies and scripts ├── vite.config.ts # Build configuration ├── tailwind.config.js # Styling configuration └── tsconfig.json # TypeScript configuration ``` ## Development Workflow ### Monorepo Management - **Lerna** for package versioning and publishing - Shared dependencies at root level - Consistent tooling across packages - Centralized build and test processes ### Code Sharing - Common components in `lib/` - Shared utilities and helpers - Type definitions and interfaces - Styling and theming systems ### Deployment - Vercel deployment configuration - Environment-specific builds - Static asset optimization - CDN integration for performance ## Key Features ### Information Services - **Article Library** - Rich content with search and categorization - **Service Directory** - Provider listings with filtering and mapping - **Contact Information** - Direct communication channels - **Multi-language Support** - Localized content and interfaces ### User Experience - **Responsive Design** - Mobile-first approach - **Accessibility** - WCAG compliance and screen reader support - **Performance** - Optimized loading and caching - **Search** - Full-text search across all content ### Analytics & Privacy - **Google Analytics 4** - User behavior tracking - **Privacy Controls** - Cookie consent and data protection - **Performance Monitoring** - Core Web Vitals tracking ## Configuration ### Country-Specific Settings - Language preferences and RTL support - Geographic boundaries and regions - Service provider categories - Content organization and navigation ### Environment Variables - API endpoints and authentication - Analytics tracking IDs - Mapbox access tokens - Deployment configurations ## Maintenance & Updates ### Content Management - Zendesk integration for article updates - Service provider data synchronization - Translation management and updates - Media asset management ### Technical Maintenance - Dependency updates and security patches - Performance monitoring and optimization - Accessibility audits and improvements - Cross-browser compatibility testing This package provides a localized instance of the Signpost platform, serving Import Platform with dynamic content generated from live APIs.