Global Finder

Overview

Global Finder is a country and city discovery platform that aggregates data from multiple public APIs — geography, weather, currency, and points of interest — into a single, searchable interface. Built with accessibility as a first-class concern.

The Problem

Travel and geography research is fragmented across multiple tools. Global Finder consolidates the most useful data points — demographics, climate, currency conversion, and local highlights — into one fast, filterable interface.

Process

Accessibility was designed in from day one, not retrofitted. Every interactive element has visible focus states, ARIA labels, and keyboard navigation. The filter system uses URL state (search params) rather than component state — enabling shareable, bookmarkable searches.

Technical Deep-Dive

The multi-API orchestration layer handles different response shapes, error states, and rate limits from each provider. A unified data transformer normalizes all responses into a consistent shape before they hit the component layer.

Code Sample

URL-synchronized filter state — makes searches bookmarkable

// hooks/useFilterState.ts
export function useFilterState() {
  const router = useRouter();
  const searchParams = useSearchParams();
  
  const filters = useMemo(() => ({
    region: searchParams.get('region') ?? 'all',
    population: searchParams.get('population') ?? 'any',
    language: searchParams.get('language') ?? '',
  }), [searchParams]);
  
  const setFilter = useCallback((key: string, value: string) => {
    const params = new URLSearchParams(searchParams.toString());
    if (value === '' || value === 'all' || value === 'any') {
      params.delete(key);
    } else {
      params.set(key, value);
    }
    router.push(`?${params.toString()}`, { scroll: false });
  }, [router, searchParams]);
  
  return { filters, setFilter };
}

Results