GitHub Trend

A homemade GitHub Trends Page built with React.js, Redux and TypeScript.

React.js、Redux、TypeScriptで構築された自家製の GitHub トレンド ページ。

Introduction | 紹介

This is a GitHub trending website written in React.js and TypeScript, using Redux to manage state, and connecting APIs such as Google Authentication and Data.

これは、React.js と TypeScript で記述され、Redux を使用して状態を管理し、Google 認証やデータなどの API を接続する GitHub のトレンド Web サイトです。

Overview | 概要

App Features

• Click on the repository name to link directly to the repository on GitHub.
• Trend data can be filtered by Time Range, the default is today's trends.
• Trend data can be filtered by Programming Language, the default is all.
• It provides a Google Authentication to Login / Registration and Logout.
• It considers Mobile-First responsive design.

アプリの機能

• リポジトリ名をクリックして、GitHub のリポジトリに直接リンクします。
• トレンド データは時間範囲でフィルタリングできます。デフォルトは今日のトレンドです。
• トレンド データはプログラミング言語でフィルタリングできます。デフォルトは all です。
• ログイン/登録およびログアウトに Google 認証を提供します。
• モバイル ファーストのレスポンシブ デザインを考慮しています。

App Screenshot

Desktop・デスクトップ

Mobile・モバイル

App Link

• Live Site URL: GitHubTrend

Useage | 用途

• Install all modules listed as dependencies in package.json.

npm i

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

npm start

Data APIs | データ API

• GitHub Trending Data API
• Firebase Authentication service for Google

Tech Stacks | 技術スタック

• ReactJS
• TypeScript
• Redux
  • React Redux
  • Redux Tookit
  • Redux Thunk
  • MiddleWare
• Semantic HTML5 markup
• SCSS custom properties
• Material UI
• LottieFiles (Animation)
• FontAwesome (Icon)
• Axios
• Lint
  • ESLint
  • Prettier
  • eslint-config-prettier