DevSync

I built DevSync using React to create a dynamic, component-based UI, with a main App component managing state for the username, user data, and repositories using the useState hook. For GitHub API integration, I used Axios to make asynchronous GET requests to fetch user profile data ( https://api.github.com/users/{username} ) and repository details ( https://api.github.com/users/{username}/repos ).

The UI includes a styled input field ( InputStyles ) for entering usernames and a button ( ButtonStyles ) to trigger the API calls, with GlobalStyle and AppStyles ensuring a consistent, responsive design via CSS-in-JS. The UserInfo and Repos components conditionally render the fetched data, displaying profile details and repository links only when available, while error handling catches API failures, ensuring a smooth user experience across mobile and desktop.

The main challenge in DevSync was styling UI components with CSS-in-JS, as misaligned elements, inconsistent colors, and unresponsive layouts made the app look unprofessional, like header text blending into backgrounds or inputs not resizing on mobile. I fixed this by using Chrome Dev Tools to test and adjust styles like background-color and color in real-time, referencing MDN Web Docs, W3 Schools and Stack Overflow for responsive design best practices.

Additionally, when switching from one GitHub username to another, the repoData state wasn't updating correctly and kept displaying the previous user's repositories due to stale state in the fetchData function. I fixed this by ensuring the setRepoData hook cleared old data on each search, using async-await properly in Axios calls and adding dependency checks in useEffect (though simplified in the sample code), which made the app refresh accurately and handle sequential searches without caching issues.

To make DevSync scalable, I used React’s component-based structure, splitting the UI into reusable UserInfo and Repos components to efficiently handle large datasets, like users with many repositories, without slowing down. Axios’s async API calls reduce delays, fetching data only when needed, and minimal state updates prevent performance issues.

For user-friendliness in real-world use, I designed a simple interface with a clear input field and search button, ensuring easy navigation for non-technical users. Responsive styling with CSS-in-JS adapts the layout for mobile and desktop, while error handling catches invalid usernames or API failures, keeping the app reliable and intuitive for everyday use.