GitHub Finder

Github Finder is a web application that developed by ReactJs and TypeScript.
It's a training project that using it you can get a Github's user by using search it's username (by using https://docs.github.com/en/rest/search#search-users API endpoint), bookmark users that you want, view details of every user and so etc.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

Project Repository:

https://github.com/masoudtabatabaei/github-finder

Features

• Search user by using apart or whole of it's username.
• Ability to toggle display mode (grid view or table view).
• Pagination (get chunk of data based of page size and page number changes).
• Ability to like a user and add it to favorites list (by using browser Localstroage)
• Ability share search results by share project url (search filters put on url queryparams)
• Change Page title by move between pages (Home, About and ...)
• Ability to toggle with themes (Change theme)

Project Structure

|-- public
|-- src
  |-- assets
  |-- components
  |-- utils
  |-- hooks
  |-- layouts
  |-- pages
  |-- routes
  |-- types

Dependencies

• ReactJs : version 18.2.0
• TypeScript : version 4.7.4
• Axios : used for make XMLHttpRequests from the browser.
• react-router-dom : used for implement routing in project.
• font-awesome : used for apply font icons.
• styled-component : used for implementing styles.

Todos

• Create user page profile details
• Use styled-component to refactor styles
• Ability toggle Theme
• Write Tests using Testing library