GitHub 검색

GitHub 사용자를 검색하고 다른 UI로 사용자 정보를 표시하고 firestore 및 firebase 인증과 반응하여 즐겨찾기 목록에 사용자 저장소를 추가하거나 제거합니다.

데모



GitHub: https://github.com/DIp15739/github-search
URL: https://searchgithubuserinfo.netlify.app

특징


  • 인증

  • 1.  Sign up
    2.  Login
    3.  Forgot Password using email  
    
    4.  Logout
    
  • 사용자 정보

  • 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
    

    기술


  • 리액트 16.13.1
  • 반응 돔 16.13.1
  • React Router Dom 5.2.0
  • 리액트 토스트파이 7.0.4
  • 악시오스 0.21.1
  • 리액트 부트스트랩 1.6.0
  • 부트스트랩 4.6.0

  • 사용하는 방법



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

  • 중포 기지


  • 만들기
  • Firebase 프로젝트 생성
  • 이메일로 인증 시작
  • Cloud Firestore 시작
  • 프로젝트 설정에서 구성 복사
  • 프로젝트에서 설정
  • .evn.local 파일 생성 및 모든 데이터 추가
    REACT_APP_FIREBASE_API_KEY = apiKey 값
    REACT_APP_FIREBASE_AUTH_DOMAIN = authDomain 값
    REACT_APP_FIREBASE_DATABASE_URL = 데이터베이스 URL 값
    REACT_APP_FIREBASE_PROJECT_ID = 프로젝트 ID 값
    REACT_APP_FIREBASE_STORAGE_BUCKET = storageBucket 값
    REACT_APP_FIREBASE_MESSAGING_SENDER_ID = measurementId 값
    REACT_APP_FIREBASE_APP_ID = appId 값





  • 프로젝트 디렉토리에서



    npm 시작



    개발 모드에서 앱을 실행합니다.
    브라우저에서 보려면 http://localhost:3000을 여십시오.

    수정하면 페이지가 다시 로드됩니다.
    또한 콘솔에 린트 오류가 표시됩니다.

    npm 테스트



    대화형 감시 모드에서 테스트 러너를 시작합니다.
    자세한 내용은 running tests 섹션을 참조하십시오.

    npm 실행 빌드



    프로덕션용 앱을 build 폴더에 빌드합니다.
    프로덕션 모드에서 React를 올바르게 번들로 묶고 최상의 성능을 위해 빌드를 최적화합니다.

    빌드가 축소되고 파일 이름에 해시가 포함됩니다.
    앱을 배포할 준비가 되었습니다!

    자세한 내용은 deployment 섹션을 참조하십시오.

  • 좋은 웹페이지 즐겨찾기