/github-search

Search GitHub user and show user info with different UI and add or remove user repo to the favorite list using react with firestore and firebase authentication.

Primary LanguageJavaScript

Demo

URL: https://searchgithubuserinfo.netlify.app

Features

  • Authentication

    1. Sign up

    2. Login

    3. Forgot Password using email

    4. Logout

  • user info

    1. Search GitHub user using GitHub API

    2. Show user profile

      • Avatar

      • Name

      • Username / Github Id

      • Bio

      • Blog URL / Website

      • Location

    3. User Repo

      • Total Repo, Gists and Followers Count

      • Name (on click open github repo page)

      • Description

      • language

      • Star count

      • Watch count

      • Heart icon for add to favorite

    4. add or remove repo in favorite

Technologies

  1. React 16.13.1
  2. React Dom 16.13.1
  3. React Router Dom 5.2.0
  4. React Toasttify 7.0.4
  5. Axios 0.21.1
  6. React Bootstrap 1.6.0
  7. Bootstrap 4.6.0

How to Use

git clone https://github.com/DIp15739/github-search.git
cd github-search
npm install

  • Firebase

    • Create

      • Create Firebase Project
      • Start Authentication with Email
      • Start Cloud Firestore
      • Copy config from Project settings

    • Setup in project

      • Create .evn.local file and add all data
        REACT_APP_FIREBASE_API_KEY = apiKey value
        REACT_APP_FIREBASE_AUTH_DOMAIN = authDomain value
        REACT_APP_FIREBASE_DATABASE_URL = databaseURL value
        REACT_APP_FIREBASE_PROJECT_ID = projectId value
        REACT_APP_FIREBASE_STORAGE_BUCKET = storageBucket value
        REACT_APP_FIREBASE_MESSAGING_SENDER_ID = measurementId value
        REACT_APP_FIREBASE_APP_ID = appId value

  • In the project directory

    npm start

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

    The page will reload if you make edits.
    You will also see any lint errors in the console.

    npm test

    Launches the test runner in the interactive watch mode.
    See the section about running tests for more information.

    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.

    The build is minified and the filenames include the hashes.
    Your app is ready to be deployed!

    See the section about deployment for more information.