React で GitHub のコントリビューションヒートマップを作成する

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

• ヒートマップカレンダーに必要な依存関係をインストールする方法。
• ヒートマップコンポーネントの基本構造を作成する方法。
• データをフィルタリングするための状態を追加する方法。
• ヒートマップにデータを埋め込むためのダミーデータを生成する方法。
• ダミーデータを使ってカレンダーヒートマップをレンダリングする方法。
• 活動レベルに基づいてヒートマップをフィルタリングするためのフィルタリングロジックを実装する方法。
• ヒートマップコンポーネントとフィルタボタンをスタイリッシュにする方法。
• ヒートマップコンポーネントをメインアプリケーションファイルに統合する方法。
• アプリケーションを起動してヒートマップカレンダーを表示する方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• Reactアプリケーションにカレンダーヒートマップを統合する。
• Reactコンポーネントで状態を管理し、データをフィルタリングする。
• ReactとCSSを使ってカレンダーヒートマップをレンダリングしてスタイリッシュにする。
• 視覚化のためのダミーデータを生成して埋め込むプロセスを理解する。
• ヒートマップカレンダーアプリケーションを起動して表示する。