GitHub Viewer

The GitHub Viewer is a single-page application built with React, TypeScript, HTML, CSS, and SASS.

I developed this app to provide a quick and convenient way to review GitHub accounts. The main feature is a search field with controlled input, allowing users to search for specific GitHub profiles.

During the coding process, I encountered challenges related to closures. Specifically, there was an issue with the timer not reaching 0 and a component not unmounting as expected. I spent several hours researching and troubleshooting this problem, delving deeper into the concept of closures. Eventually, I successfully resolved the bug, which significantly enhanced my understanding of closure mechanisms.

To retrieve information from GitHub, I utilized the GitHub API, which provided the necessary data for displaying user profiles and other related details.

screenshot
screenshot
screenshot

Project design

To create the design of this app I've chosen Figma.

screenshot
screenshot

Development

Before starting the development process, I made the decision to manage the state of the app using only the React useState hook. This choice was influenced by the simplicity of the app and the small size of the state.

To minimize errors during development, I utilized TypeScript and defined specific types for certain values. This provided type safety and helped catch potential errors early on.

The main feature of this app is the ability to view GitHub profiles. To achieve this, I implemented a search field with a controlled input. Additionally, I incorporated a timer functionality that helps reduce the time spent on viewing individual profiles, enhancing the overall user experience.

screenshot
screenshot
screenshot
screenshot
screenshot