Building a React GitHub Heatmap Contributions

# 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/lab-1/assets/effect.mp4" width="100%" autoplay loop muted playsinline>

## 🎯 Tasks

In this project, you will learn:

- How to install necessary dependencies for the heatmap calendar.
- How to create the basic structure of the heatmap component.
- How to add state for filtering the data.
- How to generate dummy data to populate the heatmap.
- How to render the calendar heatmap with dummy data.
- How to implement filtering logic to filter the heatmap based on activity level.
- How to style the heatmap component and filter buttons.
- How to integrate the heatmap component into the main application file.
- How to launch the application to view the heatmap calendar.

## 🏆 Achievements

After completing this project, you will be able to:

- Integrate a calendar heatmap in a React application.
- Manage state and filter data in a React component.
- Render and style a calendar heatmap using React and CSS.
- Understand the process of generating and populating dummy data for visualization.
- Launch and view the heatmap calendar application.