Animated Pokemon Data Dashboard

This is an Animated Pokemon Data Dashboard. It interfaces with the PokéAPI to display character statistics using fluid, color-coded progress bars and dynamic badges. Its function is to transform raw JSON data into an engaging, highly visual interface, demonstrating effective state management and asynchronous rendering in React.

Specs

• Weight: ~1.2 MB (Dependencies: React, ReactDOM, GSAP, Axios).
• Performance: High. State updates are localized to specific components, and GSAP handles the loader animation efficiently. The CSS transition handles the fluid resizing of the stat bars, avoiding expensive React re-renders on layout shifts.
• Theming / Customization: Type badges and stat bars utilize hardcoded hex colors defined in JavaScript objects (typeColors, statColors). Modifying the global theme requires updating SCSS variables ($bg, $fg).
• Responsiveness: Fluid. Utilizes vw units and Flexbox/Grid to scale from mobile devices up to a maximum width of 700px.
• Web APIs: Standard fetch (via Axios) for asynchronous data retrieval.
• Graceful Degradation: [!] Fundamentally relies on JavaScript and React. If JS fails, the page renders completely blank. Keyboard accessibility is poor: the search dropdown items (<li class="result-item">) lack ARIA roles and cannot be navigated via arrow keys, and the visual stat bars are invisible to screen readers.

Anatomy

• HTML: A solitary #root div for React injection.
• SCSS: Defines the dark mode aesthetic using a strict variable palette. Relies on @mixin for centering and Flexbox spacing.
• React (JS): Divided into focused functional components: <SearchBar>, <PokeInfo> (handling the image and types), <Data> (mapping the stats), and a custom <Loader> that orchestrates GSAP timelines based on data fetching states.

Logic

The architectural highlight is the synchronization between the asynchronous data fetching and the GSAP loading animation.

  useEffect(() => {
    // Speed up the animation when data has loaded
    if (start && !completed && !isLoading) {
      tl.current.timeScale(15);
    }
    // Waits for data to load after animation completed
    if (completed && !isLoading) {
      tl.current.to(range.current, 1, {
        width: 100 + "%",
        onComplete: () => setShow(true)
      });
    }
  }, [isLoading, setShow, start, completed]);

Instead of simply hiding the loader the millisecond the API resolves, the <Loader> component actively monitors the isLoading prop from the parent. If the API request resolves before the initial artificial loading animation finishes, it dynamically increases the GSAP timeScale to 15x, instantly rushing the progress bar to the end. This guarantees the user always sees a complete 0-to-100% loading sequence, making the application feel polished and mechanically sound, regardless of network speed.

Feel

Sleek and responsive. The search bar provides immediate autocomplete feedback without stuttering. The transition between characters feels deliberate; the custom loader gives a sense of mechanical processing before the new data snaps into place. The stat bars fluidly grow and shrink (transition: 0.65s ease) relative to the previous character, providing clear, comparative visual feedback rather than an abrupt jump cut.