bernard-silva / github-search-react-native-ts

App that allows you to search repositories on GitHub based on username.

Challenge: App to search on GitHub

Não fala inglês? Clique aqui para ver essa página em português.

Objective of the challenge: Implement a search page that brings user data from GitHub and when clicking on the photo returns more details and a list of your repositories, where when tapping on one of them you should be directed to the repository on the GitHub website . Also display a menu with the history of searched users.

Preview

Attention point

To prevent the GitHub API from being requested for each piece of information entered in the search input, the React Query library was used together with Zustand and Async Storage, to fetch previously searched data from the application cache, improving performance.

Tools used

• React Native (Expo)
• TypeScript
• Axios
• Styled Components
• React Query
• React Navigation
• Zustand

Why the tools?

• Performance: the marriage of React Query + Zustand allows for a more performative use of the application since with React Query it is possible to have more flexible management of server states when dealing with the API, using so the device cache for recent searches and Zustand for data persistence in Async Storage.
• Customizable styling: Styled Components allows you to write CSS styles inside JavaScript, turning them into components and improving code architecture and maintenance.
• API consumption: with axios we make HTTP requests in applications web, offering advanced features for efficient communication with servers.

How to execute?

You need to have the data manager packages/dependencies yarn in your machine and a device emulator (Android or iOS) or scan the QR Code generated on your cell phone with the Expo GO app

git clone https://github.com/bernard-silva/github-search-react-native-ts.git && cd github-search-react-native-ts

• Navigate to the project root
• Install dependencies with yarn install
• Run the project with yarn start
• Open the emulator by typing the letter a or scanning through the Expo GO app