Building a React GitHub Heatmap Contributions | Challenge

# Introduction

This project will lead you through creating a heatmap calendar in React, resembling GitHub's contribution graph. This kind of calendar can be a compelling way to visualize activity data over time, with the intensity of color indicating the level of activity on a given day. By the end of this project, you will have a clear understanding of how to integrate and use a calendar heatmap in a React application.

## 👀 Preview

<video src="https://file.labex.io/namespace/718bace8-27a3-4200-a588-dde4041ceeb9/web/project-building-a-react-github-heatmap-contributions/challenge-1/assets/effect.mp4" width="100%" autoplay loop muted playsinline>

## 🎯 Tasks

In this project, you will learn to:

- Install necessary dependencies for the heatmap calendar.
- Create the basic structure of the heatmap component.
- Add state for filtering the data.
- Generate dummy data to populate the heatmap.
- Render the calendar heatmap with dummy data.
- Implement filtering logic to filter the heatmap based on activity level.
- Style the heatmap component and filter buttons.
- Integrate the heatmap component into the main application file.
- Launch the application to view the heatmap calendar.

## 🏆 Achievements

In this project, you will learn:

- How to install dependencies and set up a React application for a heatmap calendar.
- How to create and structure a React component for a calendar heatmap.
- How to manage state and filter data in a React component.
- How to generate and populate dummy data for visualization purposes.
- How to render and style a calendar heatmap using React and CSS.
- How to integrate the heatmap component into the main application.
- How to launch and view the heatmap calendar application.