Interaktywna aplikacja do wizualizacji danych demograficznych z całego świata, z dynamicznymi wykresami i opcjami filtrowania.
Wyzwanie
Wizualizacja ogromnych zbiorów danych (Big Data) w przeglądarce. Standardowe biblioteki powodowały spadki wydajności przy renderowaniu >100 tys. punktów.
Rozwiązanie
Wydajny Dashboard wykorzystujący Canvas API i wirtualizację (Ag-Grid). Przeniesienie ciężaru agregacji danych na backend zapewnia płynność interfejsu (60 FPS).
Wynik (95+/100 Lighthouse)
Płynna obsługa setek tysięcy rekordów, natychmiastowe filtrowanie danych i pełna dostępność interfejsu (Accessibility).
GlobalStats to interaktywna aplikacja typu dashboard, która ożywia globalne dane demograficzne. Umożliwia użytkownikom eksplorowanie i porównywanie statystyk krajów, takich jak populacja, PKB czy oczekiwana długość życia, za pomocą dynamicznych wizualizacji.
Aplikacja została zbudowana w React i TypeScript, co zapewniło bezpieczeństwo typów i łatwiejsze zarządzanie strukturą danych.
Kluczowe Funkcjonalności
Pobieranie danych w czasie rzeczywistym: Integracja z publicznym API (REST Countries API) w celu pobierania aktualnych danych demograficznych.
Dynamiczne Filtrowanie: Użytkownicy mogą filtrować i wyszukiwać kraje, a wykresy automatycznie aktualizują się, aby odzwierciedlić wybór.
Interaktywne Wykresy: Wykorzystanie biblioteki Recharts do renderowania responsywnych i czytelnych wykresów (np. słupkowych i kołowych), które reagują na działania użytkownika.
Wyzwania Techniczne
Największym wyzwaniem było efektywne zarządzanie stanem aplikacji i zapewnienie płynności działania przy dużych zbiorach danych.
Problem: Zarządzanie Stanem API
Rozwiązanie: Zastosowałem hooki React (useState, useEffect) do asynchronicznego pobierania danych oraz zarządzania stanami ładowania (loading) i błędów (error). Stworzyłem logikę filtrowania po stronie klienta, co zapewnia natychmiastową reakcję interfejsu bez konieczności ponownego odpytywania serwera.
Problem: Bezpieczeństwo Danych i Stabilność
Rozwiązanie: Użycie TypeScript w całym projekcie pozwoliło na zdefiniowanie ścisłych typów dla danych przychodzących z API. Wyeliminowało to błędy związane z nieoczekiwaną strukturą danych (np. null zamiast liczby) i ułatwiło przekazywanie poprawnych danych do komponentów wykresów Recharts.
Stack Technologiczny
