technical-article-checker

技術記事チェッカー（React, Typescript）
create-react-appを用いて作成しました。
サイトのデモはこちら

概要

技術記事を手軽に確認できるツールです。
あらかじめ設定したサイトの指定したトピックの最新記事一覧を確認することができます。
気になる記事があった場合は、その記事が掲載されているサイトに移動し、確認することができます。
言語はTypeScript (React)を使用し、CSSフレームワークとしてmaterial-uiを用いました。
ReactやTypeScriptに関して理解を深めるため、stateによるトピック情報の保持やReact Hooksの利用、型を意識した実装をしました。
※現時点(2021.12.12現在)では、Zennから公式のAPIが提供されていないため、Zennのページは最新記事一覧が表示されません。

機能

APIから最新記事一覧を取得

axiosを用いて公式のAPI(ex. Qiita API)から最新の記事情報を取得し、表示します。

最新記事を確認するサイトの切り替え

最新記事を閲覧したいサイトを切り替えることができます。
※現時点(2021.12.12現在)では、Zennから公式のAPIが提供されていないため、Zennのページは最新記事一覧が表示されません。

気になるトピックの選択

気になるトピックを選択すると、そのトピックに関する最新記事が表示されます。
トピックを選択しない場合は、すべてのトピックから最新記事が取得されます。

記事の閲覧

「記事を見る（外部サイトに移動します）」ボタンからその記事のページに移動し、記事を閲覧することができます。

技術情報

フロントエンド

• React
• TypeScript
• Create React App
• Material-UI v4
• axios
• remove-markdown

デプロイ環境

• GitHub Pages

自動コード整形ツール

• ESLint
• Prettier
• Stylelint
• husky v6