Skip to content

Improvement About UI Design #206

@anncy0413

Description

@anncy0413

Hello! I'm a junior computer science student, and I think your project is very cool and useful! I'm completing a course related to web development teams! I hope I can provide some UI and code improvements to your project after your approval! Here are some questions I have in mind!

  1. Missing Theme Toggle (Light/Dark Mode)
    The current UI only supports a default light theme with no option for users to switch to a dark mode. This can lead to eye strain during nighttime use and lacks the customization expected in modern web applications.

Solution:
Introduced lightTheme and darkTheme using styled-components
Added a toggle button to switch themes dynamically

  1. Cluttered Top Bar – Moved Controls to a Side Panel
    All controls (repo input, view toggle, export buttons) are packed into the top bar, creating a dense and distracting layout that pushes the chart downward.
    Solution:
    Created a SidePanel component with fixed positioning on the left
    Used consistent spacing and alignment for better structure

  2. No Loading Indicators During Data Fetch
    When users input a repository or switch between views, there is no visual feedback that data is being fetched. This creates uncertainty and may lead to double inputs or confusion
    Solution:
    Added a loading spinner using react-spinners
    Displayed loading text while fetch operations are in progress

  3. No Error UI for Invalid Repositories
    If a user types an invalid repository name, nothing happens — the app silently fails to load, providing no indication of what went wrong.
    Solution:
    Set an error state and displayed a friendly error message
    Added a “Try Again” button to reload the app

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions