This application gives you the ability to see, for each person on GitHub, what projects they have created and how many people have added each project to their favorites.
Available for Android.
- Follow the React Native Guide for getting started building a project with native code.
- Clone or download the repo
npm ito install dependenciesnpx react-native run-androidto start the packager and run the app in the Android simulator
This is the first screen that is shown to the user. To begin the search there is a need to enter the name of the user whose information we want to search for and click on the "Start Stalking" button. On click, a GET API is performed to retrieve information on the creator that was chosen.
Once the search is started there can be two different scenarios. If the user should have accidentally entered an incorrect username or there should be a technical problem with the services the user will be sent back to an error page. In this case clicking "Close" will redirect the user to the Reserarch Page. The second scenario is where the GitHub user is found, as in the screenshot to the right. In this scenario, a GET API is performed when the page is loaded to retrieve all information on the public repositories present on the profile of the selected user.
Choosing one of the projects created by the GitHub Creator whose information the user is looking for will result in a GET API that returns what and how many stargazers there are in that repository. Within the button, the number of stargazers who have bookmarked the repository will be displayed. Clicking the button displays the list of users who have bookmarked the project.
On a technical and structural level, I decided to use Typescript in order to have a more controlled code. For the management of APIs and promises I decided to use Axios. For navigation between screens I used react-navigation and specifically used the navigation stack. For the dropdown I used the react-native-select-dropdown library. For testing, I used Jest and React Native Testing Library.
The structure you see is the tree structure starting from the 'app' folder.
In the "assets" folder are the images I used for the readme.md.
Inside the folder 'components' I have placed all the components that are common to several pages or components.
In the folder 'screens' are the folders of all screens that are seen by the user. As you can see, inside the "searchPage" folder I have also placed the components folder which contains all the components common to that specific screen.
In the "services" folder are all the APIs and all the response interfaces.
In the "utils" folder is the folder with the mocks that I used for testing.