Dashboard Danych "GlobalStats"

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 i Rozwiązania

Największym wyzwaniem było efektywne zarządzanie stanem aplikacji i zapewnienie płynności działania przy dużych zbiorach danych.

1. 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.

2. 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.