# 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.
Click the virtual machine below to start practicing